Как мы интегрируем Mapbox Maps в ваш сайт, собственное мобильное приложение или проект

Если вам нужно, чтобы ваше веб-приложение, приложение для Android или iOS интегрировалось с картой, службами геолокации, расширяемыми, пользовательскими картами, поиском местоположения, существует множество решений. Для разработчиков есть такие решения, как Google Maps, Mapbox, Open Street Maps и другие. Это часть Аламеда Дев Исследования

В Alameda Dev мы предпочитаем MapboxGL. MaboxGL предоставляет SDK для React Native, а также для веб-приложений, таких как Google Maps. Вы можете просмотреть нашу статью об интеграции Google Maps в React Native здесь

В этой статье я собираюсь объяснить, как мы интегрируем MapboxGL в ваш проект ReactNative.

Мы разрабатываем специальные приложения для велосипедных дорожек для города Барселона, BcnByBike. Клиенту требовалось нативное приложение, которое может показать карту города Барселоны, на этой карте нам нужно отобразить общественные городские велосипедные дорожки. А полосы берутся из общедоступной информации о городе Барселоны открытых данных в формате json.

Более простой способ добавить Mapbox SDK в ваш проект — выполнить шаги, описанные в Репозиторий GitHubно мы нашли ручную установку лучшим вариантом.

   npm install @mapbox/react-native-mapbox-gl --save

Инструкции для IOS

Добавить нативную платформу Mapbox SDK

В навигаторе проекта. Перейдите на вкладку «Общие», затем добавьте node_modules/@mapbox/react-native-mapbox-gl/ios/Mapbox.framework во встроенные двоичные файлы.

Добавить файлы SDK React Native Mapbox

В навигаторе проекта Xcode щелкните правой кнопкой мыши папку «Библиотеки» ➜ «Добавить файлы в <...>». Добавлять

   node_modules/@mapbox/react-native-mapbox-gl/ios/RCTMGL.xcodeproj

Затем в Xcode перейдите к Build Phases, щелкните по нему, и вы должны увидеть Link Binary with Libraries, нам нужно добавить libRCTMGL.a

В настройках сборки вашего приложения найдите FRAMEWORK_SEARCH_PATHS.

Добавьте нерекурсивные пути поиска Framework

   $(PROJECT_DIR)/../node_modules/@mapbox/react-native-mapbox-gl/ios

Добавить сценарий запуска

На вкладке «Фазы сборки» щелкните знак «плюс», а затем «Новая фаза запуска сценария».

Добавить компонент Mapbox в приложение React Native

Во-первых, вы импортируете компоненты, которые вам понадобятся. Сюда входят компоненты из React, React Native и Mapbox. Для отображения карты вам понадобится Маркер доступа к Mapbox. Mapbox использует токены доступа для связывания запросов к ресурсам API с вашей учетной записью. Как только вы импортировали Mapbox, вы должны установить свой токен доступа к Mapbox, используя Mapbox.setAccessToken().

Добавьте импорт для компонента и настройте свой токен доступа.

   import Mapbox from '@mapbox/react-native-mapbox-gl';
   Mapbox.setAccessToken('<your access token here>');

Затем добавьте код для включения компонента в элемент View, помните, что представление контейнера должно иметь стиль flex: 1, чтобы он покрывал весь экран.

Инструкции для Android

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

В проекте: build.gradle

В приложении: build.gradle. Добавить проект в зависимости

В настройках .градле
Включите проект, чтобы gradle знал, где его найти.

   include ':mapbox-react-native-mapbox-gl'
   project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')

В MainApplication.java
Добавьте импорт com.mapbox.rctmgl.RCTMGLPackage; как оператор импорта и новый RCTMGLPackage() в getPackages()

Возможные ошибки

Если вы получаете сообщение об ошибке: No static method toHumanReadableAscii
Решение состоит в том, чтобы отредактировать компиляцию в build.gradle следующим образом:

  compile (project(':mapbox-react-native-mapbox-gl')) {
    compile ('com.squareup.okhttp3:okhttp:3.6.0') {
      force = true
    }
  }

Приложение для Android будет выглядеть так

Отображение велосипедных дорожек на карте

импортировать данные линии в переменную

  import biciLanes from 'carril_bici.js'

Добавьте компоненты ShapeSource и LineLayer Mapbox

  <Mapbox.ShapeSource id='biciLanesSource' shape={biciLanes}>
    <Mapbox.LineLayer
      id='biciLanes'
      style={{
        lineWidth: 3,
        lineCap: Mapbox.LineCap.Round,
        lineJoin: Mapbox.LineJoin.Round,
        lineColor: '#19C144',
        lineOpacity: 1
      }} />
  </Mapbox.ShapeSource>

Полный код выглядит так: