OSM

 

OSM permet l’affichage dans une page ou un article d’une carte avec éventuellement des traces et des marqueurs, qui peuvent être des symbols, des photos etc… (voir en anglais les infos sur http://wiki.openstreetmap.org/wiki/Wp-osm-plugin). OSM permet également de géolocaliser des pages/articles et d’en afficher une carte.

L’ajout d’une carte se fait par l’intermédiaire de shortcode (commande entre crochets) avec des paramètres, lorsqu’on rédige ou qu’on modifie un article ou une page. On peut écrire ou modifier manuellement la commande, on peut beaucoup plus facilement utiliser un assistant se trouvant dans Tableau de bord/réglages/OSM, qui permet de générer cette commande selon ce qu’on veut obtenir. Mais il est souvent utile de retoucher le résultat, aussi voyons comment se présente le code à insérer dans l’article; par exemple ci-dessous le code à placer entre crochets[]:

osm_map lat="46.942" long="3.075" zoom="5" width="600" height="450" control="scaleline,mouseposition" theme="ol" type="Mapnik"

On voit qu’outre la commande d’insertion osm_map, on trouve les paramètres lat, long pour latitude et longitude, width et height pour les dimensions de la carte (attention, rester compatibles avec l’affichage des pages), control pour les options d’affichage d’échelle et de position en lat/long de la souris, la présentation (thème) et le type de carte (Osmarender, Mapnik, CycleMap, GoogleStreet, GooglePhysical, GoogleSatellite, GoogleHybrid, All, AllOsm, AllGoogle, Ext, All) . Si le type de carte est mis à All, le sélecteur de type est activé à l’affichage (Ext correspond au chargement d’une carte externe, qu’on n’abordera pas ici). On peut également choisir d’afficher une bordure de carte: map_border= »medium solid blue » par exemple.

Pour ajouter des traces GPS (ce peut-être aussi une délimitation de zone) à partir d’un fichier gpx, il faut:

  1. Obtenir un fichier gpx représentant une collection de points; ce fichier peut être généré par un récepteur GPS et transférer sur un poste de travail, éventuellement convertit en format gpx si le format natif du GPS n’est pas gpx. On peut aussi fabriquer son fichier grâce à des utilitaires comme ITN Converter, qui permet de convertir des fichiers de points ou d’en créer. Si on veut créer une zone il suffira de confondre les points d’arrivée et de départ pour obtenir une zone fermée.
  2. ajouter le/les fichiers gpx au moyen de la gestion des médias standard de WP (OSM permet d’uploader sur le serveur les fichiers gpx, ce que WP n’autorise pas normalement), et copier son/leurs adresse(s)
  3. ajouter le paramètre gpx_file= »adresse du fichier gpx » ou gpx_file_list= »adr1,adr2,adr3… ». On peut/doit préciser la/les couleur(s) au moyen des paramètres gpx_colour ou gpx_colour_list.

Exemple d’une carte avec un fichier gpx définissant une zone: le code est:

osm_map lat="43.810" long="6.860" zoom="9" width="500" height="350" control="scaleline,mouseposition" gpx_file="http://monquartier.adecouvrir.info/wp-content/blogs.dir/1/files/2012/11/test_zone.gpx" theme="ol" type="Mapnik"


Exemple d’une carte plus petite, un zoom non entier (9.5) avec deux zones: le code est:

osm_map lat="43.830" long="6.760" zoom="9.5" width="400" height="300" control="scaleline,mouseposition" gpx_file_list="http://monquartier.adecouvrir.info/wp-content/blogs.dir/1/files/2012/11/test_zone.gpx,http://monquartier.adecouvrir.info/wp-content/blogs.dir/1/files/2012/11/test_zone2.gpx" gpx_colour_list="blue,#ff2020" theme="ol" type="Mapnik"

L’ajout de marqueurs sur une carte est certainement une des possibilités les plus riches d’OSM, bien que plus complexe à utiliser et présentant un risque sécuritaire pour le site non négligeable: en effet il s’agit d’uploader sur celui-ci des fichiers textes (extension .txt) contenant du code HTML qui sera directement transmis au navigateur. Ce type de fichiers étant reconnus « dangereux », WP ne permet pas leur téléchargement par les utilisateurs en tant que fichiers multimédia. Il faudrait donc utiliser FTP pour les  mettre en ligne, et il est donc conseillé de réserver cette possibilité à des personnes de confiance, et de soigneusement vérifier le contenu des fichiers avant de les utiliser. Mais il est facile de contourner cette sécurité (hélas ou tant mieux) en renommant ces fichiers en .gpx, que OSM permet de charger comme média. Ceci étant dit le format de ces fichiers est donné dans l’exemple suivant, sachant que la séparation entre champ est une tabulation (ces fichiers peuvent être obtenus à partir d’un classeur excel ou openoffice en exportant au format csv, avec tab comme séparateur, en incluant les titres des colonnes comme indiqué ci-dessous); attention c’est très trompeurs, car il est difficile de voir dans le fichier si on a des espaces ou des tabulations:

lat	lon	title	description	icon	iconSize	iconOffset
37.566535	126.9779692	Seoul Start	capital of Korea.	http://www.MyDomain.at/wp-content/uploads/MyIcon.png	20,20	0,-20
35.1795543	129.0756416	Busan End	Harbour.	http://www.MyDomain.at/wp-content/uploads/MyIcon.png	20,20	0,-20

On voit qu’outre la latitude et la longitude du lieu, on a le titre (obligatoire) et une description (qui peut être du code html), ainsi que l’url (adresse) de l’image du marqueur à afficher, ainsi que pour ce marqueur, sa taille et le décalage par rapport à la position du point (voir plus loin). En reprenant les arguments un par un:

  1. lat: latitude en degré et décimales du degré
  2. lon: idem pour longitude
  3. title: titre qui s’affiche dans la fenêtre s’ouvrant quand on clique sur le marqueur (accents à mettre en standard html -> é= é etc.
  4. description: description qui s’affiche sous le titre du marqueur quand on clique sur le marqueur; cela peut-être du texte simple (idem que titre pour les accents) ou du html:
    • texte simple
    • <img src= »url » /> affiche l’image dont l’adresse est url
    • <a href= »cible »>texte</a> affiche un texte qui sera un lien vers la page « cible »
    • <a href= »cible »><img src= »url »></a> affiche l’image dont l’adresse est url comme un lien vers la page cible.
    • on peut imaginer des combinaisons, compléments etc…
  5. icon: url de l’icône que l’on veut afficher comme marqueur: ce peut-être un dessin ou une photo (jpg, png, autre ?)
  6. iconSize: taille de l’icone/image en pixels (x,y)
  7. iconOffset: décalage (x,y) de l’icône par rapport à la position du point: par défaut, l’icône sera placée telle que le point repéré par lat/long soit le point en haut à gauche de l’icône. Si on veut positionner l’icône ainsi, on mettra 0,0, sinon un décalage non nul. Par exemple, si l’icône a une taille de 24×24 pixels et représente une flèche pointant vers le point repéré, flèche qui se termine dans le coin en bas à droite de l’icône, on mettra comme décalage: -24,-24. Pour une flèche terminant en bas à gauche 0,-24; si l’icône est une image de 100×100 et qu’on veut centrer l’image sur le point repéré, on mettra -50,-50, etc….

Exemple de marqueurs: pour illustrer la possibilité d’utiliser les marqueurs, on va donner un exemple en détaillant pas à pas les différentes étapes: nous allons créer une carte, sur laquelle on va positionner différents marqueurs, selon les exemples indiqués plus haut:

  • on va commencer à charger sur le site les images des marqueurs (s’ils ne sont pas déjà sur le site): pour cela, on va utiliser le menu « Médias/ajouter de WP ». On va sélectionner sur le poste de travail les fichiers des marqueurs à transmettre, et on va les glisser/déposer dans le cadre (vous remarquerez qu’il est indiqué que OSM à ajouté les fichiers GPX aux fichiers téléchargeables), les fichiers seront alors « uploadés » sur le serveur
  • Avant d’enregistrer, il faut copier les adresses et les tailles de chaque marqueur ajouté, puisqu’on veut les utiliser de suite; on disposera ainsi de l’URL  et de la taille du marqueur à indiquer dans notre fichier destiné à positionner les marqueurs sur la carte.ajout de médias
  • dans cet exemple on utilisera 4 des 5 marqueurs suivants:
    • 24×24, url: http://monquartier.adecouvrir.info/files/2012/11/wpttemp-green.png
    • 24×24, url: http://monquartier.adecouvrir.info/files/2012/11/wpttemp-red.png
    • 26×32 url: http://monquartier.adecouvrir.info/files/2012/11/bus.png
    •   200×150 url: http://monquartier.adecouvrir.info/files/2012/11/eolien.png
    •   200×267 url: http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r.jpg

Notons que la taille des marqueurs est très différentes, et que les petits marqueurs rouge et verts ont une pointe qui devra indiquer précisément la position du lieu marqué: on indiquera donc les offset en conséquence.  L’arrêt de bus sera positionné au milieu du bas de l’image, et la fleur sera positionnée tels que le point marqué sera centré sous l’image. Comme positions, nous prendrons comme exemple les points définis par le tracé bleus des cartes précédentes, qui définit 4 points:

  1. lat="43.828149" lon="6.834269"
  2. lat="43.833041" lon="6.872807"
  3. lat="43.805544" lon="6.894779"
  4. lat="43.791358" lon="6.832895"

Notre fichier de marqueurs, en commençant par mettre des libellés simples, sera donc (chaque zone séparée par une tabulation):

lat lon title description icon iconSize iconOffset
43.828149    6.834269    1er marqueur    marqueur vert    http://monquartier.adecouvrir.info/files/2012/11/wpttemp-green.png 24,24 0,-24
43.833041    6.872807    2eme marqueur    marqueur rouge    http://monquartier.adecouvrir.info/files/2012/11/wpttemp-red.png  24,24 0,-24  
43.805544    6.894779    3ieme marqueur    bus    http://monquartier.adecouvrir.info/files/2012/11/bus.png 26,32 13,-32
43.791358    6.832895    4ieme marqueur    fleur    http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r.jpg 200,267 100,-133

On va nommer ce fichier test_marqueurs.txt et le transférer via FTP (ou .gpx et le gérer avec la bibliothèque média) sur le site, par exemple dans le même répertoire que les marqueurs, de sorte que son URL sera:

http://monquartier.adecouvrir.info/files/2012/11/test_marqueurs.txt

On y est presque! Il suffit maintenant d’ajouter dans l’article ou la page le code (en reprenant la carte précédente, et en ajoutant le paramètre marker_file), et toujours entre crochets carrés []:

osm_map lat="43.810" long="6.860" zoom="12" width="600" height="400" control="scaleline,mouseposition" marker_file="http://monquartier.adecouvrir.info/files/2012/11/test_marqueurs.txt" gpx_file="http://monquartier.adecouvrir.info/2012/11/test_zone.gpx" theme="ol" type="Mapnik"

On voit que l’image de la fleur est beaucoup trop grande: on va mettre une miniature comme marqueur et afficher cette même miniature dans le pop up quand on cliquera sur le marqueur, et l’image d’origine (200×267) quand on cliquera sur la miniature du pop-up . En ce qui concerne le bus, on va mettre dans la fenêtre un lien vers le site des bus (http://www.envibus.fr). On va charger la miniature de la même façon que précédemment, sa taille sera 50×67, son url http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r2. Le fichier des marqueurs ( test2_marqueurs.txt) deviendra (aux affichages erronés près des < et > etc:

lat    lon    title    description    icon    iconSize    iconOffset
43.828149    6.834269    1er marqueur    marqueur vert    http://monquartier.adecouvrir.info/files/2012/11/wpttemp-green.png    24,24    0,-24
43.833041    6.872807    2eme marqueur    marqueur rouge    http://monquartier.adecouvrir.info/files/2012/11/wpttemp-red.png    24,24    0,-24  
43.805544    6.894779    3ieme marqueur    <a href="http://www.envibus.fr">Site des bus</a>    http://monquartier.adecouvrir.info/files/2012/11/bus.png    26,32    -13,-32
43.791358    6.832895    4i&egrave;me marqueur    fleur<br /><a href="http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r.jpg"><img src="http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r2.jpg"/></a> http://monquartier.adecouvrir.info/files/2012/11/080303-manoa_falls_lyon_arboretum_aihualama_falls_031_r2.jpg 50,67 -25,-33

Le même code que précédemment ( en modifiant juste le nom du fichier des marqueurs) affichera maintenant:



Enregistrer


Enregistrer


			

	

			




						

	
	
	
		

		
Laisser un commentaire
Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *