Если вы похожи на меня и хотите использовать какую-то карту в своем приложении, но не хотите использовать Google Maps по умолчанию, MapBoxGL готов ответить. В этом блоге я собираюсь изложить основные шаги, которые необходимо выполнить, чтобы отобразить карту на экране и реализовать базовые функции. Этот блог был вдохновлен временем, потраченным на создание Bodega Cat Pokedex, и желанием, чтобы у меня был простой учебник, несмотря на то, что документация была очень хорошей.

Как и в случае с большинством API, вашим первым шагом будет регистрация, чтобы получить токен доступа. Я лично использую dotenv и храню свой токен в gitignore, чтобы предотвратить любые интернет-махинации или неожиданные счета - я настоятельно рекомендую вам никогда публично не передавать какие-либо токены на GitHub. Это было бы программным эквивалентом создания связки копий ключей от вашей квартиры, а затем бросания их в большую кучу на улице возле вашего дома. Плохая идея.

После того, как вы получили и спрятали свой токен, следующим шагом будет выбор стиля вашей карты. Опять же, MapBox значительно упрощает эту задачу, предоставляя список готовых таблиц стилей, которые мы можем взять и добавить в наше приложение. Они варьируются от аэрофотосъемки до сильно стилизованных тематических карт с карандашными набросками. На изображении выше я использую настроенную таблицу стилей на основе таблицы Le Shine, предоставленной MapBox.

После того, как вы выбрали таблицу стилей и получили токен, пора вывести карту на экран. Мы собираемся начать с App.js и импортировать React, useState и ReactMapGL в верхней части нашего файла, прежде чем писать что-либо еще. Затем нам нужно настроить область просмотра и дать ему возможность (или не дать ему возможности) перемещаться по экрану и позволить пользователям взаимодействовать. Поскольку мы работаем с картографированием, мы используем широту, долготу и масштаб, чтобы определить, где находится наш начальный центр нашей карты и какую часть окружающего пространства вы можете видеть. Все это устанавливается внутри хуков useState - не вдаваясь в подробности о хуках, потому что есть много лучших блогов, объясняющих их, useState позволяет нам «подключаться» к состоянию и использовать его внутри нашего функционального компонента. Если вы уже добавили компонент ‹ReactMapGL› в метод рендеринга приложения, на этом этапе вы должны увидеть карту! Если вы скопировали координаты, которые я добавил в приведенном выше примере, вы будете сосредоточены на ДУМБО в Нью-Йорке. Не забудьте установить onViewportChange внутри вашего фактического компонента карты, чтобы ваша карта автоматически обновлялась при перемещении по миру. Ниже вы можете увидеть, как выглядел метод рендеринга моего приложения - большая часть логики приложения находится в контейнере, где мы извлекаем список винных погребов и создаем компоненты ‹Marker› и ‹Popup›, которые повсеместно используются в картографических приложениях.

Конечно, какой смысл было бы в картографическом приложении, если бы мы не могли видеть маркеры на нашей карте и также могли взаимодействовать с ними? К счастью, ReactMapGL поставляется со встроенными компонентами как для маркеров, так и для всплывающих окон, поэтому в каком бы контейнере мы их ни держали, мы просто импортируем их следующим образом:

Легкий! Наиболее очевидное использование маркеров, которое я нашел, заключалось в том, чтобы они отображали их после сопоставления с помощью некоторой коллекции данных, которую я извлекал. В моем случае у меня была установлена ​​серверная часть, которая содержала винные погреба в Нью-Йорке. У каждого винного погреба была широта и долгота, поэтому, когда я отображал коллекцию, было довольно просто остановиться на каждом элементе и создать компонент-маркер на широте / долготе данного винного погреба. Вдобавок, если вы хотите, чтобы на ваших индивидуальных маркерах отображалось какое-то всплывающее окно, вам придется снова использовать состояние и создавать какое-то состояние «выбранного винного погреба», возможно, используя обратный вызов. В приведенном выше примере каждому создаваемому маркеру дается onClick, чтобы сделать его выбранным винным погребом в состоянии - каждый маркер представлен 'shopImg' внутри кнопки, которая стилизована так, чтобы быть невидимой, поэтому каждый 'shopImg' по сути является кнопкой внутри маркера.

Поздравляю! После выполнения этих шагов у вас должна появиться карта, в центре которой вы хотите, со значками, которые ВЫ выбрали ВЫ, которые делают то, что ВЫ РЕШИЛИ, щелкнув мышью! У тебя есть карта!

Если вы хотите узнать больше о MapBoxGL, я настоятельно рекомендую прочитать их документацию или посмотреть это видео от Ли Халлидей, которое ОГРОМНО помогло мне начать работу. Не стесняйтесь проверять репозиторий Github, на который я ссылался выше, или обращайтесь ко мне с вопросами, проблемами или любыми предложениями о работе! Удачного кодирования, теперь вперед и делайте великие дела; день твой.