В современном цифровом мире карты стали неотъемлемой частью мобильных приложений. Интеграция карт в приложение, будь то навигация, определение местоположения близлежащих объектов или предоставление услуг на основе местоположения, может значительно повысить удобство работы пользователя. React Native, популярный фреймворк для создания кроссплатформенных мобильных приложений, предоставляет возможность создания интерактивных карт с использованием различных картографических платформ. В этой статье мы расскажем о том, как создать карту в приложении React Native с помощью библиотеки Mapbox.
Mapbox - популярная картографическая платформа, предлагающая разработчикам мощные инструменты и сервисы. Благодаря обширному набору API и SDK Mapbox позволяет разработчикам создавать потрясающие и многофункциональные карты в своих React Native-приложениях. От отображения вида карты до интеграции местоположения пользователя и добавления пользовательских маркеров - Mapbox предоставляет все инструменты для создания захватывающего и интересного картографического опыта.
В этой статье мы рассмотрим шаги, необходимые для настройки Mapbox в проекте, отображения вида карты, получения местоположения пользователя и добавления пользовательских маркеров для расширения функциональности карты.
Оглавление
Предварительные условия
Прежде чем мы начнем, убедитесь, что у вас есть следующие предварительные условия:
- На вашем компьютере установлены Node.js и npm.
- Expo CLI.
- Учетная запись Mapbox. Бесплатный аккаунт можно зарегистрировать на сайте mapbox.com.
- Требуется учетная запись EAS (Expo Application Services).
- Если вы разрабатываете под iOS, вам потребуется учетная запись разработчика Apple, за которую необходимо платить около 100 долл. в год.
- Кроме того, если вы разрабатываете приложение для Android, вам потребуется симулятор Android или физический телефон с Android.
Настройка приложения
Чтобы создать новое приложение React с помощью Expo CLI, откройте терминал, перейдите в каталог, в который вы хотите установить проект, и выполните следующую команду:
npx create-expo-app mapbox_app
cd mapbox_appУстановка и настройка Mapbox
Чтобы установить пакет Mapbox в папку проекта, выполните приведенную ниже команду:
npm i @rnmapbox/mapsДля того чтобы @rnmapbox/maps работал на платформе IOS, необходимо добавить в файл ios/Podfile следующие конфигурации.
pre_install do |installer|
$RNMapboxMaps.pre_install(installer)
... other pre install hooks
end
post_install do |installer|
$RNMapboxMaps.post_install(installer)
... other post install hooks
endТеперь давайте установим зависимость Mapbox для iOS. В папке ios вашего проекта выполните в терминале следующую команду:
pod installЗатем войдите на свою страницу панели Mapbox, чтобы сгенерировать токен Mapbox API. На приборной панели нажмите на кнопку Create a Token.
На странице Create an Access Token введите имя приложения, отметьте опцию DOWNLOAD:READ и нажмите на кнопку Create Token, как показано на рисунке ниже:
Далее вы будете перенаправлены обратно на страницу приборной панели, где можно получить доступ к публичному токену API и секретному токену, как показано ниже:
Отображение вида карты
Чтобы отобразить вид карты в нашем приложении React Native, мы должны сначала импортировать пакет Mapbox в наш код. Откройте файл app.js и добавьте следующий код.
import React from "react";
import { StyleSheet, View } from "react-native";
import Mapbox from "@rnmapbox/maps";
// . . .Далее мы должны установить маркер доступа Mapbox и создать переменную defaultStyle. Переменная defaultStyle содержит сведения о том, как будет загружаться и настраиваться карта, такие как источник, минимальный и максимальный уровни масштабирования, цвет фона карты и тип карты.
// . . .
// Mapbox.setWellKnownTileServer("Mapbox");
Mapbox.setAccessToken("Your Access Token here");
const defaultStyle = {
version: 8,
name: "Land",
sources: {
map: {
type: "raster",
tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
minzoom: 1,
maxzoom: 19,
},
},
layers: [
{
id: "background",
type: "background",
paint: {
"background-color": "#f2efea",
},
},
{
id: "map",
type: "raster",
source: "map",
paint: {
"raster-fade-duration": 100,
},
},
],
};
// . . .В приведенном выше коде обновите токен доступа на свой токен доступа из панели Mapbox.
Теперь мы будем использовать компонент Mapbox MapView для отображения карты в нашем приложении, передав переменную defaultStyle в атрибут styleJSON с помощью кода, приведенного ниже.
// . . .
const App = () => {
return (
<View style={styles.page}>
<View style={styles.container}>
<Mapbox.MapView
style={styles.map}
styleJSON={JSON.stringify(defaultStyle)}
/>
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
container: {
height: 700,
width: 390,
},
map: {
flex: 1,
},
});Построение приложения с использованием EAS
EAS (Expo Application Services) - это набор инструментов и сервисов, предоставляемых Expo, популярной платформой для создания и развертывания React Native-приложений. EAS предлагает ряд функций и сервисов для оптимизации процесса разработки, тестирования и развертывания Expo-проектов.
Мы не можем протестировать приложение с помощью Expo, поскольку Mapbox не поддерживает Expo. Чтобы протестировать приложение для работы с картами, необходимо собрать его с помощью EAS.
Чтобы установить EAS в каталог проекта, выполните в терминале следующие команды.
npm install -g eas-cli
npx expo install expo-dev-client expo-locationЧтобы настроить приложение для сборки, создайте в корневой папке проекта файл eas.json и добавьте в него следующие конфигурации для Android и iOS.
{
"build": {
"development-simulator": {
"developmentClient": true,
"distribution": "internal",
"android": {
"simulator": true
},
"ios": {
"simulator": true
}
}
}
}Далее выполните приведенный ниже код для создания приложения на выбранной вами платформе.
eas build --profile development-simulator --platform android
# OR
eas build --profile development-simulator --platform iosВыполнение приведенной выше команды сборки может занять некоторое время. Подождите, пока процесс не завершится.
После завершения сборки воспользуйтесь ссылкой на сборку для загрузки и установки приложения на устройство.
Нам необходимо запустить проект Expo с помощью команды сервера разработки. Выполните приведенную ниже команду в терминале.
npx expo start --dev-clientТеперь откройте установленное приложение, и оно должно отобразить карту, как показано на рисунке ниже.
Получение местоположения пользователя
Одной из распространенных функций картографического приложения является определение местоположения пользователя по его координатам и отображение их на карте. expo-location - это пакет для определения местоположения пользователя.
Установите пакет expo-location с помощью следующей команды.
npx expo install expo-locationЧтобы получить координаты пользователя, откройте файл app.js и замените в нем код на следующий.
import React, { useState, useEffect } from "react";
import { Platform, Text, View, StyleSheet } from "react-native";
import Mapbox from "@rnmapbox/maps";
import * as Location from "expo-location";
Mapbox.setWellKnownTileServer("Mapbox");
Mapbox.setAccessToken(
"Access Token Here"
);
export default function App() {
const [location, setLocation] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setErrorMsg("Permission to access location was denied");
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
}, []);
// . . .В приведенном выше коде мы сначала запрашиваем у пользователей разрешение на доступ приложения к данным об их местоположении с помощью функции Location.requestForegroundPermissionsAsync().
После получения разрешения на определение местоположения мы используем Location.getLastKnownPositionAsync() для получения координат пользователя и сохранения их в переменной location.
Добавление маркера к местоположению пользователя
Добавление пользовательского маркера к местоположению пользователя полезно для выделения его местоположения на карте. Mapbox предоставляет API для добавления маркеров на карту с помощью компонента Mapbox’s PointAnnotation.
Чтобы указать местоположение пользователя с помощью маркера на карте, добавьте следующий код в файл app.js.
return (
<Mapbox.MapView style={{ flex: 1 }}>
{location && (
<Mapbox.PointAnnotation
id="userLocation"
coordinate={[location.coords.longitude, location.coords.latitude]}
>
<Mapbox.Callout title="You are here!" />
</Mapbox.PointAnnotation>
)}
</Mapbox.MapView>
)};Теперь перезагрузите приложение, и вам будет предложено разрешить приложению доступ к вашему местоположению. После получения разрешения на карте появятся маркеры местоположения, указывающие на текущее местоположение, как показано на рисунке ниже.
Заключение
В этой статье мы рассмотрели создание карты React Native с использованием Mapbox. Мы рассмотрели процесс установки и настройки, отображение вида карты на платформах iOS и Android, отображение местоположения пользователя и добавление маркера к местоположению пользователя.
Выполнив эти шаги, вы сможете усовершенствовать свои приложения React Native, интегрировав в них мощные картографические возможности с помощью Mapbox. Экспериментируйте с различными функциями и API, предоставляемыми Mapbox, для создания интересных и интерактивных приложений на основе карт.