Article original : How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter

Créer des cartes peut être très puissant, mais souvent vous êtes limité aux options open source pour l'imagerie cartographique qui ne facilitent pas la lisibilité de vos données. Comment pouvons-nous exploiter les API de tuiles de Mapbox pour ajouter un fond de carte personnalisé à notre application React Leaflet ?

Qu'allons-nous construire ?

Nous allons créer un nouveau style de base Mapbox dans notre compte Mapbox. Une fois créé, nous allons utiliser leur API Map pour ajouter un fond de carte personnalisé à notre application React Leaflet.

Image Gatsby Starter Leaflet avec fond de carte Mapbox

Pour notre carte, nous allons utiliser ce Leaflet Gatsby Starter que j'ai créé et qui vous permettra de lancer facilement une nouvelle application de cartographie. Avant de le lancer, je vais vous montrer comment l'ajouter en utilisant uniquement des composants React Leaflet.

Une application de cartographie ?

Oui ! Les cartes sont utilisées dans le monde entier pour étudier des ensembles de données pour des localisations géographiques. Elles sont des outils importants pour les scientifiques et autres personnes qui essaient d'aider le monde.

Image Carte personnalisée du Coronavirus (COVID-19)

Si vous souhaitez en savoir plus sur la création d'une carte et l'ajout de données, vous pouvez consulter certains de mes autres articles tels que la création d'une carte du Coronavirus (COVID-19) ou d'une carte de voyage estival ainsi qu'un peu d'inspiration sur pourquoi Tout le monde peut cartographier.

Qu'est-ce que Mapbox ?

Mapbox est une plateforme de cartographie qui permet à ses clients de créer des solutions de cartographie personnalisées. Ils exploitent également une variété d'API qui offrent des capacités puissantes pour construire des fonctionnalités de carte.

Image mapbox.com

Pour nos besoins, nous allons utiliser leur API Map, spécifiquement leur API Static Tiles, pour servir un style de carte personnalisé que nous créons.

Partie 1 : Création d'un style Mapbox personnalisé

Pour obtenir l'apparence que nous voulons pour notre carte, il est important d'avoir un fond de carte qui aide à présenter nos données sans distractions. De plus, parfois il est amusant d'avoir une carte personnalisée.

Compte Mapbox

La première chose dont nous avons besoin pour configurer notre style Mapbox personnalisé est d'avoir un compte. Je ne vais pas vous guider à travers ce processus, mais vous pouvez vous rendre sur le site de Mapbox où vous pouvez vous inscrire gratuitement : mapbox.com

Création d'un nouveau style personnalisé

Créer un nouveau style dans Mapbox n'est pas aussi difficile que cela en a l'air. Bien que cela puisse devenir très complexe si vous voulez quelque chose d'unique, nous pouvons copier l'un des styles par défaut de Mapbox pour commencer.

Tout d'abord, rendez-vous sur le tableau de bord Studio de Mapbox en cliquant sur le lien de votre compte dans le coin supérieur droit lorsque vous êtes connecté.

Image Mapbox Studio

Une fois sur notre tableau de bord Studio, nous voulons sélectionner le bouton Nouveau Style.

Image Créer un nouveau style dans Mapbox Studio

Après avoir cliqué sur le bouton, une fenêtre modale s'ouvrira vous permettant de choisir un modèle. Vous pouvez choisir ce que vous voulez ici, mais je vais choisir Monochrome avec une variation de Dark. Et après avoir sélectionné votre modèle, cliquez sur le bouton Personnaliser.

Image Sélectionner et personnaliser un modèle pour un nouveau style dans Mapbox Studio

Et maintenant nous sommes redirigés vers notre interface de personnalisation.

Image Interface de personnalisation de style Mapbox

À partir de là, vous pouvez vraiment faire ce que vous voulez. Il y a une tonne d'options pour personnaliser votre carte. C'est un peu complexe d'essayer de creuser ici, mais Mapbox fournit quelques ressources pour essayer de vous aider à être productif.

Génération d'un jeton Mapbox

Une fois que vous êtes satisfait de votre nouveau style et que tout est publié, nous voulons générer un jeton que nous utiliserons pour fournir l'accès à notre Carte.

