Cómo configurar un estilo de mapa base de Mapbox personalizado con React Leaflet y Leaflet Gatsby Starter

La creación de mapas puede ser bastante poderosa, pero a menudo se queda atascado con opciones de código abierto para las imágenes del mapa que pueden no ayudar a la legibilidad de sus datos. ¿Cómo podemos aprovechar las API de mosaicos de Mapbox para agregar un mapa base personalizado a nuestra aplicación React Leaflet?

  • ¿Qué vamos a construir?
  • ¿Qué es Mapbox?
  • Parte 1: Crear un estilo Mapbox personalizado
  • Parte 2: Agregar un TileLayer personalizado al folleto de React
  • Parte 3: Agregar un mapa base personalizado al folleto de inicio de Gatsby
  • Asegurar su clave Mapbox
  • ¿Quieres aprender más sobre mapas?

¿Qué vamos a construir?

Vamos a ver cómo crear un nuevo estilo básico de Mapbox en nuestra cuenta de Mapbox. Una vez creada, usaremos su API de mapas para agregar un mapa base personalizado a nuestra aplicación React Leaflet.

Para nuestro mapa, usaremos este Folleto Gatsby Starter que creé que le permitirá poner en marcha fácilmente una nueva aplicación de mapas. Sin embargo, antes de que lo hagamos, le explicaré cómo agregarlo usando solo componentes de React Leaflet.

¿Una aplicación de mapas?

¡Sip! Los mapas se utilizan en todo el mundo para estudiar conjuntos de datos de ubicaciones geográficas. Son herramientas importantes para los científicos y otras personas que intentan ayudar al mundo.

Si desea obtener más información sobre cómo crear un mapa y agregarle datos, puede consultar algunos de mis otros artículos primero, como crear un mapa de Coronavirus (COVID-19) o un mapa de Summer Road Trip, así como un poco de inspiración sobre por qué cualquiera puede mapear.

¿Qué es Mapbox?

Mapbox es una plataforma cartográfica que permite a sus clientes crear soluciones cartográficas personalizadas. También aprovechan una variedad de API que brindan poderosas capacidades para crear características de mapas.

Para nuestros propósitos, utilizaremos su API de mapas, específicamente su API de mosaicos estáticos, para ofrecer un estilo de mapa personalizado que creamos.

Parte 1: Crear un estilo Mapbox personalizado

Para obtener la apariencia que queremos para nuestro mapa, es importante tener un mapa base que ayude a que nuestros datos se presenten sin distracciones. Además, a veces es divertido tener un mapa personalizado.

Cuenta Mapbox

Lo primero que necesitaremos para configurar nuestro estilo Mapbox personalizado es tener una cuenta. No voy a guiarte por ese proceso, pero puedes dirigirte al sitio web de Mapbox donde puedes registrarte gratis: mapbox.com

Creando un nuevo estilo personalizado

Crear un nuevo estilo en Mapbox no es tan difícil como parece. Si bien puede volverse realmente complejo si desea algo único, podemos copiar uno de los estilos predeterminados de Mapbox para comenzar.

Primero, diríjase al panel de Studio de Mapbox haciendo clic en el enlace de su cuenta en la esquina superior derecha cuando inicie sesión.

Una vez que estemos en nuestro panel de Studio, queremos seleccionar el botón Nuevo estilo.

Después de hacer clic en el botón, aparecerá un modal que le permitirá elegir una plantilla. Puedes elegir lo que quieras aquí, pero yo elegiré Monocromo con una variación de Oscuro. Y una vez que haya seleccionado su plantilla, haga clic en el botón Personalizar.

Y ahora estamos en nuestra interfaz de usuario de personalización.

Desde aquí, realmente puedes hacer lo que quieras. Hay un montón de opciones para personalizar tu mapa. Es un poco complejo intentar profundizar aquí, pero Mapbox proporciona algunos recursos para ayudarlo a ser productivo.

Generando un token de Mapbox

Una vez que esté satisfecho con su nuevo estilo y todo esté publicado, queremos generar un token que usaremos para proporcionar acceso a nuestro Mapa.

Dirígete a la sección Cuenta del panel de Mapbox.

Mapbox le proporciona un token "predeterminado" que puede utilizar en sus aplicaciones. Eres libre de usar esto, pero te recomiendo crear un nuevo token al que puedas proporcionar un nombre único, de esa manera, si alguna vez superas el nivel gratuito de Mapbox, podrás realizar un seguimiento de tu uso.

Además, es mejor mantener un token separado para cada aplicación, de esa manera puede rotar fácilmente una clave individual, sin tener que actualizar cada aplicación que la use.

Una vez que haga clic en Crear un token, puede configurar la clave como desee, con los ámbitos y permisos que elija, pero para nuestros propósitos, puede dejar todos los ámbitos públicos marcados para nuestro mapa, lo que hacen de forma predeterminada. .

Configurando nuestro punto final personalizado

Para este tutorial, usaremos el servicio Static Tiles de Mapbox.

Nuestro punto final tendrá el siguiente aspecto:

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

Hay algunos parámetros aquí que debemos entender:

  • nombre de usuario: este será el nombre de usuario de su cuenta de Mapbox
  • style_id: este será el ID del estilo que creó antes
  • z, x, y: estos son parámetros que Leaflet intercambia programáticamente, por lo que queremos dejarlos como están
  • access_token: esta es la clave Mapbox que creó arriba

To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.

In my example, my Style URL looks like:

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p 

colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.

And once I update my endpoint parameters, the final tilepoint URL will look like:

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

Part 2: Adding a custom TileLayer to React Leaflet

When building a map with React Leaflet, your main component will be a that wraps the entirety of the app. This is what sets up your Map instance for Leaflet.

For our purposes here, we’re going to use the example on the React Leaflet homepage as our starting point.

React Leaflet TileLayer Component

Inside of your component you include a component, which defines the imagery of the world that you base your map upon.

The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.


    

This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.

Custom Mapbox TileLayer

To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.

For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:

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

For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:

Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox 

When plugged in to our TileLayer, our code should now look like this:


    

And once we open up our map, we should see our new basemap!

See the code!

If you want to see how I did it, check out the diff commit by commit.

The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY  to store my Mapbox key.

Part 3: Adding a custom basemap to Gatsby Starter Leaflet

I’ve written a few other articles on how to get started with my Leaflet Gatsby Starter, but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.

Setting up our React Leaflet Gatsby app

To get started, check out the instructions on the Starter github:

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

Once you’re ready, you should have a basic mapping app ready to go!

Configuring our Mapbox service

The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.

Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.

export const mapServices = [ { name: ‘OpenStreetMap’, attribution: '© OpenStreetMap contributors’, url: ‘//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’ }, { name: ‘Mapbox’, attribution: ‘Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox’, url: `//api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN` } ]; 

Using our Mapbox map service

Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.

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

Save that change, refresh the map in your browser, and you should now see your custom basemap style!

See the code!

If you want to see how I did it, check out the diff with the commit.

The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY  to store my Mapbox key.

Securing your Mapbox key

Environment variables

Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.

This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.

When generating your keys, try to keep this in mind, as it can save you in the long run.

Locking down your Mapbox key

In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.

Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.

This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.

If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!

Want to learn more about maps?

You can check out a few of my other resources to get started:

  • How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
  • Anyone Can Map! Inspiration and an introduction to the world of mapping
  • How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
  • How to Create your own Santa Tracker with Gatsby and React Leaflet
  • How to build a mapping app in React the easy way with Leaflet

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter