Créer des cartes magnifiques et hautement personnalisées avec Mapbox et Drupal

Il existe de nombreuses options de cartes (Google, Esri, Yahoo, etc.), mais j’en ai trouvé une qui se démarque des autres. – Mapbox](https://www.mapbox.com/).

Bien que Google soit la technologie préférée de beaucoup, son ensemble de cartes de base est limité et ne vous permet pas de créer des modèles complètement personnalisés. Mapbox permet de créer de belles cartes hautement personnalisées qui s’intègrent bien à votre image de marque sur une variété de plates-formes. Son éditeur de cartes, Mapbox Studio, est un outil extrêmement puissant, mais relativement facile à utiliser. Il vous permet de personnaliser complètement les cartes, y compris les couleurs des routes et des terrains, et bien plus encore.

L’avantage pour votre organisation est que vous pouvez disposer d’une carte au style unique qui se démarque de la concurrence et qui s’harmonise bien avec le reste de votre image de marque. Ces cartes peuvent être utilisées sur les sites web, les applications mobiles et ailleurs pour créer une image cohérente de vos produits. L’application Mapbox Studio vous permet également de les imprimer ou de les exporter vers une image haute résolution pour les utiliser dans des documents imprimés. En outre, Mapbox est entièrement open source et propose un service freemium pour l’hébergement de vos jeux de tuiles une fois que vous les avez créés.

Personnaliser Mapbox pour votre site Web ou votre application

Avec le module OpenLayers pour Drupal, vous pouvez intégrer les cartes Mapbox à votre site Web ou à votre application et y afficher du contenu géolocalisé. Dans ce billet, nous allons voir un peu comment cela fonctionne et quelques exemples de cartes personnalisées que vous pouvez créer.

Voici un exemple de Mapbox Studio, l’éditeur de cartes multiplateforme que vous pouvez utiliser pour créer des ensembles de cartes personnalisées. Ici, j’ai mis à jour les couleurs des routes pour utiliser des nuances de “DOOR3 Blue”. Mapbox Studio utilise un langage de feuille de style appelé CartoCSS qui ressemble un peu à LESS, avec des variables, des fonctions, etc. Comme on peut le voir ci-dessous, il y a beaucoup de choses qui sont spécifiques aux cartes et il y a une bonne référence pour cela en ligne ainsi que dans l’application via l’onglet Docs.

Une fois que vous avez créé un style de carte, vous pouvez le télécharger sur le serveur mapbox.com (une fois que vous avez créé un compte et autorisé l’application Studio à s’y connecter) via l’onglet Settings (Paramètres) :

Une fois que vous l’avez téléchargé, vous pouvez le visualiser sur votre compte Mapbox :

L’élément important est le texte situé juste en dessous du nom de la carte, en l’occurrence seanr.0d81f662 - il s’agit de l’ID de la carte, que vous devrez formater dans une URL comme celle-ci pour l’intégration avec Drupal :

http://a.tiles.mapbox.com/v3/seanr.0d81f662/${z}/${x}/${y}.png

Maintenant, avec le module OpenLayers pour Drupal, vous pouvez ajouter une nouvelle couche sous Structure -> OpenLayers -> Layers, Add Layer et l’entrer comme une couche XYZ, en vous assurant de définir la couche comme une couche de base :

Après avoir sauvegardé la nouvelle couche, nous pouvons maintenant créer une carte pour utiliser cette couche. Sous l’onglet Cartes, ajoutez une nouvelle carte, et sous Calques et styles, vous voudrez changer le calque de base pour utiliser notre nouveau calque ci-dessus. Vous devrez également définir le centre et les limites de la carte, ce que vous pouvez faire à l’aide de la carte fournie dans cet onglet, ou en saisissant les coordonnées manuellement si vous les avez. J’ai également constaté qu’un bon niveau de zoom par défaut pour une carte des rues comme celle-ci est de 16.

Dans un prochain article, j’expliquerai l’outil Ajouter une carte dans OpenLayers et comment configurer le type de contenu et les vues sur Drupal side development pour rassembler tout cela, y compris les icônes personnalisées pour les lieux, mais le résultat final sera quelque chose comme ceci (avec des lieux historiques des années 1960 dans le West Village, dans ce cas) :

Sean Robertson est développeur principal chez DOOR3.