// L’idée

Ajoutez à votre site web une carte sous Open Street Map (OSM) avec un marqueur géolocalisé, le tout en 3 min !

Nul besoin de coder la moindre ligne ni même d’être un designer expert : il vous suffit de copier-coller les petits morceaux de code ci-dessous à l’endroit indiqué 😋 Il sera simplement nécessaire de créer un compte MapBox pour utiliser de magnifiques fonds de cartes.

Le tout est totalement gratuit, libre et Open source ! Idéal pour personnaliser votre page de contact, ajouter une carte à vos widgets ou en pied-de-page de votre site… ! Contrairement à la plateforme américaine la plus utilisée pour les maps, cette carte ne conserve pas vos données, ne les utilise pas à votre insu; elle est par ailleurs entièrement modifiable et adaptable selon vos besoins, et vous pouvez utiliser d’autres modules pour l’améliorer, la diffuser…

// Ce dont vous avez besoin

Avant de commencer, vous avez besoin de quelques éléments qui vous permettront de personnaliser votre carte. Techniquement, il vous faudra simplement modifier le morceau de code de la rubrique “Paramétrages” ci-dessous avec vos informations.

Coordonnées GPS de la balise

Utilisez le site openstreetmap.org pour chercher les coordonnées.

→ À modifier : [XXX-LATITUDE-XXX, XXX-LONGITUDE-XXX]

Coordonnées GPS du centre de la carte

Même méthode. Bien évidemment, vous pouvez utiliser les mêmes coordonnées que celles de votre balise : celle-ci se trouvera ainsi au centre de votre carte.

→ À modifier : [XXX-LATITUDE-CENTER-XXX, XXX-LONGITUDE-CENTER-XXX]

Fond de carte MapBox

  1. Créez un compte sur le site MapBox : cela vous permettra de personnaliser votre fond de carte,
  2. Récupérez votre Access Token : cliquez sur “Account” > puis sur l’onglet “API access token” dans le menu supérieur droit > cliquez enfin sur “Default Public Token” pour afficher votre Access Token
  3. → À modifier : XXX-YOUR-MAPBOX-ACCESS-TOKEN-XXX,
  4. Choisissez le type de fond de carte que vous souhaitez utiliser : light / dark / streets / outdoors / satellite… puis modifiez si besoin id: 'mapbox.streets' dans le code javascript_part.js

// Ajoutez la carte à votre site

En-tête

Copiez-collez ce code entre les balises ‹head›‹/head› de votre site : il s’agit d’importer les éléments pour personnaliser l’intérieur de la carte (la balise notamment). Merci par ailleurs de conserver les mentions légales 😄

Design

Copiez-collez ce code CSS entre les balises ‹style›‹/style› au sein de l’en-tête ‹head›‹/head› de votre site, aussitôt après le code 1., il vous permettra de personnaliser l’apparence globale de votre carte.

Affichage

Copiez-collez ce morceau de code à l’endroit où vous souhaitez afficher votre carte : dans un article, en pied-de-page, dans un widget de colonne, etc.

Paramétrages

Ajoutez juste au dessous du précédent, le code Javascript suivant. Il sert à paramétrer votre carte : n’oubliez pas de personnaliser les informations (voir première partie de notre article).

Et voilà !

Ne vous reste plus qu’à infuser un délicieux thé 🍵 et à profiter du soleil !

→ Visualiser & télécharger OSM website widget ↗

Pour aller + loin

Article sous licence CC BY-SA 4.0
icone Creative Commons Intégrez (enfin) une carte OpenStreetMap à votre site web

Cet article est diffusé sous licence Creative Commons BY-SA 4.0 Attribution - Partage dans les mêmes conditions

→ Vous êtes autorisé·e à :

Partager — copier, distribuer et communiquer cet article par tous moyens et sous tous formats

Adapter — remixer, transformer et créer à partir de cet article pour toute utilisation, y compris commerciale.

→ Selon les conditions suivantes :

Partage dans les mêmes conditions — Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir de cet article original, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence CC BY-SA 4.0

Attribution — Vous devez créditer le titre de l'article et son auteur, intégrer un lien vers cet article ainsi qu'un lien vers la licence CC BY-SA 4.0 et indiquer si des modifications ont été effectuées

Pour créditer cet article :

« Intégrez (enfin) une carte OpenStreetMap à votre site web, Guillaume Rouan, CC BY-SA 4.0 »
🔗 https://grouan.fr/2016/08/17/integrez-une-carte-openstreetmap-a-votre-site-web/
🔗 https://creativecommons.org/licenses/by-sa/4.0/deed.fr

Permalien

https://grouan.fr/2016/08/17/integrez-une-carte-openstreetmap-a-votre-site-web/