Utilisateur:Momo50/Extension Maps/Affichage des cartes Leaflet

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}

Multiples points

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.6862085,"lon":-1.3579476}]}],"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.3579476,"lat":48.6862085}}],"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}

Paramètres pris en charge pour Leaflet

⧼validator-describe-header-parameter⧽	⧼validator-describe-header-type⧽	⧼validator-describe-header-default⧽	⧼validator-describe-header-description⧽
zoom	⧼validator-type-integer⧽	no	Le niveau de zoom de la carte. Pour les cartes avec marqueurs, ceci positionne la valeur par défaut du plus grand zoom qui permet encore de montrer tous les marqueurs.
width	⧼validator-type-dimension⧽	auto	Permet de définir la largeur de la carte. Par défaut les pixels seront considérés comme unité, mais vous pouvez spécifier explicitement une de ces unités : px, ex, em, %.
height	⧼validator-type-dimension⧽	350	Permet de définir la hauteur de la carte. Par défaut les pixels seront considérés comme unité, mais vous pouvez spécifier explicitement une de ces unités : px, ex, em.
centre	⧼validator-type-string⧽	no	Le lieu sur lequel la carte devra être centrée
title	⧼validator-type-string⧽	⧼validator-describe-empty⧽	Permet de définir le texte qui sera affiché dans les bulles contextuelles de tous les marqueurs qui ne disposent pas d’un titre spécifique. Lorsqu’il est utilisé avec le libellé, le titre sera en gras et souligné.
label	⧼validator-type-string⧽	⧼validator-describe-empty⧽	Permet de définir le texte qui sera affiché dans les bulles contextuelles de tous les marqueurs qui n’ont pas de libellé spécifique.
icon	⧼validator-type-string⧽	⧼validator-describe-empty⧽	Permet de définir l’icône utilisée pour tous les marqueurs.
lines	Liste de lignes	⧼validator-describe-empty⧽	Lignes à afficher
polygons	Liste des polygones géographiques	⧼validator-describe-empty⧽	Polygones à afficher
circles	Liste de cercles	⧼validator-describe-empty⧽	Cercles à afficher
rectangles	Liste de rectangles	⧼validator-describe-empty⧽	Rectangles à afficher
maxzoom	⧼validator-type-integer⧽	no	Le niveau maximal d’agrandissement
minzoom	⧼validator-type-integer⧽	no	Le niveau minimal d’agrandissement
copycoords	⧼validator-type-boolean⧽	no	Afficher une boîte de dialogue lors du clic sur un marqueur, depuis lequel ses coordonnées peuvent être copiées.
static	⧼validator-type-boolean⧽	no	Rendre la carte statique
defzoom	⧼validator-type-integer⧽	14	Permet de définir le niveau de zoom par défaut de la carte.
layers	⧼validator-type-string-list⧽	OpenStreetMap	Les couches qui seront disponibles dans le sélecteur de couche. La première est celle qui sera affichée pendant le chargement de la carte.
image layers	⧼validator-type-string-list⧽	⧼validator-describe-empty⧽	Couches de base de l’image. La première couche sera affichée par défaut. Si des images sont spécifiées, elles seront utilisées à la place des couches de carte habituelle.
overlays	⧼validator-type-string-list⧽	⧼validator-describe-empty⧽	Les surcouches qui seront affichées pendant que la carte se charge.
resizable	⧼validator-type-boolean⧽	no	Rendre la carte redimensionnable en faisant glisser son coin inférieur droit.
fullscreen	⧼validator-type-boolean⧽	no	Activer le bouton du mode plein écran
scrollwheelzoom	⧼validator-type-boolean⧽	yes	Indique si le défilement à la souris doit être ou non activé.
cluster	⧼validator-type-boolean⧽	no	Autoriser la fusion de plusieurs repères à proximité en un seul repère
clustermaxzoom	⧼validator-type-integer⧽	20	Niveau maximal de zoom pour lequel des agrégats peuvent exister.
clusterzoomonclick	⧼validator-type-boolean⧽	yes	Si le comportement lorsqu’on clique sur un agrégat est par défaut de zoomer dessus.
clustermaxradius	⧼validator-type-integer⧽	80	Le rayon maximal qu’un agrégat couvrira.
clusterspiderfy	⧼validator-type-boolean⧽	yes	Lorsque vous cliquez sur un agrégat à bas niveau de zoom nous l’explicitons afin que vous puissiez voir l’ensemble de ses marqueurs.
geojson	⧼validator-type-string⧽	⧼validator-describe-empty⧽	URL de fichier ou nom de page contenant des données GeoJSON
clicktarget	⧼validator-type-string⧽	⧼validator-describe-empty⧽	En cliquant sur la carte, vous serez redirigé vers cet URL. %lat% est remplacé par la latitude et %long% par la longitude.