Rendez-vous dans la section Compte du tableau de bord Mapbox.

Image Création d'un nouveau jeton dans Mapbox

Mapbox vous fournit un jeton "par défaut" que vous pouvez utiliser dans vos applications. Vous êtes libre de l'utiliser, mais je recommande de créer un nouveau jeton que vous pouvez nommer de manière unique, de sorte que si vous dépassez un jour le niveau gratuit de Mapbox, vous pourrez suivre votre utilisation.

De plus, il est préférable de garder un jeton séparé pour chaque application, de sorte que vous pouvez facilement faire tourner une clé individuelle, sans avoir à mettre à jour chaque application l'utilisant.

Une fois que vous cliquez sur Créer un jeton, vous pouvez configurer la clé comme vous le souhaitez, avec les portées et permissions que vous choisissez, mais pour nos besoins, vous pouvez laisser toutes les portées Publiques cochées pour notre carte, ce qu'ils font par défaut.

Image Créer un nouveau jeton d'accès dans Mapbox

Configuration de notre point de terminaison personnalisé

Pour ce tutoriel, nous allons utiliser le service Static Tiles de Mapbox.

Image API Maps Static Tiles de Mapbox

Notre point de terminaison ressemblera à ce qui suit :

https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}

Il y a quelques paramètres ici que nous devons comprendre :

  • username : ce sera le nom d'utilisateur de votre compte Mapbox
  • style_id : ce sera l'ID du style que vous avez créé précédemment
  • z, x, y : ce sont des paramètres que Leaflet échange de manière programmatique, donc nous voulons les laisser tels quels
  • access_token : c'est la clé Mapbox que vous avez créée ci-dessus

Pour trouver votre nom d'utilisateur et votre ID de style, nous pouvons utiliser l'URL du style pour notre nouveau style Mapbox pour obtenir ces valeurs.

Image Trouver l'URL du style dans Mapbox Studio

Dans mon exemple, mon URL de style ressemble à ceci :

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p

colbyfayock est mon nom d'utilisateur et ck8lryjfq0jdo1ip9ctmuhc6p est mon ID de style.

Et une fois que j'ai mis à jour les paramètres de mon point de terminaison, l'URL finale du point de tuile ressemblera à ceci :

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

Partie 2 : Ajout d'une couche de tuiles personnalisée à React Leaflet

Lors de la création d'une carte avec React Leaflet, votre composant principal sera un <Map> qui enveloppe l'intégralité de l'application. C'est ce qui configure votre instance de carte pour Leaflet.

Pour nos besoins ici, nous allons utiliser l'exemple sur la page d'accueil de React Leaflet comme point de départ.

Composant TileLayer de React Leaflet

À l'intérieur de votre composant <Map>, vous incluez un composant <TileLayer>, qui définit l'imagerie du monde sur laquelle vous basez votre carte.

L'exemple sur la page d'accueil de React Leaflet utilise une version publique de OpenStreetMap comme leur TileLayer, qui est un projet de carte open source créé et mis à jour par des personnes du monde entier.

<Map center={position} zoom={13}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
</Map>

Cela vous donne une carte de base, mais nous voulons remplacer par Mapbox afin de pouvoir configurer un look et une sensation personnalisés pour notre carte.

TileLayer Mapbox personnalisé

Pour ajouter notre style personnalisé, nous allons vouloir mettre à jour les props url et attribution du composant TileLayer.

Pour l'URL, il s'agira simplement du point de terminaison du style personnalisé que nous avons créé précédemment, donc dans mon exemple, cela ressemble à ceci :

https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN

Pour l'attribution, nous voulons créditer Mapbox en tant que service, donc nous voulons définir notre attribution comme suit :

Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>

Une fois intégré à notre TileLayer, notre code devrait maintenant ressembler à ceci :

<Map center={position} zoom={13}>
  <TileLayer
    url="https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN"
    attribution="Map data &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>Mapbox</a>"
  />
</Map>

Et une fois que nous ouvrons notre carte, nous devrions voir notre nouveau fond de carte !

Image React Leaflet avec un fond de carte Mapbox

Voir le code !

