Интеграция картографических сервисов в React
Руководство по React Mapbox
В течение многих лет в индустрии разработки ведутся нескончаемые споры о том, какой поставщик карт лучше всего. Давайте посмотрим, кто победит в игре «Game of Map Providers».
Google Maps SDK долгое время оставался лидером из-за своей надежности, но ситуация начала меняться, поскольку цена была намного выше, чем у конкурентов, и не было такого же уровня настраиваемости, как Mapbox или бесплатный Leaflet.
Когда вы выбираете картографический сервис, вы должны учитывать несколько факторов:
- цена ($ / загрузка карты или запрос API)
- надежность (насколько точен и надежен сервис)
- настраиваемость (доступный уровень персонализации, цветовая палитра или маркеры)
- опыт разработчика (насколько легко интегрировать и развивать в приложении)
- другие сервисы, такие как поиск (также известный как геокодирование), навигация и другие.
1. Почему Mapbox?
Ранее в этом году я разработал полнофункциональное приложение для повышения осведомленности о краже велосипедов с помощью Mapbox и React, и мне понравилось, насколько оно простое в использовании и настройке. Проверьте это на bike-theft-map.bikmo.com.
В море приложений, которые в основном используют Google Maps, вы можете легко выделиться, воспользовавшись многочисленными настраиваемыми функциями Mapbox через весь спектр услуг.
Используя Mapbox Studio, вы можете создать карту темного режима своей мечты и даже интегрировать цветовую палитру определенного бренда до цвета листьев на деревьях (вроде как).
Более того, бесплатный план позволяет загружать карты до 100 тысяч в месяц, что очень хорошо для разработки и даже небольших приложений.
2. Что мы строим?
Мы создадим приложение NextJS для ветеринарной клиники Нью-Йорка, с его помощью люди смогут просматривать маркеры для каждого места на карте и, нажав на него, заполнить форму с данными о своем питомце перед тем, как отнести его туда.
3. Создание собственного стиля карты.
После создания учетной записи мы можем посетить Mapbox Studio и создать новый стиль, нажав кнопку Новый стиль.
Выберите базовый стиль, который мы затем сможем настроить с помощью фирменных цветов нашей ветеринарной клиники.
Давайте выберем монохромный стиль, так как он требует меньше всего времени на настройку.
В меню левой боковой панели под цветами мы можем настроить цвет (# 00A896).
Чтобы опубликовать изменения, мы должны нажать крошечную кнопку «Опубликовать» в правом верхнем углу. Теперь все, что нам нужно, это URL-адрес стиля для использования на нашем веб-сайте, который мы можем найти в правом верхнем углу.
4. Mapbox в React
Поскольку мы создаем это приложение на NextJS, мы можем использовать либо официальную библиотеку Vanilla JS Mapbox GL JS, либо отличный React Wrapper react-map-gl. Я воспользуюсь последним, так как он отлично работает в нашем случае.
Давайте создадим новый проект NextJS и установим зависимости:
Давайте сначала расширим компоненты, связанные с картой, из react-map-gl и создадим несколько пользовательских в папке components /.
В components / pin / index.js мы добавляем пользовательский значок булавки карты внутри маркера (отметьте этот CodeSandbox):
В components / marker / index.js мы расширяем компонент-маркер:
И, наконец, в components / popup / index.js для всплывающего окна формы
Теперь мы можем продолжить, добавив карту и бизнес-логику для отображения маркеров и всплывающих окон. Это будет включать минимальный стиль и состояние области просмотра карты, чтобы его можно было легко обновить для использования API для маркеров или отправки формы.
И это все, что нам нужно для разработки приложения React на основе карт с MapBox. Есть еще много вещей, которые можно сделать с помощью этого замечательного инструмента, например, тепловые карты, переходы карт, анимация GeoJSON и другие.
Если вы хотите проверить этот демонстрационный проект (замените mapboxApiAccessToken и mapStyle в index.js), вот вам CodeSandbox.
Ознакомьтесь с примерами официального сайта или воспользуйтесь этим замечательным инструментом на основе Mapbox, чтобы повысить осведомленность о краже велосипедов.
Надеюсь, вам понравилось это короткое руководство по интеграции картографических сервисов с Mapbox и NextJS, и я буду рад, если вы поставите ему!
Другие мои работы можно найти на alexstreza.dev.
Больше контента на plainenglish.io
