Интеграция с картами является неотъемлемой частью таких продуктов, как приложения для мониторинга автопарка и сервисы совместного использования. Однако создать карту с самого начала сложно, и разработка стабильного прототипа может занять много времени. Вместо того, чтобы пытаться найти или создать карту и интегрировать ее самостоятельно, мы можем сэкономить время (и массу хлопот), используя TomTom Map API, Maps SDK и Map Styler. API Карт включают API отображения карты, API маршрутизации карты и API трафика карты. Map API позволяют нам легко и эффективно интегрировать карты в наши продукты.
API-интерфейсы карт взаимодействуют с Maps SDK TomTom, который предоставляет все необходимые методы для работы с картами. С помощью Maps SDK и Maps API мы можем устанавливать маркеры на картах, искать места, использовать обратное геокодирование и многое другое.
В этом руководстве показано, как использовать TomTom Maps API, Maps SDK и React Router для динамического обновления карты путем подключения карт TomTom к React Routing.
Обзор учебника
В этом уроке мы интегрируем карту с приложением React. На карте показаны разные страны. С помощью маршрутизации React мы отобразим другую страну, добавив название страны к URL-адресу в адресной строке и выполнив поиск с помощью TomTom Search API.
Предпосылки
Чтобы следовать этой статье, вам необходимо следующее:
- Базовое понимание React. Чтобы получить общее представление об интеграции карты в React, ознакомьтесь с этой статьей. В вашей системе должен быть установлен Node.js, так как вы используете диспетчер пакетов Node для установки различных инструментов. Если вы знакомы с Yarn, вы можете использовать его, но мы не будем рассматривать его в этом уроке.
- Учетная запись разработчика TomTom. После регистрации этой учетной записи вы получите ключ API, который будете использовать для своего приложения. Начало работы Начнем с создания и запуска приложения React. Сделайте это, выполнив следующую команду в своем терминале:
1 npx create-react-app tomtom-map 2 cd tomtom-map 3 npm start
После этого открывается новая вкладка браузера с адресом localhost:3000. Всякий раз, когда вы вносите изменения в свой код, вкладка обновляется и отображается соответствующим образом.
Код также автоматически создает новый каталог с именем приложения. Перейдите в каталог src в каталоге приложения, созданном create-react-app. В каталоге откройте файл App.css и добавьте стиль каскадной таблицы стилей (CSS) для карты. Стиль устанавливает высоту карты равной 100 процентам области просмотра.
1.mapDiv{
2 height: 100vh;
3}
В следующих разделах мы будем шаг за шагом изменять файл App.js. Напоминаем, что этот файл находится в каталоге src.
Установка и добавление зависимостей
Чтобы избежать возможных ошибок, удалите элемент ‹header/›, чтобы остался почти пустой компонент, похожий на тот, что ниже. Также обратите внимание на удаление импорта изображения логотипа.
1import './App.css';
2
3function App() {
4 return (
5 <div className="App">
6 </div>
7 );
8}
9
10export default App;
В этот файл нам нужно добавить зависимости Map SDK и react-router-dom для маршрутизации. Поскольку эти зависимости не поставляются вместе с React, мы должны установить их с помощью следующей команды:
npm i @tomtom-international/web-sdk-maps @tomtom-international/web-sdk-services react-router-dom
Затем мы добавляем зависимости, используя этот фрагмент:
1import './App.css';
2import '@tomtom-international/web-sdk-maps/dist/maps.css'
3import mapSDK from '@tomtom-international/web-sdk-maps';
4import mapServices from '@tomtom-international/web-sdk-services';
5import { React, useState, useEffect, useRef } from 'react'
6import {
7 BrowserRouter as Router,
8 Routes,
9 Route,
10 useParams
11} from 'react-router-dom';
Настройка карты
Для начала удалите строку экспорта приложения по умолчанию, так как мы не будем экспортировать компонент приложения по умолчанию. Вместо этого мы используем компонент App для получения координат и отображения карты.
Для этого начните с экспорта компонента CountryNameHelper с приведенным ниже фрагментом:
1/*This maps a country name URL parameter in the search bar*/
2export default function CountryNameHelper() {
3 return (
4 <Router>
5 <div>
6
7
8
9 <Routes>
10 <Route exact path="/:countryName" element={<App />} />
11
12
13
14 </Routes>
15
16
17
18 </div>
19 </Router>
20 );
21}
Фрагмент создает маршрут с параметром названия страны (countryName), который вы используете в компоненте приложения.
Добавьте следующий код в функциональный компонент приложения, который содержит константу для хранения вашего ключа API, получает параметр имени страны с помощью метода useParams, создает экземпляр карты, а затем использует обработчики состояния для надлежащего хранения переменных исходного состояния.
1 //your API key
2 const API_KEY = ''
3 //getting the country's name from the URL
4 let { countryName } = useParams();
5 const mapContainer = useRef();
6 //default coordinates
7 const [countryLongitude, setCountryLongitude] = useState(-121.91599);
8 const [countryLatitude, setCountryLatitude] = useState(37.36765);
9 //use this to change the zoom level of the map
10 const [zoomLevel, setZoomLevel] = useState(3);
11 const [ourMap, setMap] = useState({});
После этого извлеките координаты столицы введенной страны с помощью сервиса нечеткого поиска, получите доступ к значениям и соответствующим образом установите их. Выберите первое значение, позицию 0, так как оно возвращает результат с наивысшим баллом.
1//fetching the coordinates for the typed country's administrative capital city
2 mapServices.services.fuzzySearch({
3 key: API_KEY,
4 query: countryName
5 }).then(getCoordinates);
6
7 function getCoordinates(response) {
8 console.log(response.results)
9 let latitude = response.results[0]["position"]["lat"];
10
11 let longitude = response.results[0]["position"]["lng"];
12
13 setCountryLatitude(latitude)
14
15 setCountryLongitude(longitude)
16 }
Используя координаты по умолчанию при загрузке страницы, используйте хук useEffect для рендеринга карты. Этот хук передает ключ API, контейнер карты, координаты и уровень масштабирования объекту карты SDK. Обратите внимание, что в этом уроке используется уровень масштабирования три, чтобы дать нам большее поле зрения страны и ее границ.
Теперь визуализируйте карту, используя метод setMap с объектом карты (ourMap) в качестве аргумента.
1useEffect(() => {
2
3 let ourMap = mapSDK.map({
4 key: API_KEY,
5 container: mapContainer.current,
6 center: [countryLongitude, countryLatitude],
7 zoom: zoomLevel
8 });
9 setMap(ourMap);
10 /*values to listen to*/
11 }, [countryLongitude, countryLatitude]);
Установка маркера местоположения помогает быстро определить целевое местоположение. После метода setMap добавьте этот код:
1let locationMarker = new mapSDK.Marker({
2 draggable: false
3 }).setLngLat([countryLongitude, countryLatitude]).addTo(ourMap);
Задаем нужные нам свойства в конструкторе Marker, задаем координаты для размещения маркера с помощью метода setLngLat, а затем добавляем его на карту с помощью метода addTo. Наконец, мы размонтируем компонент карты из DOM, чтобы прослушать другие изменения и обновить его, используя этот метод. Он идет после кода установки маркера.
return () => ourMap.remove();
Примечание. В этом руководстве карта воссоздается каждый раз при выборе новой страны, что работает в демонстрационных целях. На практике более эффективно создать экземпляр карты один раз и использовать дополнительный эффект для обновления вида на основе значений координат.
Мы используем массив (второй параметр хука useEffect) для установки значений для прослушивания изменений. Это избавляет от необходимости использовать кнопку и метод для обновления карты. Это полный код хука useEffect:
1 useEffect(() => {
2
3 let ourMap = mapSDK.map({
4 key: API_KEY,
5 container: mapContainer.current,
6 center: [countryLongitude, countryLatitude],
7 zoom: zoomLevel
8 });
9 setMap(ourMap);
10 //setting the location marker to help easily identify the target*/
11 let locationMarker = new mapSDK.Marker({
12 draggable: false
13 }).setLngLat([countryLongitude, countryLatitude]).addTo(ourMap);
14
15
16
17 return () => ourMap.remove();
18 /*values to listen to*/
19 }, [countryLongitude, countryLatitude]);
В методе возврата добавьте <div> внутри приложения <div> для отображения карты.
Вот скриншоты маршрутов приложения для нескольких стран: маршрут в США, маршрут в Южную Африку и маршрут в Норвегию.
Заключение
В этом руководстве мы увидели, как получить название страны из URL-адреса, выполнить поиск координат страны с помощью API поиска и отобразить карту на основе полученных координат. С картами TomTom можно легко и просто интегрировать карту в приложение React и использовать React Router для изменения отображения местоположения.
Чтобы узнать больше о картографической технологии TomTom, зарегистрируйте учетную запись разработчика и начните работу с TomTom уже сегодня.
Эта статья изначально была опубликована на страницеdeveloper.tomtom.com/blog.