Si vous voulez voir comment je l'ai fait, consultez le diff commit par commit.

Le seul bémol est que j'ai créé un fichier .env.development.local à la racine de mon projet dans lequel j'ai stocké une nouvelle variable d'environnement appelée REACT_APP_MAPBOX_KEY pour stocker ma clé Mapbox.

Partie 3 : Ajout d'un fond de carte personnalisé à Gatsby Starter Leaflet

J'ai écrit quelques autres articles sur comment commencer avec mon Leaflet Gatsby Starter, mais pour cette partie, nous allons vouloir avoir une application de base lancée que nous pouvons utiliser pour changer notre point de terminaison TileLayer.

Configuration de notre application Gatsby React Leaflet

Pour commencer, consultez les instructions sur le github du Starter :

https://github.com/colbyfayock/gatsby-starter-leaflet

Une fois que vous êtes prêt, vous devriez avoir une application de cartographie de base prête à l'emploi !

Image Nouvelle application Leaflet Gatsby dans le navigateur

Configuration de notre service Mapbox

La première chose que nous allons vouloir faire est d'ajouter Mapbox en tant que service dans notre fichier src/data/map-services.js.

En prenant notre URL de point de terminaison personnalisé que nous avons créé dans la Partie 1, configurons un nouvel objet avec un nom de Mapbox, et avec une URL et une attribution similaires à ce que nous avons fait dans la Partie 2.

export const mapServices = [
  {
    name: 'OpenStreetMap',
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    name: 'Mapbox',
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',
    url: `https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN`
  }
];

Utilisation de notre service de carte Mapbox

Une fois que vous avez configuré votre service Mapbox, il ne reste plus qu'à ouvrir le fichier src/pages/index.js, trouver la définition de l'objet mapSettings et mettre à jour la propriété defaultBaseMap en Mapbox.

const mapSettings = {
  center: CENTER,
  defaultBaseMap: 'Mapbox',
  zoom: DEFAULT_ZOOM,
  mapEffect
};

Enregistrez cette modification, actualisez la carte dans votre navigateur et vous devriez maintenant voir votre style de fond de carte personnalisé !

Image Gatsby Starter Leaflet avec fond de carte Mapbox personnalisé dans le navigateur

Voir le code !

Si vous voulez voir comment je l'ai fait, consultez le diff avec le commit.

Le seul bémol est que j'ai créé un fichier .env.development à la racine de mon projet dans lequel j'ai stocké une nouvelle variable d'environnement appelée GATSBY_MAPBOX_KEY pour stocker ma clé Mapbox.

Sécurisation de votre clé Mapbox

Variables d'environnement

Une partie de la plupart des processus de développement qui utilisent des clés individuelles configurera généralement les clés en tant que variables d'environnement. Les variables d'environnement sont des paramètres configurés qui ne vivent pas dans le code lui-même.

Cela est important car cela empêche votre clé d'être enregistrée dans votre code, ce qui est mauvais d'un point de vue sécurité, mais cela vous permet également de fournir une clé différente pour différents environnements.

Lors de la génération de vos clés, essayez de garder cela à l'esprit, car cela peut vous sauver à long terme.

Verrouillage de votre clé Mapbox

Dans vos paramètres lors de la création d'un jeton ou lors de la modification d'un jeton, Mapbox vous permet de spécifier uniquement les URL auxquelles vous souhaitez que votre clé soit accessible.

Bien que Mapbox ait un niveau gratuit généreux, vous voulez probablement le garder verrouillé uniquement aux URL que vous utilisez. Vous pouvez créer plusieurs clés, où une pourrait être pour un usage public sur votre site web et une autre pour votre développement local.

Cela est utile par exemple, où vous avez une clé qui ne sera jamais utilisée publiquement à des fins de développement, mais ensuite vous avez une clé que vous déployez, qui peut être verrouillée uniquement à cette URL.

Si quelqu'un récupère votre clé, il pourrait la brancher sur son propre site web et utiliser tout votre niveau gratuit, potentiellement en augmentant votre facture !

Vous voulez en savoir plus sur les cartes ?

Vous pouvez consulter quelques-unes de mes autres ressources pour commencer :