Kaip nustatyti pasirinktinį „Mapbox“ žemėlapio stilių naudojant „React Leaflet“ ir „Gatsby Starter“ informacinius lapelius

Žemėlapių kūrimas gali būti gana galingas, tačiau dažnai užstringa atvirojo kodo žemėlapių vaizdų parinktys, kurios gali nepadėti jūsų duomenų įskaitomumui. Kaip mes galime panaudoti „Mapbox“ plytelių API, kad pridėtume pasirinktinį pagrindinį žemėlapį prie savo „React Leaflet“ programos?

  • Ką mes statysime?
  • Kas yra „Mapbox“?
  • 1 dalis: Tinkinto „Mapbox“ stiliaus kūrimas
  • 2 dalis: Pasirinktinio „TileLayer“ pridėjimas prie „React Leaflet“
  • 3 dalis: Tinkinto pagrindo žemėlapio pridėjimas prie „Gatsby“ pradinio informacinio lapelio
  • „Mapbox“ rakto apsauga
  • Norite sužinoti daugiau apie žemėlapius?

Ką mes statysime?

Peržiūrėsime naują pagrindinį „Mapbox“ stilių savo „Mapbox“ paskyroje. Kai sukursime, naudosime jų žemėlapio API, kad pridėtume pasirinktinę pagrindinę žemėlapį prie savo „React Leaflet“ programos.

Savo žemėlapiui naudosime šį mano sukurtą „Leaflet Gatsby Starter“, kuris leis jums lengvai pasukti naują žemėlapio programą. Prieš tai sukdami, aš jums paaiškinsiu, kaip jį pridėti naudojant tik „React Leaflet“ komponentus.

Žemėlapių programa?

Taip! Žemėlapiai naudojami visame pasaulyje tiriant geografinių vietovių duomenų rinkinius. Jie yra svarbūs įrankiai mokslininkams ir kitiems, kurie bando padėti pasauliui.

Jei norite sužinoti daugiau apie žemėlapio kūrimą ir duomenų pridėjimą į jį, pirmiausia galite peržiūrėti keletą kitų mano straipsnių, pavyzdžiui, sukurti koronaviruso (COVID-19) žemėlapį ar vasaros kelionių žemėlapį, taip pat šiek tiek įkvėpimo, kodėl kiekvienas gali žemėlapį.

Kas yra „Mapbox“?

„Mapbox“ yra žemėlapių platforma, leidžianti savo klientams kurti pasirinktinius žemėlapių sprendimus. Jie taip pat naudoja įvairias API, kurios suteikia galingas galimybes kurti žemėlapio funkcijas.

Savo tikslams naudosime jų žemėlapių API, ypač jų „Static Tiles“ API, kad būtų galima naudoti mūsų kuriamą pasirinktinį žemėlapio stilių.

1 dalis: Tinkinto „Mapbox“ stiliaus kūrimas

Norint, kad mūsų žemėlapis atrodytų ir norėtųsi, svarbu turėti pagrindinę žemėlapį, kuris padėtų mūsų duomenis pateikti be trukdžių. Be to, kartais smagu turėti pasirinktinį žemėlapį.

„Mapbox“ paskyra

Pirmas dalykas, kurį turėsime nustatyti pasirinktinį „Mapbox“ stilių, yra turėti paskyrą. Aš neketinu jūsų apžiūrėti to proceso, bet galite pereiti į „Mapbox“ svetainę, kurioje galite nemokamai užsiregistruoti: mapbox.com

Naujo pasirinkto stiliaus kūrimas

„Mapbox“ sukurti naują stilių nėra taip sunku, kaip atrodo. Jei norite kažko unikalaus, tai gali būti labai sudėtinga, kad galėtume pradėti, galime nukopijuoti vieną iš numatytųjų „Mapbox“ stilių.

Pirmiausia eikite į „Mapbox“ studijos informacijos suvestinę spustelėję paskyros nuorodą viršutiniame dešiniajame kampe, kai esate prisijungę.

Kai būsime „Studio“ informacijos suvestinėje, norime pasirinkti mygtuką „Naujas stilius“.

Spustelėjus mygtuką pasirodys modalas, leidžiantis pasirinkti šabloną. Čia galite pasirinkti viską, ko norite, bet aš pasirenku monochrominį su tamsios spalvos variantu. Pasirinkę šabloną spustelėkite mygtuką Tinkinti.

Ir dabar mes esame įtraukti į savo pritaikymo vartotojo sąsają.

From here, you can really do what you’d like. There are a ton of options to customize your map. It’s a little complex to try to dig in here, but Mapbox provides some resources to try to help you get productive.

Generating a Mapbox token

Once you’re happy with your new style and everything’s published, we want to generate a token that we’ll use for providing access to our Map.

Head on over to the Account section of the Mapbox dashboard.

Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name, that way if you ever blow past the free tier of Mapbox, you’ll be able to track your usage.

Additionally, it’s best to keep a separate token for each application, that way you can easily rotate an individual key, without having to update every application using it.

Once you click Create a token, you can set up the key how you’d like, with the scopes and permissions you choose, but for our purposes, you can leave all of the Public scopes checked for our map, which they do by default.

Configuring our custom endpoint

For this tutorial, we’re going to use Mapbox’s Static Tiles service.

Our endpoint will look like the following:

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

There are a few parameters here we need to understand:

  • username: this will be your Mapbox account’s username
  • style_id: this will be the ID of the style you created before
  • z, x, y: these are parameters that Leaflet programmatically swaps out, so we want to leave them as is
  • access_token: this is the Mapbox key you created above

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
  • Kaip sukurti vasaros kelionių žemėlapių programą su „Gatsby“ ir „Leaflet“
  • Kaip sukurti savo Kalėdų Senelio stebėjimo priemonę naudojant „Gatsby“ ir „React Leaflet“
  • Kaip sukurti žemėlapių programą „Reaguokite“ lengvai su „Leaflet“

Sekite mane, norėdami sužinoti daugiau „Javascript“, „UX“ ir kitų įdomių dalykų!

  • ? Sekite mane „Twitter“
  • ? ️ Užsiprenumeruokite „My Youtube“
  • ✉️ Prisiregistruokite gauti mano naujienlaiškį