Как отобразить карту Mapbox и геокодер — Учебное пособие по Mapbox/React, часть 1

Примечание. Изначально опубликовано на сайте marystarck.com

В этом учебном пособии по React, состоящем из нескольких частей, будет рассказано, как использовать Mapbox для:

  • показать карту
  • искать адрес
  • добавить маркеры
  • отображать всплывающее окно при нажатии на маркер

и даже удаление маркера.

Чтобы не перегружать людей кучей кода, я разделю его на три части:

Мы будем использовать приложение create-react-app для нашего базового приложения React и библиотеки react-map-gl и react-mapbox-gl-geocoder для нашей карты и геокодера соответственно. Как вариант, я буду использовать reactstrap для стилизации (если вы не знакомы, reactstrap — это Bootstrap для React).

1. Создайте проект и установите зависимости

Во-первых, мы начнем с настройки нашего проекта.

npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-mapbox-gl-geocoder bootstrap reactstrap
npm start

2. Клавиша карты

Чтобы использовать Mapbox, вам понадобится ключ API. Перейдите на https://www.mapbox.com/ и нажмите Войти.

Под формой входа нажмите «Зарегистрироваться для Mapbox». После того, как вы закончите регистрацию, вы должны попасть в личный кабинет. Если вам не был предоставлен токен автоматически, вы можете создать его, нажав Создать токен.

3. Карта

Теперь, когда у нас есть ключ API, давайте начнем программировать. Во-первых, мы сосредоточимся на простом отображении карты благодаря библиотеке react-map-gl. Он поставляется с компонентом ReactMapGL, который принимает ряд реквизитов.

Очевидным является ваш ключ API, но он также включает в себя:

  • окно просмотра (координаты широты/долготы для центра карты + масштабирование)
  • mapStyle (Mapbox предлагает ряд различных стилей для своей карты, включая улицы, а также светлый, темный, спутниковый и т. д.)
  • onViewportChange (когда пользователь перетаскивает карту, область просмотра обновляется)

Я также собираюсь включить ширину и высоту, чтобы лучше отобразить их.

После сохранения вы должны увидеть карту с центром в вашем окне просмотра. Довольно просто!

4. Геокодер

Давайте продолжим, добавив наш геокодер. И снова мы получаем хороший готовый компонент благодаря react-mapbox-gl-geocoder.

import Geocoder from 'react-mapbox-gl-geocoder';

Как и ReactMapGL, он использует ваш ключ Mapbox API и область просмотра. Он также принимает queryParams, что позволяет мне сузить результаты, возвращаемые до определенной страны (для этого руководства предположим, что меня интересуют только канадские адреса).

<Geocoder                
  mapboxApiAccessToken={mapboxApiKey}                
  onSelected={this.onSelected}                
  viewport={viewport}                
  hideOnSelect={true}                
  value=""                
  queryParams={params}            
/>

Кроме того, он принимает функцию onSelected, которую в нашем случае мы хотим, чтобы она центрировала нашу карту по выбранному нами адресу.

onSelected = (viewport, item) => {      
  this.setState({
    viewport
  })
}

Когда вы выбираете адрес, он возвращает область просмотра и выбранный элемент. При обновлении нашего состояния до этого нового окна просмотра карта автоматически переместится в это новое место.

Это конечный результат:

Вывод

После сохранения у вас будет карта и геокодер. Это последнее позволяет вам искать адреса и при выборе обновлять карту, чтобы центрировать эту точку.

Это очень хорошее начало. Мы продолжим во второй части, добавив маркеры на наши карты.

Если вам понравилась статья, вы можете подписаться на меня в Twitter.