Fiche Javascript : API de cartographieObjet de la fiche :État de la fiche
| ||||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
- Note 1 :
L'attribut integrity est une fonction de sécurité qui permet aux navigateurs de vérifier que les fichiers qu'ils vont chercher sont reçus sans manipulation inattendue. Cela fonctionne en permettant de fournir un hachage cryptographique (« hash ») auquel le fichier récupéré doit correspondre. Lorsqu'un navigateur rencontre un élément <script> ou <link> avec un attribut integrity, avant d'exécuter le script ou avant d'appliquer les styles spécifiés par l'élément <link>, la navigateur doit comparer le script ou la feuille de style à la valeur donnée dans l'attribut integrity.
Si le script ou la feuille de styles ne correspond pas à la valeur de l'attribut integrity qui lui est associée, alors le navigateur doit refuser d'exécuter le script ou d'appliquer la feuille de style et doit retourner une erreur indiquant que le chargement de la ressource a échoué.
L'attribut crossorigin permet d'envoyer les informations d'authentification de l'utilisateur avec ou sans certificat : le mot clé anonymous associé à crossorigin indique que les requêtes pour cet élément auront la balise de certificat vide. Le mot clé use-credentials au contraire indiquera que la requête fournira un certificat. - Note 2 :
Pour éviter certains petits problèmes pouvant survenir, veillez à insérer ces 2 fichiers dans l'ordre et après avoir chargé vos propres fichiers javascpt et vos propres feuilles de style. - Note 3 :
Objet ( L.latLng(48.853,2.35) ) représentant un point géographique avec une latitude et une longitude données (et éventuellement l’altitude). Les notations de latitude et de longitude suivantes sont acceptées par toutes les méthodes de la librairie :- [50, 30] Exemple setView([50, 30], initZoom);
- {lon: 30, lat: 50} Exemple setView({lon: 30, lat: 50}, initZoom);
- {lat: 30, lon: 50} Exemple setView({lat: 50, lng: 30}, initZoom);
- L.latLng(50, 30) Exemple setView(L.latLng(50, 30), initZoom);
- Note 4 :
{z}, {x}, {y} Ces variables indiquent respectivement la valeur de zoom, la coordonnée X du zoom sur notre carte, et la coordonnée Y de notre zoom.
{s}, pour signaler au serveur que la librairie Leaflet doit fournir des informations complémentaires pour notre carte basés sur l'api des tuiles.
Open-source Leaflet : Gérer les évènements sur la carte (demo 1)
De façon générique : .on('Evènement', function(e){};
Parmi tant d'autres les évènements que l'on active dans la démo (principalement pour le journal) sont :
| Evènements | Quoi | Syntaxes |
|---|---|---|
| load | disponible lorsque la carte et entièrement chargée. Attention : Cet évènement doit être placé avant setview. Si on le fait aprés la carte sera déjà chargée et on ne recevra pas l'évènement. | map.on('load', function(e){}); |
| zoomstart | disponible au démarrage d'un zoom. | map.on('zoomstart',function(e){}); |
| zoomend | disponible à la fin d'un zoom. | map.on('zoomend',function(e){}); |
| popupopen | disponible dès l'ouverture d'un popup. | map.on('popupopen',function(e){}); |
| popupclose | disponible dès la fermeture d'un popup. | map.on('popupclose',function(e){}); |
| dblclick | disponible aprés chaque double click sur la carte. | map.on('dblclick',function(e){}); |
| click(1) | disponible aprés chaque click sur la carte. | map.on('click',function(e){}); |
Note(1) : L'activation de l'évènement click par lui même ne pose aucun problème, c'est plutot sa désactivation qui a était embêtante.
| Je n'ai put résoudre cela qu'avec l'utilisation d'un flag (true ou false) suivant si l'évènement a été activé ou pas, et de la façon suivante : |
|
Open-source Leaflet : Les boutons contrôle de zoom (demo 1)
Propriétés
Le zoom sur la carte peut être initialisé de différentes manières : les boutons de la carte, la roulette de la souris, les touches clavier plus et moins, par double click, par 2 doigts pour les écran tactiles.
| Les principales options de zoom | |
|---|---|
| Options | Actions |
| zoomControl | positionné à true ou false pour disposer ou non des boutons de zoom sur la carte. Par défaut à true. |
| doubleClickZoom | zoom sur double click. La valeur de cette option peut être true ou false ou "center" (le double click déclenchera un zoom au centre de la vue en fonction de la position du curseur). |
| keyboard | Zoom par utilisation des touches plus et moins du clavier. Valeurs true (par défaut) ou false |
| scrollWheelZoom | Déclenchement du zoom por la molette de la souris. Valeurs true (par défaut) ou false. |
Modes d'initialisation
- A l'initialisation =>
map = L.map('map',{..options..}).setView(loc.Paris, initZoom); avec par exemple les options suivantes {zoomControl:false,doubleClickZoom:"center"}
Personnaliser de nouveaux boutons de zoom
Les boutons de contrôle de zoom sont initialisés par défaut, mais on peut facilement ne plus faire apparaitre ces boutons, en créer de nouveaux, les supprimer, les déplacer.
Au départ les boutons de zoom c'est celà =>
Démarrer avec l'option zoomControl à false
Pour cela il faut déclarer l'option zoomControl à false lors de l'instanciation de la carte map = L.map('map', {maxZoom: x,minZoom: y,zoomControl: false)
Créer les boutons avec quelques options
On va utiler la classe L.control.zoom et ses options pour créer de nouveaux boutons de zoom sur la carte.
Style des boutons
On modifier les feuilles de style liées au zoom control
Positionnement des boutons
A partir de son identifiant de création on pourra positionner les boutons par la méthode setPosition("paramètre position");. Le paramètre position peut prendre les valeurs "topleft", "topright", "bottomleft" ou "bottomright" correspondant à chacun des coins de la carte.
Effacement
A partir de son identifiant de création on pourra supprimer les boutons par la méthode remove();.
Résultat
On obtient quelque chose comme celà, un peu plus engageant 
Open-source Leaflet : Block de recherche de localisation en fonction des adresses (demo 1).
Généralités
L'avantage de cette solution est que nous n'utilisons aucune API spécifique.
Pour cela nous allons utiliser Nominatim qui est un moteur de recherche pour les données Openstreetmap. On peut y rechercher un nom ou une adresse (recherche prospective) ou rechercher des données par ses coordonnées géographiques (recherche inverse).
Plusieurs modes de recherche avec leurs options associées sont possibles :
- /search - recherche par nom (adresse) ou type.
- /reverse - recherche par coordonnées géographiques.
- /lookup - rechercher les détails d’adresse pour les objets OSM par leur ID.
Pour plus de détails consultez le site : nominatim.org.
Nous utiliserons (via une connection XMLHttpRequest) le type de format d'URL suivant pour la conversion adresse vers coordonnées géographiques. Dans cet exemple ce sont les coordonnées d'une adresse à Montrouge (rue henri ginoux montrouge) qui sont demandées
https://nominatim.openstreetmap.org/search/?format=json&limit=2&q=avenue henri ginoux montrouge france
Comme paramètres passés par l'url on notera le format : on demande la réponse dans un fichier de type json ?
et limit : qui donne le nombre limite d'adresse à renvoyer à l'utilisateur. En effet si l'adresse est plus ou moins bien renseignée, le serveur renvoie dans le fichier plusieurs informations possibles.
et enfin q qui donne l'adresse elle même.
Données brutes reçues
Création du bouton de recherche
Le bouton se compose d'un champ d'entrée de l'adresse, d'un bouton d'activation de la recherche, d'une zone à cliquer de résultats disponibles.
|
|
On rajoute aussi quelques éléments de style liés à la liste de choix d'adresses proposées par le serveur : |
Interrogation du serveur (requête XMLHttpRequest) et exploitation des résultats.
Le mécanisme met en oeuvre 4 fonctions :
- UseControls pour la génération et l'affichage du block de recherche.
- addr_search qui interroge, et reçois les données du serveur.
- decodeRecherche pour décoder et afficher les choix disponibles.
- onClickResults pour afficher sur la carte le résultat final.
La séquence est la suivante:
Une fois le champ adresse complété, l'appui sur le bouton "Rechercher" active la fonction addr_search("adresse recherchée"); tel que défini dans la variable layoutRecherche. Cette fonction est classique d'une requête XMLHttpRequest que nous avons déjà vue dans une fiche précédente ( ICI ).
La réponse du serveur est récupérée dans le call back sous forme de données JSON que l'on parse pour obtenir une structure de tableau.
Une fois ces résultats obtenus ils sont stockés dans le tableau myArrBack qui va être décodé par la fonction decodeRecherche et affiché sous forme de liste dans la zône results (zône elle aussi préalablement définie dans la variable layoutRecherche).
A l'issue du choix de l'utilisateur la fonction onClickResults est appelée pour finalement générer un marker et ses informations sur le point de la carte recherché.
Open-source Leaflet : Marqueurs
leaflet a un intéressant contrôle qui permet aux utilisateurs de contrôler les couches qu’ils voient sur la carte. Comment l'utiliseret plus :
Il existe deux types de couches :
- Les couches de base qui sont mutuellement exclusives (une seule peut être visible sur votre carte à la fois) comme les tiles.
- Les superpositions, qui sont toutes les autres choses que vous mettez sur les couches de base.
