osmap ~ affiche une carte OpenStreetMap

Une alternative "libre" à GoogleMap.

La version simple

{up osmap=48.85824100218225, 2.2945744843627836}

La carte est affichée dans un bloc de 100% de large et 250px de haut. Un marqueur est affiché au centre de la carte, c'est le cas le plus courant pour un point unique.

L'argument principal du shortcode est le couple latitude/longitude séparé par une virgule.

Les coordonnées peuvent être récupérées sur cette page : coordonnees-gps.fr

1. saisir l'adresse
2. copier le couple latitude/longitude comme argument du shortcode UP

Avec popup et marqueur personnalisés

{up osmap=48.85824100218225, 2.2945744843627836 
  | popup-text=ici, c'est la tour Eiffel
  | marker-image=images/osmap/marker-tour-eiffel.png
  | class=ombreMax
  | scale=0
}

{up osmap=48.85824100218225, 2.2945744843627836 
  | zoom=17
  | height=400
  | popup-text=[img style='float:left' src="/images/osmap/tour-eiffel.png"][h4]Tour Eiffel[/h4]Champ-de-Mars, Paris - France
  | popup-clic=0
  | marker-image=images/osmap/marker-hg-icon.png
  | marker-options=iconSize:[60,63],iconAnchor:[0,0],popupAnchor:[0,0]
  | scale=2
}

Gestion position et ombre portée d'un marqueur personnalisé

Pour utiliser un autre marqueur, il suffit d'indiquer le chemin et nom du fichier comme argument du paramètre marker-image.

Si le point de référence se trouve au milieu-bas de l'image vous n'avez rien d'autre à faire.
UP calcule automatiquement la position du point de référence comme étant situé au milieu-bas du marqueur. (le point vert sur le schéma ci-contre)
Sinon, il faut les spécifier à l'aide du paramétre marker-options.

Une ombre portée sera automatiquement ajoutée si le fichier marker se termine par -icon et qu'un fichier de même nom se terminant par -shadow existe dans le même chemin. (exemple : marker-hg-icon.png & marker-hg-shadow.png). Les images sont alignées par leurs centre-bas. (voir schéma ci-contre)

Par défaut, la flèche du popup (située au centre-bas) pointe sur le milieu-haut du marqueur.

Il est possible de spécifier toutes les valeurs désirées avec le paramètre 'marker-options', voir la documentation leaflet

Les valeurs les plus utilisées pour marker-options sont :

marker-options=iconSize:[60,63],iconAnchor:[0,0],shadowSize:[62,62],shadowAnchor:[0,0],popupAnchor:[0,0]

• iconSize:[x,y] = dimension image marker en pixels
• iconAnchor:[x,y] = décalage du point haut-gauche de l'image marker par rapport au point de référence
• shadowSize:[x,y] = dimension image ombre portée en pixels
• shadowAnchor:[x,y] = décalage du point haut-gauche de l'image ombre portée par rapport au point de référence
• popupAnchor:[x,y] = décalage de l'extrémité de la flèche bas-centre du popup par rapport au point de référence

Affichage d'une échelle

Le paramètre scale contrôle l'affichage d'une échelle en bas-gauche. 0:aucune, 1:métrique (défaut), 2:impériale, 3: métrique et impériale.

Style des cartes

Un des gros atouts d'OpenStreetMap est la possibilité d'utiliser des tuiles pour personnaliser ses cartes.

Pour éviter de surcharger la page en demandant trop de requêtes aux serveurs d'OSM, les cartes de cette sections sont remplacées par des images. Tous les modèles
Attention : certaines tuiles peuvent ne plus être maintenues par leur créateur.

Un exemple en indiquant un des modèles fourni avec l'action UP.

{up osmap=48.85824100218225, 2.2945744843627836 
  | tile=stamen-toner }

Un autre des modèles. Voir tous les modèles sur cette page.

{up osmap=48.85824100218225, 2.2945744843627836 
  | tile=osm-mapnik-bw}

Il est possible d'indiquer l'url et les options directement avec tile-url & tile-options.

{up osmap=48.40236, 2.6982 
| tile-url=https://stamen-tiles-[s].a.ssl.fastly.net/watercolor/[z]/[x]/[y].png
|tile-options=minZoom:10, maxZoom:16
}

Attention: remplacer les accolades dans l'url par des crochets!

Suggestion de sites pour trouver des tiles

• https://fibre.wiki/index.php/Tuiles#OpenSnowMap
• https://www.creazo.fr/listing-des-fonds-de-cartes-dopen-street-map (licence nécessaire)
• https://osmlab.github.io/editor-layer-index

Saisie d'une clé de licence

Pour certaines cartes, il est demandé de fournir une clé. Celle pour Mapbox est à récupérer ici : https://www.mapbox.com/account
Note: un problème de clé se traduit par une carte grise uniforme

