Carte MultiMaps

Affichage de cartes
Carte OpenStreetMap
Page	Carte Multimaps
Objet	Pour afficher des cartes zoomables avec repères
Catégorie	Aide
Création	31/03/2018
Langage	wiki
Références
Rédaction	R. Birot
Correction	I. Birot
Langue	FR
Information	Extension
Facebook	cliquez ICI

MultiMaps

MultiMaps est une extension de MediaWiki qui permet d'afficher des cartes "responsives" (qui s'adaptent à la taille de l'écran) et zoomables venant de différents fournisseurs (Google, OpenStreetmap...). Des marqueurs de lieu peuvent être ajoutés à partir des coordonnées GPS en décimal. Seul le marqueur bleu est implicite. Les autres marqueurs ont été créés en tant qu'images. Des figures géométriques permettent de griser des zones sur la carte.
Le paramétrage complet de cette extension est ICI

Exemple d'une carte avec des marqueurs de couleurs

1. Le code de paramétrage
   

{{#MultiMaps:  48.073172, -1.825375 ~ La Haichois ~Château~; 
48.069722, -1.856944 ~ La Haute Forêt ~Château~; 
48.081046, -1.809096 ~ Beaumont ~Château~; 
48.080354, -1.886894 ~ Artois ~Château~; 
48.092227, -1.844312 ~ Ville du Bois ~Château~; 
48.079018, -1.849568 ~ La Chesnaye ~Château~;
48.071679, -1.849645 ~Eglise ~Mordelles~ Purple_marker.png;
48.071536, -1.853796 ~Le Pressoir ~Manoir~ Green_marker.png;
48.081773, -1.866505 ~La Péronnais ~Manoir~ Green_marker.png;
48.088679, -1.897476 ~ La Saudrais ~Manoir~ Green_marker.png;
48.087992, -1.825794 ~ La Haye ~Manoir~ Green_marker.png
| height=600px
| width= 600px}}

NB : La carte est par défaut "OpenStreetmap" en pleine largeur, la hauteur a été fixée à 600px, le marqueur bleu est implicite., il faut donner un nom entre ~ ~ devant chaque marquer de couleur.

1. Le résultat

• Les châteaux ont un marqueur bleu
• Les manoirs ont un marqueur vert
• L'église a un marqueur violet

NB : le nom du bâtiment apparait en passant la souris sur le marqueur

Chargement de la carte…

{"markers":[{"pos":[{"lat":48.073172,"lon":-1.825375}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa Haichois\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.069722,"lon":-1.856944}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa Haute For\u00eat\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.081046,"lon":-1.809096}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EBeaumont\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.080354,"lon":-1.886894}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EArtois\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.092227,"lon":-1.844312}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EVille du Bois\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.079018,"lon":-1.849568}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa Chesnaye\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ECh\u00e2teau\n\u003C/p\u003E\u003C/div\u003E"},{"pos":[{"lat":48.071679,"lon":-1.849645}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EEglise\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EMordelles\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/1/16/Purple_marker.png"},{"pos":[{"lat":48.071536,"lon":-1.853796}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELe Pressoir\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EManoir\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/c/ce/Green_marker.png"},{"pos":[{"lat":48.081773,"lon":-1.866505}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa P\u00e9ronnais\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EManoir\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/c/ce/Green_marker.png"},{"pos":[{"lat":48.088679,"lon":-1.897476}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa Saudrais\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EManoir\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/c/ce/Green_marker.png"},{"pos":[{"lat":48.087992,"lon":-1.825794}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ELa Haye\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EManoir\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/c/ce/Green_marker.png"}],"bounds":{"ne":{"lat":48.092227,"lon":-1.809096},"sw":{"lat":48.069722,"lon":-1.897476}}}

Exemple d'une carte et d'une photo

Pour avoir la carte sur la même "ligne" que la photo du lieu, il faut écrire le code de la façon suivante :

[[Fichier:gimsao 010.jpg|x300px|gauche]] {{#MultiMaps: 48.068792, -1.828877 ~ SIERA ~GIMSAO~ Purple_marker.png| height=300px}}<br>

ce qui donne le résultat ci-dessous :

Chargement de la carte…

{"markers":[{"pos":[{"lat":48.068792,"lon":-1.828877}],"title":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ESIERA\n\u003C/p\u003E\u003C/div\u003E","text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EGIMSAO\n\u003C/p\u003E\u003C/div\u003E","icon":"/images/1/16/Purple_marker.png"}],"zoom":14,"center":{"lat":48.068792,"lon":-1.828877}}

Notes et références

{{#seo: |title=RB Realisations |titlemode=append |keywords=wiki, mediawiki, wikipedia, programmation, rb-realisations, Rene Birot realisations, construction wiki, sites internet, wordpress, dotclear, lmsoft, word creator, cms, blog |description=Site de mise au point de wiki construit avec MediaWiki

}}