RSS Libre@vous
RSS de la rubrique Géomatique

Dernière mise à jour
le 14/01/2016 à 15h43
Les contenus de ce site sont publiés sous la licence CC by-sa, sauf mention contraire.
licence_CC-by-sa
Copyright © 2018 Libre @ vous. Tous droits réservés.
Joomla! est un logiciel libre sous licence GNU/GPL.
21
Mai
2012
Ajouter simplement une carte OpenStreetMap sur votre site web Imprimer
Je vois encore très souvent des sites web consacrés à des conférences sur les logiciels libres proposer des cartes de localisation en utilisant... Google Map et pas OpenStreetMap ! Je suis d'accord sur le fait qu'il existe plusieurs fournisseurs de cartes en ligne et que chacun a la liberté de choisir celui qu'il veut. Mais dans ce genre de cas (il s'agit quand même de promouvoir le libre !), je ne comprends pas bien la logique. C'est un peu comme si on voulait promouvoir GNU/Linux en le faisant fonctionner dans une machine virtuelle à l'intérieur d'un Windows. C'est un peu incohérent vous ne trouvez pas ?

Alors je me dis plutôt que la raison c'est que ceux qui réalisent ces sites savent faire une carte avec Google Map, mais pas avec OpenStreetMap. Pourtant c'est très simple. C'est ce que je vais expliquer dans cet article.

Édition du 16/12/2013 :
L'interface du site openstreetmap.org a été modifiée récemment et il n'est maintenant plus possible d'utiliser la méthode décrite dans cet article. A la place, il existe l'excellent outil umap développé par un contributeur OSM français et qui peut faire beaucoup plus de choses : http://umap.openstreetmap.fr. Il faudra que je fasse un article à ce sujet ici. Dès que j'ai le temps... Sourire


Pour commencer, il faut aller sur le site officiel OpenStreetMap. En haut, cliquez sur l'onglet Exporter. Un bandeau latéral s'ouvre à gauche de la carte. Sur la carte, positionnez vous et zoomez à l'endroit qui correspond à la zone que vous voulez afficher au chargement de votre page web. Si la carte par défaut ne vous convient pas, vous pouvez en choisir une autre dans la liste déroulante en haut à droite de la carte (Standard, Carte cyclable, Carte de transport ou MapQuest ouverte). La carte MapQuest ouverte est notamment très adaptée pour un affichage des zones urbaines denses.

Dans le bloc Format à exporter, cliquer sur le bouton HTML incorporable. Avec ce format, vous avez la possibilité d'ajouter un marqueur pour indiquer une position sur la carte. Il suffit de cliquer sur le lien Ajouter un marqueur à la carte, puis sur la carte pour placer le marqueur. On ne peut ajouter qu'un seul marqueur avec cette interface simplifiée.

Si la zone affichée sur la carte vous convient telle qu'elle, vous pouvez sauter l'étape suivante. Si vous souhaitez sélectionner plus finement la zone, cliquez dans le bloc Zone à exporter sur le lien Sélectionner manuellement une autre zone. Puis grâce à un cliquer/glisser, dessinez un cadre sur la carte pour sélectionner la zone qui sera affichée. Si vous avez fait une erreur dans la sélection, vous pouvez encore modifier la position du cadre en utilisant un cliquer/glisser et sa taille grâce aux poignées dans les coins et les centres des arêtes.

Le code HTML à copier se trouve dans le bloc Sortie en bas du bandeau gauche. Il suffit de copier/coller ce code dans votre page pour obtenir une belle carte glissante avec déplacement, zoom et le marqueur positionné. Si vous trouvez la carte trop petite, vous pouvez modifier la valeur des attributs width et height de la balise iframe.

Maintenant vous n'avez plus d'excuse pour dire que la carte Google Map est plus simple à mettre en place Complice


Pour finir voici un exemple de résultat avec le rendu MapQuest ouverte positionnée sur le centre ville de Montpellier et avec un marqueur sur le rendez-vous habituel des montpelliérains à côté de la Fontaine des 3 Grâces Sourire



Voir une carte plus grande
 

Commentaires  

 
#1 Fibo 16-12-2013 17:56
Hélàs le site OpenStreetMap à changer et l'export ne se fait plus ainsi (pas trouvé coment il se fait, d'ailleurs!)
Citer
 
 
#2 Nicolas Moyroud 16-12-2013 18:36
Oui c'est exact il a changé. Je n'y vais plus très souvent (j'utilise maintenant la carte du rendu OSM France http://tile.openstreetmap.fr). Je n'ai vu que très récemment le nouveau osm.org. J'ai très rapidement essayé de voir comment exporter depuis la nouvelle interface, mais je n'ai pas trouvé non plus. Il faudra que je cherche mieux ! :-)

Mais bon de toute façon maintenant plus besoin puisqu'il y a une autre solution qui est très bien pour faire une carte sur son site. C'est l'outil umap qui a été développé par un contributeur français de l'association OSM France : http://umap.openstreetmap.fr

Simple à utiliser et on peut faire des cartes très complètes avec des marqueurs, des lignes, des polygones. On peut aussi importer des fichiers de données. Bref c'est le top ! Il faut absolument que je fasse un article à ce sujet sur ce site. Dès que j'ai le temps... ;-)
Citer
 
 
#3 Nicolas Moyroud 16-12-2013 18:47
Si j'ai trouvé sur openstreetmap.org. Comme quoi il suffisait que je regarde mieux ! A droite de la carte il y a une barre verticale d'icônes. Il faut cliquer sur l'avant-dernier en bas "Partager", puis "Inclure le marqueur", positionner son marqueur sur la carte, puis le bouton "HTML". Pour finir copier/coller le code HTML sur votre site.

Mais bon umap c'est mieux, mangez-en !
Citer
 
 
#4 Bernard 16-02-2014 12:24
Merci pour cette article qui est très instructif!
Citer
 

Ajouter un Commentaire

Tout les contenus de ce site sont publiés selon les termes de la licence Creative Commons by sa. En ajoutant votre commentaire, vous acceptez implicitement sa mise à disposition selon les termes de cette licence.


Code de sécurité
Rafraîchir