Како поставити прилагођени Мапбок основни стил са Реацт Леафлет и Леафлет Гатсби Стартер

Израда мапа може бити прилично моћна, али често заглавите у опцијама отвореног кода за слике мапа које можда неће помоћи у читљивости ваших података. Како можемо да искористимо АПИ-је плочица Мапбок-а како бисмо додали прилагођену основну карту нашој апликацији Реацт Леафлет?

  • Шта ћемо градити?
  • Шта је Мапбок?
  • 1. део: Стварање прилагођеног стила Мапбок
  • 2. део: Додавање прилагођеног слоја ТилеЛаиер у Реацт Леафлет
  • Део 3: Додавање прилагођене основне мапе Гатсби Стартер Леафлет-у
  • Обезбеђење кључа Мапбок
  • Желите да сазнате више о мапама?

Шта ћемо градити?

Прошетаћемо кроз стварање новог основног стила Мапбок на нашем Мапбок налогу. Једном створени, користићемо њихов Мап АПИ да бисмо додали прилагођену основну карту нашој апликацији Реацт Леафлет.

За нашу мапу ћемо користити овај летак Гатсби Стартер који сам креирао и који ће вам омогућити да лако завртите нову апликацију за мапирање. Пре него што то додамо, пропратићу вас како да га додате користећи само компоненте Реацт Леафлет.

Апликација за мапирање?

Аха! Мапе се користе широм света за проучавање скупова података за географске локације. Они су важан алат за научнике и друге који покушавају да помогну свету.

Ако желите да сазнате више о изради мапе и додавању података на њу, прво можете погледати неке од мојих других чланака, као што је стварање мапе Цоронавирус-а (ЦОВИД-19) или карте Летњег путовања, као и мало инспирација о томе зашто свако може да мапира.

Шта је Мапбок?

Мапбок је платформа за мапирање која омогућава својим купцима да креирају прилагођена решења за мапирање. Они такође користе разне АПИ-је који пружају моћне могућности за изградњу карактеристика мапе.

У наше сврхе користићемо њихов Мап АПИ, посебно њихов АПИ за статичке плочице, да бисмо послужили прилагођени стил мапе који креирамо.

1. део: Стварање прилагођеног стила Мапбок

Да бисмо добили изглед и осећај који желимо за своју мапу, важно је да имамо основну карту која помаже да се наши подаци представљају без ометања. Осим тога, понекад је забавно имати прилагођену мапу.

Мапбок рачун

Прва ствар која ће нам требати да подесимо наш прилагођени Мапбок стил је да имамо налог. Нећу вас водити кроз тај процес, али можете да одете на веб страницу Мапбока где се можете бесплатно пријавити: мапбок.цом

Стварање новог прилагођеног стила

Стварање новог стила у Мапбок-у није тако тешко као што звучи. Иако може постати заиста сложено ако желите нешто јединствено, за почетак можемо копирати један од задатих стилова Мапбока.

Прво идите на контролну таблу Мапбок-а Студио кликом на везу вашег налога у горњем десном углу када сте пријављени.

Када смо на нашој контролној табли Студија, желимо да изаберемо дугме Нови стил.

Након клика на дугме, појавит ће се модал који вам омогућава да изаберете образац. Овде можете да изаберете шта год желите, али ја ћу изабрати Монохром са варијацијом Дарк. А након што одаберете свој образац, кликните на дугме Прилагоди.

И сада смо ушли у наш кориснички интерфејс за прилагођавање.

Одавде заиста можете радити шта желите. Постоји мноштво опција за прилагођавање мапе. Мало је сложено покушати овде копати, али Мапбок нуди неке ресурсе који ће вам помоћи да постанете продуктивнији.

Генерирање Мапбок токена

Када будете задовољни својим новим стилом и све буде објављено, желимо да генеришемо токен који ћемо користити за омогућавање приступа нашој мапи.

Идите на одељак Рачун на контролној табли Мапбок-а.

Мапбок вам пружа „подразумевани“ токен који можете користити у својим апликацијама. Слободно можете да користите ово, али препоручујем вам да направите нови токен који можете да дате јединственим именом, па ћете тако, ако икад прођете бесплатни ниво Мапбок-а, моћи да пратите употребу.

Поред тога, најбоље је задржати засебан токен за сваку апликацију, на тај начин можете лако ротирати појединачни кључ, без потребе за ажурирањем сваке апликације која га користи.

Једном када кликнете на Цреате токен, можете подесити кључ како желите, са опсезима и дозволама које одаберете, али у наше сврхе можете оставити све јавне опсеге означенима за нашу мапу, што они подразумевано раде .

Конфигурисање наше прилагођене крајње тачке

За ово упутство користићемо услугу Мапбок Статиц Тилес.

Наша крајња тачка ће изгледати овако:

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

Овде морамо разумети неколико параметара:

  • корисничко име: ово ће бити корисничко име вашег Мапбок рачуна
  • стиле_ид: ово ће бити ИД стила који сте раније креирали
  • з, к, и: то су параметри које Летак програмски замењује, па желимо да их оставимо онакве какви јесу
  • аццесс_токен: ово је кључ Мапбок-а који сте горе креирали

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
  • Како створити апликацију за мапирање летњег путовања путем Гатсби-а и Леафлет-а
  • Како створити сопствени пратилац Деда Мраза помоћу летака Гатсби и Реацт
  • Како направити апликацију за мапирање у Реацт на лак начин помоћу летака

Пратите ме за још Јавасцрипта, УКС-а и других занимљивих ствари!

  • ? Запрати ме на твитеру
  • ? Претплатите се на мој Иоутубе
  • Уп Пријавите се за мој билтен