Outils pour utilisateurs

Outils du site


doc:openlayersmap

openlayersmap

Si vous utilisez dokuwiki et que vous désirez afficher une carteopenstreetmap sur vos pages, le plugiciel openlayersmap est fait pour vous. Comme son nom l'indique, cet ajout s'appuie sur la bilbliothèque Javascript libre openlayers.

insérer une carte

Après avoir installé le plugiciel, il suffit d'insérer un bloc de texte dans votre page.

<olmap id="olMap" width="800px" height="600px" lat="47.20699" lon="-1.54423" zoom="15" statusbar="1" toolbar="1" controls="1" poihoverstyle="1">
</olmap>
  • id : l'id de la DIV HTML
  • width, height : respectivement largeur, hauteur de la carte
  • lat, lon : respectivement latitude et longitude
  • zoom : niveau de zoom
  • statusbar : afficher la barre de statut
  • toobar : afficher la barre d'outils
  • controls : afficher la barre de contrôle pour de déplacer dans la carte
  • poihoverstyle : affiche les points d'intérêt

Toute les options sont décrites sur la page du plugin.

Le résultat :

<olmap id=“olMap” width=“800px” height=“600px” lat=“47.20699” lon=“-1.54423” zoom=“15” statusbar=“1” toolbar=“1” controls=“1” poihoverstyle=“1”

>

<

/olmap>

Positionner des points

Le plugiciel permet de positionner des marques ou points d'intérêt sur la carte en enrichissant de quelques lignes.

<olmap id="olMap1" width="800px" height="600px" lat="47.20699" lon="-1.54423" zoom="15" statusbar="1" toolbar="1" controls="1" poihoverstyle="1">
47.20699,-1.54423,,1,marker-red.png,
47.20699,lon=-1.54423,90,0.5,photo.png,Mon joli texte
</olmap>

Il faudra insérer une ligne par marque. Chaque ligne contiendra :

latitude, longitude, rotation, opacité, image, texte

La rotation est appliquée à l'image affichée. Cette image est une des images fournies par le plugin dans le répertoire icons (il est possible d'ajouter ces propres images). Le texte sera affiché dans dans une bulle qui apparaît quand on passe la souris sur l'icône.

On remarquera qu'il faut utiliser des id différents (ici olMap et olMap1) sans quoi les 2 cartes s'afficheront à la suite l'une de l'autre.

Le rendu de ces quelques commandes :

<olmap id=“olMap1” width=“800px” height=“600px” lat=“47.20699” lon=“-1.54423” zoom=“15” statusbar=“1” toolbar=“1” controls=“1” poihoverstyle=“1”

>

4

7.20699,-1.54423,45,.7,marker-red.png,Rien 47.20628,-1.54671,,1,photo.png,Mon joli texte </olmap>

Afficher un itinéraire

Le plugiciel permet d'ajouter un itinéraire au format GPX. Pour cela, le fichier devra préalablement être téléchargé sur le wiki via le gestionnaire de média. Il suffit ensuite de rajouter l'option gpxfile=“monfichier.gpx” (il faudra mettre le chemin omplet vers le fichier ce qui inclus l'espace de nom dans lequel il aura été téléchargé).

Par exemple :

<olmap id="olMap2" width="800px" height="600px" lat="47.20699" lon="-1.54423" zoom="15" statusbar="1" toolbar="1" controls="1" poihoverstyle="1" gpxfile=":doc:941.gpx">
47.20699,-1.54423,45,.7,marker-red.png,Rien
47.20628,-1.54671,,1,photo.png,Mon joli texte
</olmap>

<olmap id=“olMap2” width=“800px” height=“600px” lat=“47.20699” lon=“-1.54423” zoom=“15” statusbar=“1” toolbar=“1” controls=“1” poihoverstyle=“1” gpxfile=“:doc:941.gpx”

>

4

7.20699,-1.54423,45,.7,marker-red.png,Rien 47.20628,-1.54671,,1,photo.png,Mon joli texte </olmap>

Afficher des photographies

Le texte affiché dans les infos bulles des marques est mise en forme avec la syntaxe de dokuwiki. Il est donc possible d'afficher des images locales ou distantes.

<olmap id="olMap3" width="800px" height="600px" lat="47.20699" lon="-1.54423" zoom="15" statusbar="1" toolbar="1" controls="1" poihoverstyle="1" gpxfile=":doc:941.gpx">
47.20699,-1.54423,45,.7,marker-red.png,{{http://www.gnu.org/graphics/gnu-head.png?300|Padam}}
47.20628,-1.54671,,1,photo.png,{{:code:peace.jpg?480|Peace}}
</olmap>

<olmap id=“olMap3” width=“800px” height=“600px” lat=“47.20699” lon=“-1.54423” zoom=“15” statusbar=“1” toolbar=“1” controls=“1” poihoverstyle=“1” gpxfile=“:doc:941.gpx”

>

4

7.20699,-1.54423,45,.7,marker-red.png,|Padam 47.20628,-1.54671,,1,photo.png,Peace </olmap>

Les 2 photos viennent de Flickr et sont sous licence CC.

doc/openlayersmap.txt · Dernière modification: Le 07/01/2015 à 23:52 (modification externe)

Outils de la page