1. Documentation
2. Tutoriels
3. Gérer une carte depuis l'URL

Gérer une carte depuis l'URL

Prérequis

Technologie

Pour utiliser rapidement LASCARjs, il vous faudra vous prémunir au préalable des librairies suivantes :

• jQuery (>= 3.2.1)
• Leaflet (>= 1.2.0)

Les versions indiquées entre partenthèses sont celles utilisées dans le cadre des démonstrateurs sur la page d'accueil, mais rien ne vous empêche d'utiliser des versions supérieures ou inférieures. Sachez que nous n'avons pas encore testé ces autres versions et ne pouvons pas garantir de support.

Il vous faudra aussi disposer d'une page web dans laquelle intégrer la carte. Pour simplifier ce tutoriel, je vous propose de partir d'une page HTML simple, sans framework (Bootstrap par exemple).

Objectifs

En repartant de la carte en mode "plein écran" du tutoriel Utilisation rapide¹, nous allons :

• Comprendre et utiliser le composant Url².

Réalisation

Etape 1 : Mise en place du gestionnaire de paramètres

La création d'un gestionnaire de paramètres contenus dans l'URL est simple, il suffit de générer une nouvelle instance². Il vous faudra référencer cette instance afin de pouvoir facilement intéragir avec celle-ci. Dans notre cas, cela peut donner le code suivant :

/* On intègre la référence de la carte dans une variable
   pour faciliter l'utilisation par la suite de composants
   fournis par LASCARjs (paramètres dans l'URL, layer GeoJSON,
   layer OverPass, ...). */
var map = new Lascar.cl.Map(),
/* On génère le gestionnaire des paramètres dans l'URL. */
    um = new Lascar.cl.component.Url();

Toutefois, pour que les paramètres associés à cette carte soient intégrés dans l'URL (et vice-versa), il nous faut encore relier la carte avec notre instance Url². Rien de bien compliqué à l'aide de la méthode .addTo(map: Lascar.cl.Map) : Lascar.cl.component.Url :

// On associe la carte et le gestionnaire de paramètres.
um.addTo(map);

A partir de ce moment là, tous changements sur la carte (zoom, position ou layer) sont répercutés dans l'URL et les changements dans l'URL se répercutent sur la/les cartes associées.

Pour finir, comment répercuter au premier chargement les potentiels paramètres de la carte présents dans l'URL ? Pour ce faire, rien de bien compliqué non plus, il vous faudra, une fois la page chargée, provoquer l'application des potentielles informations dans l'URL sur la carte. Je vous propose d'utiliser le code suivant :

// On charge au démarrage les potentielles informations de 
// l'URL sur la carte ...
$(window).on("load", function (event) {
    Lascar.UrlHashManager.fire("hashchange");
});

Etape 2 : Comprendre la gestion par l'URL

A l'origine, vous trouverez le composant Lascar.UrlHashManager³ en charge de la détection d'un changement au niveau du hash de l'URL. Afin de modifier le hash de l'URL sans provoquer de boucle infinie, ce composant embarque une méthode .goto(hash: string) : void. Ce composant retourne deux événements :

• proghashchange : permettant de détecter un changement "programmé" (au travers de la méthode goto()) dans le hash de l'URL.
• hashchange : permettant de détecter les autres changements dans le hash de l'URL.

C'est au travers de ce composant que notre instance Url² peut détecter les changements dans l'URL et inversement intégrer de nouvelles valeurs dans celle-ci. Pour récupérer les potentielles propriétés dans l'URL, notre instance exploite la méthode .unserialize() : object permettant d'associer, quand cela est possible, à chaque clé (que je noterai K) les paramètres pour la carte ou un marqueur (que je noterai P).

Paramètres d'une carte

• K : l'identifiant de la carte (utilisé par l'objet DOM).
• P : une chaîne de caractères de la forme suivant : Z/Lat/Lng/Layer tel que :
  • Z : soit le niveau de zoom de la carte.
  • Lat et Lng : soient la latitude et la longitude du centre de la carte.
  • Layer : soit l'identifiant du layer à utiliser.

Paramètres d'un marqueur

• K : l'identifiant unique du marqueur.
• P : une chaîne de caractères de la forme suivant : Lat/Lng/Marker tel que :
  • Lat et Lng : soient la latitude et la longitude du marqueur.
  • Marker : soit l'identifiant du type de marqueur à utiliser (si existant).

Les informations pour les cartes sont transmises aux principales intéressées (si elles sont référencées auprès de l'instance), tandis que les informations des marqueurs permettent de générer une couche de layer commune aux cartes liées à l'instance Url².

Consulter un exemple

Etape 3 : Aller plus loin - personnaliser les marqueurs

Voyons ensemble comment ajouter un marqueur personalisé à exploiter sur la carte, pour ce faire, je vous propose :

• d'utiliser l'icône suivante Pin rouge.
• de l'associer à l'identifiant redpin.
• d'utiliser le tutoriel suivant de Leaflet pour générer l'icône personnalisée.

L'ensemble des marqueurs exploitables par une instance Url² doivent être référencés dans cet objet Lascar.markers.

Dans notre cas, je vous propose d'intégrer ce nouveau marqueur à l'aide du code suivant :

/** On génère un marqueur personnalisé "redpin" ... */
Lascar.markers["redpin"] = new L.Icon({
    iconUrl: './redpin.png',
    iconSize:     [48, 48],
    iconAnchor:   [6, 40]
});

Consulter un exemple

Rendu

Une fois chacune des étapes précédentes réalisées, vous obtiendrez le résultat suivant :

Consulter le rendu