Sådan oprettes en brugerdefineret Mapbox-basekortstil med React Leaflet og Leaflet Gatsby Starter

Bygning af kort kan være ret kraftfulde, men ofte sidder du fast med open source-muligheder for kortbilleder, der måske ikke hjælper med at læse dine data. Hvordan kan vi udnytte Mapboxs flise-API'er til at tilføje et brugerdefineret basemap til vores React Leaflet-app?

  • Hvad skal vi bygge?
  • Hvad er Mapbox?
  • Del 1: Oprettelse af en brugerdefineret Mapbox-stil
  • Del 2: Tilføjelse af et brugerdefineret TileLayer til React Leaflet
  • Del 3: Tilføjelse af et brugerdefineret basemap til Gatsby Starter Leaflet
  • Sikring af din Mapbox-nøgle
  • Vil du lære mere om kort?

Hvad skal vi bygge?

Vi gennemgår oprettelsen af ​​en ny grundlæggende Mapbox-stil i vores Mapbox-konto. Når vi er oprettet, skal vi bruge deres Map API til at tilføje et brugerdefineret basemap til vores React Leaflet-app.

Til vores kort skal vi bruge denne Leaflet Gatsby Starter, jeg oprettede, der giver dig mulighed for nemt at spinde en ny kortapp. Før vi dog drejer det op, vil jeg gå igennem, hvordan du tilføjer det ved kun at bruge React Leaflet-komponenter.

En kortlægningsapp?

Jep! Kort bruges over hele verden til at undersøge datasæt for geografiske placeringer. De er vigtige værktøjer for forskere og andre, der prøver at hjælpe verden.

Hvis du vil lære mere om at opbygge et kort og tilføje data til det, kan du tjekke nogle af mine andre artikler først, såsom at oprette et Coronavirus (COVID-19) kort eller et Summer Road Trip-kort samt en lille smule inspiration til, hvorfor nogen kan kortlægge.

Hvad er Mapbox?

Mapbox er en kortlægningsplatform, der giver sine kunder mulighed for at oprette tilpassede kortlægningsløsninger. De udnytter også en række API'er, der giver effektive funktioner til at opbygge kortfunktioner.

Til vores formål skal vi bruge deres Map API, specifikt deres Static Tiles API, til at tjene en tilpasset kortstil, som vi opretter.

Del 1: Oprettelse af en brugerdefineret Mapbox-stil

For at få det udseende og den fornemmelse, vi ønsker for vores kort, er det vigtigt at have et basemap, der hjælper med at gøre vores data til stede uden distraktioner. Plus, nogle gange er det sjovt at have et brugerdefineret kort.

Mapbox-konto

Den første ting, vi skal konfigurere vores brugerdefinerede Mapbox-stil, er at have en konto. Jeg vil ikke lede dig igennem den proces, men du kan gå over til Mapboxs websted, hvor du kan tilmelde dig gratis: mapbox.com

Oprettelse af en ny brugerdefineret stil

Oprettelse af en ny stil i Mapbox er ikke så svært, som det lyder. Selvom det kan blive virkelig komplekst, hvis du vil have noget unikt, kan vi kopiere en af ​​Mapboxs standardformater for at komme i gang.

Først skal du gå over til Mapbox's Studio-dashboard ved at klikke på dit kontolink i øverste højre hjørne, når du er logget ind.

Når vi er på vores Studio-dashboard, vil vi vælge knappen Ny stil.

Når du har klikket på knappen, vises en modal, der giver dig mulighed for at vælge en skabelon. Du kan vælge hvad du vil her, men jeg vælger sort / hvid med en variation af mørk. Og når du har valgt din skabelon, skal du klikke på knappen Tilpas.

Og nu falder vi ind i vores brugergrænseflade til tilpasning.

Herfra kan du virkelig gøre, hvad du vil. Der er masser af muligheder for at tilpasse dit kort. Det er lidt kompliceret at prøve at grave her, men Mapbox giver nogle ressourcer til at hjælpe dig med at blive produktiv.

Genererer et Mapbox-token

Når du er tilfreds med din nye stil, og alt er offentliggjort, vil vi generere et token, som vi bruger til at give adgang til vores kort.

Gå videre til Kontosektionen i Mapbox-instrumentbrættet.

Mapbox giver dig et "standardtoken", som du kan bruge i dine applikationer. Du er fri til at bruge dette, men jeg anbefaler at oprette et nyt token, som du kan give et unikt navn på den måde, hvis du nogensinde blæser forbi det gratis niveau af Mapbox, kan du spore din brug.

Derudover er det bedst at holde et separat token for hver applikation, på den måde kan du nemt rotere en individuel nøgle uden at skulle opdatere alle applikationer, der bruger den.

Når du har klikket på Opret et token, kan du konfigurere nøglen, hvordan du vil, med de omfang og tilladelser, du vælger, men til vores formål kan du lade alle de offentlige rækkevidder være markeret for vores kort, hvilket de gør som standard .

Konfiguration af vores tilpassede slutpunkt

Til denne vejledning skal vi bruge Mapbox's Static Tiles-service.

Vores slutpunkt vil se ud som følger:

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

Der er et par parametre her, vi skal forstå:

  • brugernavn: dette vil være din Mapbox-kontos brugernavn
  • style_id: dette vil være id'et for den stil, du oprettede før
  • z, x, y: dette er parametre, som Leaflet programmatisk bytter ud, så vi vil lade dem være som de er
  • access_token: dette er Mapbox-nøglen, du oprettede ovenfor

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
  • Sådan oprettes en Summer Road Trip Mapping-app med Gatsby og Leaflet
  • Sådan oprettes din egen Santa Tracker med Gatsby og React Leaflet
  • Sådan oprettes en kortapp i Reager på den nemme måde med Leaflet

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev