Як налаштувати власний стиль базової карти Mapbox за допомогою React Leaflet та Leaflet Gatsby Starter

Створення карт може бути досить потужним, але часто ви застрягли в опціях з відкритим кодом для зображень карти, які можуть не допомогти прочитати ваші дані. Як ми можемо використати API-інтерфейси Mapbox для додавання власної базової карти до нашого React Leaflet?

  • Що ми будемо будувати?
  • Що таке Mapbox?
  • Частина 1: Створення власного стилю Mapbox
  • Частина 2: Додавання власного TileLayer до React Leaflet
  • Частина 3: Додавання власної базової карти до брошури Gatsby Starter
  • Захист ключа Mapbox
  • Хочете дізнатись більше про карти?

Що ми будемо будувати?

Ми пройдемося по створенню нового базового стилю Mapbox в нашому обліковому записі Mapbox. Після створення ми збираємося використовувати їх Map API, щоб додати власну базову карту до нашого React Leaflet.

Для нашої карти ми будемо використовувати цей листівку Gatsby Starter, яку я створив, що дозволить вам легко закрутити нову програму картографування. Перш ніж ми це розгорнемо, я розповім вам, як додати його, використовуючи лише компоненти React Leaflet.

Додаток для картографування?

Так! Карти використовуються у всьому світі для вивчення наборів даних для географічного розташування. Вони є важливими інструментами для вчених та інших, хто намагається допомогти світові.

Якщо ви хочете дізнатись більше про побудову карти та додавання до неї даних, ви можете спочатку ознайомитися з деякими іншими моїми статтями, такими як створення карти коронавірусу (COVID-19) або карти літньої дорожньої поїздки, а також трохи натхнення про те, чому кожен може скласти карту.

Що таке Mapbox?

Mapbox - це картографічна платформа, яка дозволяє своїм клієнтам створювати власні картографічні рішення. Вони також використовують різноманітні API, які надають потужні можливості для побудови функцій карти.

Для наших цілей ми будемо використовувати їх Map API, зокрема їх Static Tiles API, щоб обслуговувати власний стиль карти, який ми створюємо.

Частина 1: Створення власного стилю Mapbox

Для того, щоб виглядати і відчувати, що ми хочемо для нашої карти, важливо мати базову карту, яка допоможе зробити наші дані представленими без відволікань. Крім того, іноді цікаво мати власну карту.

Обліковий запис Mapbox

Перше, що нам знадобиться для налаштування власного стилю Mapbox - це мати обліковий запис. Я не збираюся проводити вас через цей процес, але ви можете перейти на веб-сайт Mapbox, де ви можете зареєструватися безкоштовно: mapbox.com

Створення нового нестандартного стилю

Створити новий стиль у Mapbox не так складно, як здається. Хоча це може стати дуже складним, якщо ви хочете чогось унікального, для початку ми можемо скопіювати один із стилів Mapbox за замовчуванням.

Спочатку перейдіть до інформаційної панелі Studio Mapbox, натиснувши посилання на ваш рахунок у верхньому правому куті, коли ви ввійшли в систему.

Опинившись на нашій інформаційній панелі Studio, ми хочемо вибрати кнопку «Новий стиль».

Після натискання кнопки з’явиться модаль, що дозволить вибрати шаблон. Тут ви можете вибрати все, що завгодно, але я збираюся вибрати монохромний із варіацією темного. І після того, як ви вибрали шаблон, натисніть кнопку Налаштувати.

А тепер ми потрапили в наш інтерфейс налаштування.

Звідси ви дійсно можете робити те, що хочете. Існує маса варіантів налаштування вашої карти. Спробувати тут копатись трохи складно, але Mapbox надає деякі ресурси, які допоможуть вам отримати продуктивність.

Створення маркера Mapbox

Після того, як ви будете задоволені своїм новим стилем і всім опублікованим, ми хочемо створити маркер, який ми використовуватимемо для забезпечення доступу до нашої Карти.

Перейдіть до розділу Обліковий запис на інформаційній панелі Mapbox.

Mapbox надає вам маркер “за замовчуванням”, який ви можете використовувати у своїх програмах. Ви можете вільно користуватися цим, але я рекомендую створити новий маркер, який ви можете надати унікальне ім'я. Таким чином, якщо ви коли-небудь пройдете повз безкоштовний рівень Mapbox, ви зможете відстежувати ваше використання.

Крім того, найкраще зберігати окремий маркер для кожної програми, щоб ви могли легко повертати окремий ключ, не оновлюючи кожну програму, використовуючи його.

Після натискання кнопки Створити маркер ви можете налаштувати ключ за власним бажанням із вибраними вами сферами та дозволами, але для наших цілей ви можете залишити всі загальнодоступні сфери перевіреними на нашій карті, що вони роблять за замовчуванням .

Налаштування нашої власної кінцевої точки

У цьому підручнику ми будемо використовувати службу статичної плитки Mapbox.

Наша кінцева точка виглядатиме так:

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

Тут потрібно зрозуміти кілька параметрів:

  • ім'я користувача: це буде ім'я користувача вашого облікового запису Mapbox
  • style_id: це буде ідентифікатор стилю, який ви створили раніше
  • z, x, y: це параметри, які Leaflet програмно замінює, тому ми хочемо залишити їх як є
  • access_token: це ключ Mapbox, який ви створили вище

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