La plupart des sites que je consulte — et qui proposent une carte pour indiquer leur adresse de contact — affichent une map intégrée depuis une célèbre plateforme américaine. Avec tout ce que cela implique…
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
- Créez un compte sur le site MapBox : cela vous permettra de personnaliser votre fond de carte,
- 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
- → À modifier :
XXX-YOUR-MAPBOX-ACCESS-TOKEN-XXX, - 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 codejavascript_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 !
Pour en savoir +
- Open Street Map
- MapBox
- Leaflet
- Exemple de carte Open Street Map intégrée : Carte des FabLabs de Bretagne
Tu te prends la tête ! Cela fait des années que openstreetmap.org permet le partage des cartes sous forme d’iframe (options de partage à droite de leur site).
Un simple copier/coller dans le code de ton article et hop c’est fini.
Hello Matthieu : en effet, tu as raison, pour un simple embed brut de décoffrage, il est possible d’utiliser cette option. Mais cet article propose une solution à la fois simple et plus avancée, permettant un maximum de personnalisation graphique en un minimum de clics 🙂
Merci pour cet article, cela fonctionne parfaitement.
J’ai pas vraiment réussi à comprendre la politique d’usage de mapbox, il semble y avoir une facturation, mais je n’ai pas saisi à partir de quel usage cela commence a être payant.