Izrada karata može biti prilično moćna, ali često ostanete pri otvorenim opcijama za slike na karti koje možda neće pomoći u čitljivosti vaših podataka. Kako možemo iskoristiti API-je pločica Mapboxa za dodavanje prilagođene osnovne karte u našu React Leaflet aplikaciju?
- Što ćemo graditi?
- Što je Mapbox?
- 1. dio: Stvaranje prilagođenog stila Mapbox
- Dio 2: Dodavanje prilagođenog sloja TileLayer u React Leaflet
- Dio 3: Dodavanje prilagođene osnovne karte Gatsby Starter Letak
- Osiguravanje ključa Mapbox
- Želite li saznati više o kartama?
Što ćemo graditi?
Krenut ćemo kroz stvaranje novog osnovnog stila Mapbox na našem Mapbox računu. Jednom stvoreni, koristit ćemo njihov Map API kako bismo dodali prilagođenu osnovnu kartu našoj aplikaciji React Leaflet.
Za našu kartu koristit ćemo ovaj letak Gatsby Starter koji sam stvorio i koji će vam omogućiti da lako zavrtite novu aplikaciju za mapiranje. Prije nego što to dodamo, provest ću vas kroz to kako to dodati samo pomoću komponenata React Leaflet.
Aplikacija za mapiranje?
Da! Karte se koriste širom svijeta za proučavanje skupova podataka za zemljopisne lokacije. Oni su važan alat za znanstvenike i druge koji pokušavaju pomoći svijetu.
Ako želite saznati više o izradi karte i dodavanju podataka na nju, prvo možete pogledati neke od mojih drugih članaka, poput izrade karte Coronavirus-a (COVID-19) ili karte za ljetno putovanje, kao i malo nadahnuće o tome zašto svako može mapirati.
Što je Mapbox?
Mapbox je platforma za mapiranje koja svojim kupcima omogućuje stvaranje prilagođenih rješenja za mapiranje. Oni također koriste razne API-je koji pružaju moćne mogućnosti za izgradnju značajki karte.
Za naše svrhe koristit ćemo njihov Map API, posebno njihov API za statičke pločice, kako bi poslužili prilagođenom stilu karte koji kreiramo.
1. dio: Stvaranje prilagođenog stila Mapbox
Da bismo dobili izgled i osjećaj koji želimo za svoju kartu, važno je imati osnovnu kartu koja pomaže da se naši podaci predstavljaju bez ometanja. Osim toga, ponekad je zabavno imati prilagođenu kartu.
Mapbox račun
Prvo što ćemo trebati za postavljanje vlastitog prilagođenog stila Mapbox je imati račun. Neću vas voditi kroz taj postupak, ali možete prijeći na web mjesto Mapboxa gdje se možete besplatno prijaviti: mapbox.com
Stvaranje novog prilagođenog stila
Stvaranje novog stila u Mapboxu nije tako teško kao što zvuči. Iako može postati jako složeno ako želite nešto jedinstveno, za početak možemo kopirati jedan od zadanih stilova Mapboxa.
Prvo se prijavite na Mapboxovu nadzornu ploču Studija klikom na vezu računa u gornjem desnom kutu.
Kad smo na našoj nadzornoj ploči Studija, želimo odabrati gumb Novi stil.
Nakon klika na gumb pojavit će se modal koji omogućuje odabir predloška. Ovdje možete odabrati što god želite, ali ja ću odabrati Monochrome s varijacijom Dark. A nakon što odaberete predložak, kliknite gumb Prilagodi.
I sada smo ušli u naše korisničko sučelje za prilagodbu.
Odavde stvarno možete raditi što želite. Postoji mnoštvo opcija za prilagodbu vaše karte. Malo je složeno pokušati ovdje kopati, ali Mapbox nudi neke resurse koji će vam pomoći da postanete produktivniji.
Generiranje tokena Mapbox
Kad budete zadovoljni svojim novim stilom i sve bude objavljeno, želimo generirati token koji ćemo koristiti za pružanje pristupa našoj Karti.
Idite na odjeljak Račun na nadzornoj ploči Mapboxa.
Mapbox vam nudi "zadani" token koji možete koristiti u svojim aplikacijama. Možete to slobodno koristiti, ali preporučujem stvaranje novog tokena koji možete dati jedinstveni naziv, na taj način, ako ikad prođete besplatni nivo Mapboxa, moći ćete pratiti vašu upotrebu.
Uz to, najbolje je zadržati zaseban token za svaku aplikaciju, na taj način možete jednostavno rotirati pojedinačni ključ, bez potrebe za ažuriranjem svake aplikacije koja ga koristi.
Jednom kada kliknete Stvori token, možete postaviti ključ kako želite, s opsezima i dopuštenjima koja odaberete, ali za naše svrhe možete ostaviti sve javne opsege provjerenima za našu kartu, što oni rade prema zadanim postavkama .
Konfiguriranje naše prilagođene krajnje točke
Za ovaj ćemo vodič koristiti uslugu Mapbox Static Tiles.
Naša će krajnja točka izgledati ovako:
//api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token} Ovdje moramo razumjeti nekoliko parametara:
- korisničko ime: ovo će biti korisničko ime vašeg Mapbox računa
- style_id: ovo će biti ID stila koji ste stvorili prije
- z, x, y: to su parametri koje Letak programski zamijeni, pa ih želimo ostaviti kao što jesu
- access_token: ovo je tipka Mapbox koju ste gore stvorili
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 On Twitter
- ?️ Subscribe To My Youtube
- ✉️ Sign Up For My Newsletter