Mapbox API - отличный инструмент для создания пользовательских интерактивных карт. Однако интеграция Mapbox в более крупное приложение поначалу может показаться сложной задачей - лично я обнаружил, что трачу некоторое время на поиск ресурсов за пределами документации, чтобы включить ключевые функции в свое приложение React. Надеюсь, эта статья будет последней, которую вы когда-либо прочитали! Здесь я расскажу, как построить интерактивную карту с использованием двух библиотек, react-map-gl и react-map-gl-geocoder. В частности, я расскажу, как: 1) визуализировать карту, 2) включить геокодер, 3) создать маркеры и 4) добавить всплывающие окна.

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

Для начала создадим проект с помощью Create React app и установим react-map-gl и react-map-gl-geocoder. Вставьте в свой терминал следующее:

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

2. Получите токен API Mapbox.

Далее мы должны создать учетную запись для Mapbox. Если вы не перенаправляетесь на панель управления с токеном автоматически, создайте его, нажав синюю кнопку Создать токен.

3. Создайте карту

Теперь, когда у нас есть токен API, приступим к написанию кода! В дальнейшем я буду использовать компоненты класса (если вы предпочитаете вместо этого использовать компоненты без сохранения состояния, ознакомьтесь с документацией). Чтобы построить карту, мы воспользуемся преимуществом компонента ReactMapGl. предоставляется react-map-gl. Он принимает ряд свойств, включая токен API, viewport, mapStyle и onViewportChange.

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

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

4. Добавьте геокодер.

Затем давайте добавим на карту геокодер с помощью react-map-gl-geocoder. Библиотека предоставляет нам компонент Geocoder, который принимает несколько свойств, включая токен API, mapRef, onResult и onViewportChange , позиция и страны. Импортируйте стиль и добавьте компонент Geocoder в ReactMapGl.

Следующие описания взяты из документации:

  • mapRef: ссылка на компонент карты response-map-gl.

Чтобы добавить эту опору, определите переменную (как в примере ниже). Затем добавьте ключ ref в компонент ReactMapGl.

mapRef = React.createRef()
  • onViewportChange: передаются обновленные значения области просмотра после выполнения запроса.
  • position: положение на карте, к которому будет добавлен элемент управления геокодером. Допустимые значения: "top-left", "top-right", "bottom-left" и "bottom-right".
  • страны: список кодов стран, разделенных запятыми, для ограничения результатов до указанной страны или стран.

Ознакомьтесь с документацией, чтобы узнать о дополнительных возможностях настройки!

После передачи свойств компоненту Geocoder и сохранения файла вы должны увидеть панель поиска на своей карте. Вы можете ввести местоположение и повторно центрировать карту по его координатам после выбора!

4. Создавайте и отображайте маркеры на своей карте.

Теперь перейдем к маркерам. Импортируйте компонент Marker из react-map-gl. Единственные обязательные реквизиты для Marker - это широта и долгота. Чтобы добавить маркер, просто вставьте компонент с широтой и долготой внутри родительского компонента следующим образом:

import ReactMapGl, {Marker} from 'react-map-gl'
...
<ReactMapGl
...
/>
<Marker
latitude={insert latitude}
longitude={insert longitude}
>
  [insert image or custom marker]
</Marker>
</ReactMapGl>
...

Отрисовка маркера с жестко заданными значениями - это круто, но мы хотим сделать карту интерактивной. Сохраняя информацию о местоположении в нашем местном штате, мы сможем создавать маркеры при поиске и выборе адресов.

this.state = {
  ...
  currMarker: null,
  markers: []
}

Компонент Geocoder принимает свойство onResult, в котором мы можем передать функцию, которая будет выполняться, когда выбран вход геокодера. Мы создадим функцию handleResult, которая обновляет значения currentMarker и передает ее в onResult (не забудьте привязать ее внутри конструктора!).

handleResult(result) {
  this.setState({
    currMarker: {
      name: result.result.place_name,
      latitude: result.result.center[1],
      longitude: result.result.center[0]
    }
  })
}

Затем мы создадим функцию для передачи в атрибут события кнопки onClick, чтобы сохранить currentMarker на нашей карте! Эта функция обновит состояние, поместив currentMarker в массив maps.

addMarker() {
  const {currMarker} = this.state
  this.setState(prevState => ({
    markers: [...prevState.markers, currMarker],
    currMarker: null
  }))
}

Чтобы окончательно отобразить маркеры для местоположений, сохраненных в нашем массиве maps, просто сопоставьте (без каламбура!) Массив внутри компонента карты, передав соответствующие свойства для каждого. Ваш код должен выглядеть, как на примере ниже:

С помощью приведенного выше кода вы сможете добавлять маркеры на свою карту, выбрав местоположение и нажав кнопку добавления!

4. Создавайте всплывающие окна.

И последнее, но не менее важное: мы создадим всплывающие окна для маркеров на нашей карте. Опять же, мы будем использовать встроенный компонент Popup, предоставляемый react-map-gl. Он принимает множество свойств - для наших целей мы включим следующие: mapRef, latitude, longitude, closeButton , closeOnClick и onClose.

  • closeButton: (по умолчанию: true) Если true, в правом верхнем углу всплывающего окна появится кнопка закрытия.
  • closeOnClick: (по умолчанию: true) Если true, всплывающее окно закроется при щелчке по карте.
  • onClose: обратный вызов, когда пользователь закрывает всплывающее окно.

Чтобы отображать всплывающее окно при нажатии на маркер, давайте добавим selectedMarker в наше локальное состояние и добавим два метода экземпляра, handleMarkerClick и handleClose . Метод handleMarkerClick вызывается при щелчке по маркеру и обновляет selectedMarker, чтобы содержать информацию об этом маркере. Метод handleClose будет вызываться при нажатии кнопки закрытия во всплывающем окне и обновит handleMarkerClick до null.

Вот окончательный код:

После сохранения кода вы сможете щелкнуть маркер на карте, чтобы увидеть всплывающее окно!

Поздравляем, теперь у вас под рукой интерактивная карта! 🎉 Это только начало - попробуйте реализовать больше функций, чтобы добавить на карту больше уровней сложности. Спасибо за чтение и не стесняйтесь обращаться с любыми вопросами, комментариями или проблемами!

использованная литература

Https://github.com/facebook/create-react-app

Https://docs.mapbox.com/mapbox-gl-js/api/

Https://visgl.github.io/react-map-gl/docs/get-started/get-started

Https://www.npmjs.com/package/react-map-gl-geocoder