Обзор библиотек карт React + руководство по отладке установки react-leaflet в полном объеме

Пока я искал несколько хороших библиотек карт для React, мое внимание привлекла react-leaflet.
react-leaflet — это библиотека react, которая является полной переработкой leaflet, которая является библиотекой JavaScript с открытым исходным кодом для мобильных интерактивных карт.

Библиотеки карт React

Помимо react-leaflet, у меня было еще несколько вариантов. Почему я не решил использовать эти библиотеки?

1. React Simple Maps
   Отличная библиотека в целом. Она очень проста в использовании и имеет достойную документацию с некоторыми примерами. Кроме того, как следует из названия, она очень легкая. Однако она не подходит для моей цели — отображения точного местоположения с помощью маркеров. Да, это можно сделать с помощью React Simple Maps, но мне пришлось бы переделывать весь шаблон карты, что не стоило затраченных усилий и времени, в то время как уже существуют библиотеки, в которых есть карты с отличными шаблонами по умолчанию.

2. React Mapbox GL
   Достойная библиотека, но не рекомендуется. Оригинальная библиотека Mapbox хорошо сделана и имеет отличные примеры, но переписанная для React не очень хорошо поддерживается. У нее почти нет примеров, и в сети не так много ресурсов. Документация также не является адекватной. Если вы не продвинутый, опытный разработчик, это не лучший вариант.

3. React Google Maps
   Казалось бы, все отлично. Однако у меня не было возможности по-настоящему испытать его, поскольку активация API-ключа требует подписки. Если вы можете позволить себе подписку, то, безусловно, воспользуйтесь ею!

Почему именно react-leaflet?

Я бы не сказал, что react-leaflet — самая надежная библиотека по сравнению с конкурентами (например, react google maps). Тем не менее, в ней есть немного всего, и этого было достаточно для моих целей.

• Хороший шаблон карты. Под шаблоном я имею в виду фактический дизайн карты. Мне нужна была карта с точными аннотациями улиц и хорошей цветовой гаммой. Я бы сказал, что он не дотягивает до Google Maps API или Mapbox GL, когда дело доходит до фактического дизайна, но он сделал свою работу.

• Хорошая документация с хорошими примерами. Честно говоря, документация не самая лучшая, но она была достаточно приличной, чтобы с ней можно было работать. Имеющимся примерам действительно не хватает объяснений, но сам код довольно легко понять даже с первого взгляда. Несмотря на то, что качество документации и примеров не было первостепенным, поскольку мой второй по привлекательности вариант, react mapbox gl, сильно отставал, когда дело доходило до примеров, мне пришлось выбрать react-leaflet.

Установка

К сожалению, даже несмотря на свои плюсы, react-leaflet имеет не самую лучшую документацию для новичков. Даже начиная с установки и настройки карты, есть много того, что не упоминается в документации. Поэтому я решил предоставить руководство по отладке установки для потенциальных проблем/глюков.

Установка
Если у вас есть время, прочитайте страницу установки, но если нет, просто выполните эти команды в терминале. Если у вас даже нет приложения react, сначала запустите приложение react.

npm install leaflet
******install react-leaflet after installing leaflet******
npm install react-leaflet

После установки этих модулей импортируйте основные компоненты.

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

Настройка
Скопируйте и вставьте следующий код в ваше приложение react, чтобы отобразить простую карту с маркером.

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>

Если у вас все работает нормально, отлично!
Но если вы столкнулись с какой-либо из этих проблем, прочитайте руководство по отладке ниже.

Руководство по отладке

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

 ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

Вот решение.
Откройте ваш package.json и измените

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

на

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

Карта не отображается должным образом

• Решение 1

Добавьте следующую строку в ваш код.

import 'leaflet/dist/leaflet.css';

Не работает? Решение 2 должно сработать!

• Решение 2

Перейдите к вашему файлу index.html.
В <header> добавьте следующий код.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

Добавьте следующий код в App.css.

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

Если кто-то столкнется с другими проблемами на этапе установки, я буду готов помочь. Пожалуйста, опишите вашу проблему в разделе комментариев. Счастливой отладки!