osmap ~ affiche une carte OpenStreetMap

Une alternative "libre" à GoogleMap.

➠ osmap : OSMAP - affiche une carte OpenStreetMap

Cliquer pour lire la documentation

syntaxe {up osmap=latitude, longitude}
La latitude/longitude peut être connue sur le site : http://getlatlon.yohman.com/
Les tuiles disponibles sont ici : https://wiki.openstreetmap.org/wiki/Tile_servers
TODO : modal : https://stackoverflow.com/questions/49305901/leaflet-and-mapbox-in-modal-not-displaying-properly
author LOMART version 1.0 license GNU/GPLv3 credit script de Leaflet
  • osmap: latitude, longitude du centre de la carte (a récupérer sur http://getlatlon.yohman.com)
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • zoom=13: niveau de zoom de la carte
  • height (h,hauteur)=250: hauteur du boc carte. La largeur est 100% du parent
  • tile: nom de la tuile
  • tile-options: niveau de zoom maximum, ...
  • tile-url: url de la tuile
  • map-options: liste des options pour la carte. ex: zoomControl:1, keyboard:0
  • marker=1: affiche un marker au centre de la carte
  • marker-image: 0: aucun ou chemin image pin
  • marker-options: chaine des options du marqueur. voir https://leafletjs.com/reference-1.3.0.html#icon
  • popup-clic=1: 0: permanent ou 1: sur clic (si texte)
  • popup-text: texte du popup en bbcode. Si vide, pas de popup
  • scale=1: affiche l'échelle. 0:sans, 1:métrique, 2:impérial, 3:métrique&impérial
  • gmap (googlemap): texte du lien affiché au-dessous de la carte pour afficher la carte sous GMap
  • gmap-url: optionnel.Permet d'afficher un marqueur

    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 : getlatlon.yohman.com

    1. saisir l'adresse
    2. ajuster la position du marqueur avec votre souris
    3. copier le couple latitude/longitude comme argument du shortcode UP

    Vous pouvez aussi utiliser le site : coordonnees-gps.fr.

    récupération coordonnées avec getlatlon.yohman.com

    Avec popup et marqueur personnalisés

    Sauf paramètre marker=0, un marqueur bleu est affiché au centre de la carte.
    Pour utiliser une autre image, il suffit de mettre son chemin comme argument du paramètre marker-image.

    Le marqueur standard (bleu) est remplacé par une image personnalisée.
    Par défaut, il faut cliquer sur le marqueur pour afficher le popup.

    Les paramètres class et style sont disponibles. Ici, class ajoute une ombre.

    {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
    }

    Pour cet exemple la hauteur (height) de la carte est définie à 300px avec un zoom de 17 au lieu de 13 par défaut.

    Le popup est ouvert avec popup-clic=0. Son texte (popup-text) est en HTML où les balises sont entourées par des crochets [ ].

    Le point de référence (en haut à gauche) du marqueur est spécifié avec le paramètre marker-option .

    {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é

    schema explicatif positions point, marqueur et ombre

    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

    osm-mapnik-bw

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

    {up osmap=48.85824100218225, 2.2945744843627836 
      | tile=osm-mapnik-bw}
    mapbox.streets-satellite

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

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

    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!

    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.

    La version simple

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

    La version avec l'URL

    voir la carte avec GMAP
    {up osmap=48.85824100218225, 2.2945744843627836 
      | tile=osm-mapnik-bw
      | 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