21 Mai 2012 |
|
| 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. 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  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  Voir une carte plus grande |