Ensuite, il suffit de mettre cette clé dans le champ 'Préférences actions' des paramètres du plugin UP.
Chaque préférence doit être sur une ligne sous la forme 'mapbox-key=123456789'. La syntaxe reconnue par UP pour les clés est 'service-key=valeur de la clé'

C'est tout ! sauf si vous utilisez des tuiles d'un autre fournisseur. Dans ce cas, utilisez un des fichiers tiles/mapbox-xxx.json comme modèle.

Markers et popup supplémentaires

Il est possible de mettre plusieurs marqueurs sur une carte.

{up osmap=48.865, 2.30 | marker-image=images/osmap/marker-red-icon.png}
	{marker=48.8709, 2.33223 | popup-text=[b]Opéra de Paris[/b][br]Place de l'Opéra}
	{marker=48.85824100218225, 2.2945744843627836 | popup-text=[b]Tour Eiffel[/b][br]Champ de Mars
	   | marker-image=images/osmap/marker-tour-eiffel.png }
	{marker=48.86044, 2.3526 | popup-text=[b]Beaubourg[/b][br]Centre national[br]d'art et de culture[br]Georges-Pompidou
	   | popup-clic=0}
	{marker=48.853102903462656, 2.3691776499999833 | popup-text=[b]Bastille[/b][br]Place de la Bastille}
	{marker=48.86208752759202, 2.3185802559585227 | popup-text=[b]Assemblée Nationale[/b] 
	  | marker-image=images/osmap/marker-hg-icon.png
	  | marker-options=iconSize:[60,63],iconAnchor:[0,0],popupAnchor:[0,0]}
	{marker=48.857767710892105, 2.2336937050552024 | popup-text=[b]Hippodrome de Longchamp[/b]}
{/up osmap}

Le shortcode principal

Il sert à définir la carte qui sera utilisée. Les coordonnées sont uniquement celles du centre de la carte et non celles d'un marqueur. Il n'est pas nécessaire de le spécifier par marker=0.

Si une image est indiquée dans le shortcode principal par marker-image, elle sera utilisée comme défaut pour tous les marqueurs.

Les shortcodes pour les marqueurs

Chaque point doit être indiqué par un shortcode interne qui commence par marker avec comme argument les coordonnées (latitude/longitude).
Les paramètres marker et popup permettent de définir le point.

• popup-text : le texte du popup
• popup-clic : 0 pour afficher le popup à l'initialisation. Attention : c'est uniquement le dernier marqueur déclaré avec popup-clic=0 qui sera ouvert.
• marker-image : fichier pour personnaliser le marqueur
• marker-options : pour surcharger le calcul automatique des positions

Un lien vers Google Map

Pour bénéficier de StreetView et des options d'itinéraire, il peut être judicieux de proposer un lien vers une carte google.

Il suffit d'indiquer avec le paramètre gmap le texte pour le lien qui affichera une carte avec les coordonnées et zoom actuels.
Pour une configuration plus fine de la page GMAP, vous pouvez indiquer son adresse avec le paramètre gmap-url.

{up osmap=48.85824100218225, 2.2945744843627836 
  | tile=stamen-toner 
   | popup-text=ici, c'est la tour Eiffel
  | marker-image=images/osmap/marker-tour-eiffel.png
  | class=ombreMax
  | gmap=voir la carte avec GMAP
}

{up osmap=48.85824100218225, 2.2945744843627836 
  | tile=stamen-toner 
  | popup-text=ici, c'est la tour Eiffel
  | marker-image=images/osmap/marker-tour-eiffel.png
  | class=ombreMax
  | gmap=voir la carte avec GMAP
  | gmap-url=https://www.google.fr/maps/place/Tour+Eiffel/@48.8583736,2.2922926,17z/data=!3m1!4b1!4m5!3m4!1s0x47e66e2964e34e2d:0x8ddca9ee380ef7e0!8m2!3d48.8583701!4d2.2944813
}

Note: le paramètre tile=osm-mapnik-bw permet d'afficher la carte en noir et blanc

Une sélection d'options

Les paramètres map-options, tile-options et marker-options permettent d'utiliser certaines des options proposées par Leaflet.

Pour les utiliser, il suffit de mettre le paramètre concerné avec comme argument la liste des options-valeurs séparées par une virgule.
Exemple : map-options=attributionControl:0, zoomControl:0

Ci-dessous, quelques-unes des plus utiles. La valeur indiquée est celle par défaut.

• afficher les crédits sur la carte : map-options=attributionControl:1
• boutons +- pour le zoom : zoomControl:1
• niveau mix-max pour le zoom : minZoom:1, maxZoom:20
• autoriser le zoom avec la roulette souris : scrollWheelZoom:1
• navigation avec les flèches et zoom par +- : keyboard:1
• zoom par double-clic sur la carte. (+maj = dezoom) doubleClickZoom:1
• zoomer sur une zone définie à la souris en maintenant la touche Maj : boxZoom:1
• limiter la zone de navigation : maxBounds:coords rectangle autorisé pour déplacement