Maps prend en charge l'intégration de cartes dynamiques à l'aide de la bibliothèque Leaflet gratuite et open source .
Syntaxe de base
L'affichage des cartes se fait avec la fonction parser #display_map
- Exemple
{{#display_map:center=Cité de la mer, Cherbourg-en-Cotentin, France}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":49.6486412,"lon":-1.6171789,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
Personnalisation
Les cartes Leaflet peuvent être personnalisées à l'aide de divers paramètres.
- Exemple
{{#display_map:center=Saint-Lô
|width=400
|height=250
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"400px","height":"250px","centre":{"text":"","title":"","link":"","lat":49.1157004,"lon":-1.0906637,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
Voir : personnalisation des cartes Leaflet pour un aperçu complet des paramètres de personnalisation, y compris des exemples.
Affichage des données
Marqueurs
{{#display_map: Mont-Saint-Michel, France
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":48.6359541,"lon":-1.511459954959514,"icon":""}],"imageoverlays":null}
Vous pouvez afficher plusieurs emplacements en les séparant par des points-virgules. Et il est possible d'utiliser des coordonnées au lieu de noms de lieux.
- Exemple
{{#display_map: La Haye, Manche; Montpinchon; 48° 42' 46.02" N, 1° 0' 21.39" W
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":49.2895583,"lon":-1.5513039,"icon":""},{"text":"","title":"","link":"","lat":49.0222731,"lon":-1.3109641,"icon":""},{"text":"","title":"","link":"","lat":48.712783333333334,"lon":-1.0059416666666667,"icon":""}],"imageoverlays":null}
Vous pouvez personnaliser les marqueurs par emplacement. La syntaxe est :
Emplacement~Titre de la fenêtre contextuelle~Texte de la fenêtre contextuelle~Fichier:Icône personnalisée~Groupe~Étiquette en ligne~Fichier:Icône visité
- Emplacement : l'emplacement où afficher le marqueur. Les coordonnées et les adresses sont prises en charge
- Titre et Texte de la fenêtre contextuelle : contenu optionnel d'une popup affichée lors du clic sur le marqueur. Aucune fenêtre contextuelle ne s'affiche si les deux sont vides
- Fichier:icône par défaut : nom optionnel d'une image à afficher à la place du marqueur par défaut
- Groupe :
- Étiquette en ligne : étiquette facultative affichée à côté du marqueur. Actuellement affiché uniquement lors de l'utilisation de Google Maps
- Fichier:icône visité : nom optionnel d'une image à afficher comme marqueur lorsque le marqueur est cliqué
- Exemple
{{#display_map: Cherbourg~La ville de Cherbourg~Cherbourg est une très belle ville et il y a plein de choses à visiter~Mark WM.png; Saint-Lô~La ville de Saint-Lô~Saint-Lô est la préfecture de la Manche~Mark WM.png
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa ville de Cherbourg\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECherbourg est une tr\u00e8s belle ville et il y a plein de choses \u00e0 visiter\n\u003C/p\u003E\u003C/div\u003E","title":"La ville de Cherbourg\n","link":"","lat":49.6425343,"lon":-1.6249565,"icon":"/images/2/29/Mark_WM.png"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa ville de Saint-L\u00f4\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ESaint-L\u00f4 est la pr\u00e9fecture de la Manche\n\u003C/p\u003E\u003C/div\u003E","title":"La ville de Saint-L\u00f4\n","link":"","lat":49.1157004,"lon":-1.0906637,"icon":"/images/2/29/Mark_WM.png"}],"imageoverlays":null}
Lignes
Via le paramètre lines=, vous pouvez afficher des lignes sur la carte. Chaque ligne a au moins deux emplacements. Comme pour les marqueurs, vous pouvez spécifier un titre et un texte contextuels. Vous pouvez également spécifier l'apparence de la ligne. La syntaxe est :
Première adresse:deuxième adresse:troisième adresse facultative: etc.
~Titre de la popup~Texte de la popup~Couleur de la ligne~Opacité de la ligne~Épaisseur de la ligne
- Exemple
{{#display_map:lines=
Périers:Carentan:Lessay;
Cherbourg:Avranches~Ligne Cherbourg à Avranches~Je suis un texte~green~0.42~10
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":49.1870906,"lon":-1.4100219},{"lat":49.29476595,"lon":-1.252311940606591},{"lat":49.213284900000005,"lon":-1.5202954237981134}]},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELigne Cherbourg \u00e0 Avranches\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis un texte\n\u003C/p\u003E\u003C/div\u003E","title":"Ligne Cherbourg \u00e0 Avranches\n","link":"","strokeColor":"green","strokeOpacity":"0.42","strokeWeight":"10","pos":[{"lat":49.6425343,"lon":-1.6249565},{"lat":48.688247849999996,"lon":-1.3633854644553556}]}],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
Polygones
Via le paramètre polygons=, vous pouvez afficher des polygones sur la carte. Chaque polygone a au moins deux emplacements. Comme pour les marqueurs, vous pouvez spécifier un titre et un texte contextuels. Vous pouvez également spécifier l'apparence du polygone. La syntaxe est :
- Exemple
Première adresse:Deuxième adresse:Troisième adresse facultative
~Titre de la popup~Texte de la popup~Couleur de la bordure~Opacité de la bordure~Épaisseur de la bordure~Couleur de remplissage~Opacité de remplissage
~Afficher uniquement au survol
{{#display_map:polygons=
Saint-Lô:Granville:Villedieu-Rouffigny;
La Hague:Barfleur:Valognes~Je suis un titre~Je suis une description~green~0.7~10~blue~0.5
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":49.1157004,"lon":-1.0906637},{"lat":48.8376296,"lon":-1.5959177},{"lat":48.8038192,"lon":-1.2504934}],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis un titre\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis une description\n\u003C/p\u003E\u003C/div\u003E","title":"Je suis un titre\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","pos":[{"lat":49.65483205,"lon":-1.7991053325251822},{"lat":49.6706815,"lon":-1.2644272},{"lat":49.5089547,"lon":-1.4708174}],"onlyVisibleOnHover":false,"fillColor":"blue","fillOpacity":"0.5"}],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
Cercles
Via le paramètre circles=, vous pouvez afficher des cercles sur la carte. Chaque cercle a un centre et un diamètre. Vous pouvez spécifier le titre et le texte de la fenêtre contextuelle et l'apparence du cercle. La syntaxe est :
Adresse du centre:Diamètre~Titre de la popup~Texte de la popup~Couleur de la bordure~Opacité de la bordure~Épaisseur de la bordure~Couleur de remplissage~Opacité de remplissage
- Exemple
{{#display_map:circles=
EPR Flamanville, Manche:30000 ;
EPR Flamanville, Manche:500~Je suis un titre~Et je suis une description~green~0,7~10~blue~0,5
| zoom=9
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":-1.8814855779645892,"lat":49.5394465},"radius":30000},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis un titre\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EEt je suis une description\n\u003C/p\u003E\u003C/div\u003E","title":"Je suis un titre\n","link":"","strokeColor":"green","strokeOpacity":"0,7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0,5","centre":{"lon":-1.8814855779645892,"lat":49.5394465},"radius":500}],"rectangles":[],"copycoords":false,"static":false,"zoom":9,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
Rectangles
Via le paramètre rectangles=, vous pouvez afficher des rectangles sur la carte. Chaque rectangle a un emplacement Nord-Est et un emplacement Sud-Ouest. Vous pouvez spécifier le titre et le texte de la fenêtre contextuelle et l'apparence du rectangle. La syntaxe est :
Emplacement nord-est:Emplacement sud-ouest
~Titre de la popup~Texte de la popup~Couleur de la bordure~Opacité de la bordure~Épaisseur de la bordure~Couleur de remplissage~Opacité de remplissage
- Exemple
{{#display_map:rectangles=
Saint-Lô:Coutances;
Carentan:Avranches~Je suis un titre~Je suis une description~green~0.7~10~blue~0.5
}}
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","ne":{"lon":-1.0906637,"lat":49.1157004},"sw":{"lon":-1.4454857,"lat":49.047792}},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis un titre\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EJe suis une description\n\u003C/p\u003E\u003C/div\u003E","title":"Je suis un titre\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.5","ne":{"lon":-1.252311940606591,"lat":49.29476595},"sw":{"lon":-1.3633854644553556,"lat":48.688247849999996}}],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
GeoJSON
Depuis la version 5.6, Maps prend en charge l'affichage de GeoJSON via le paramètre geojson=. Voir Fichiers Leaflet GeoJSON.
Syntaxe alternative
Lorsque vous avez de nombreux marqueurs personnalisés, l'utilisation de la fonction d'analyseur #display_map peut devenir difficile à manier. Pour cette raison, vous pouvez également utiliser la balise <display_map>. Elle a tous les mêmes paramètres que la fonction d'analyseur, la seule différence est la syntaxe. Chaque emplacement possède sa propre ligne et ils n'ont pas besoin d'être séparés par un point-virgule.
- Exemple
<display_map>
Bricquebec~La ville de Bricquebec~Bricquebec a un vieux château médiéval~~~Bricquebec
Montsurvent~La commune de Montsurvent~A voir, le moulin à vent de Monsurvent~~~Montsurvent
Folligny~La commune de Folligny~~~~Folligny
</display_map>
Chargement de la carte...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa ville de Bricquebec\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EBricquebec a un vieux ch\u00e2teau m\u00e9di\u00e9val\n\u003C/p\u003E\u003C/div\u003E","title":"La ville de Bricquebec\n","link":"","lat":49.4717312,"lon":-1.6321305,"icon":"","inlineLabel":"Bricquebec\n"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa commune de Montsurvent\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EA voir, le moulin \u00e0 vent de Monsurvent\n\u003C/p\u003E\u003C/div\u003E","title":"La commune de Montsurvent\n","link":"","lat":49.1146769,"lon":-1.4990416,"icon":"","inlineLabel":"Montsurvent\n"},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa commune de Folligny\n\u003C/p\u003E\u003C/div\u003E","title":"La commune de Folligny\n","link":"","lat":48.8244308,"lon":-1.410211,"icon":"","inlineLabel":"Folligny\n"}],"imageoverlays":null}