9 простых способов использовать карты в своих приложениях

Простые и мощные возможности TomTom Maps SDK как для разработчиков, так и для дизайнеров.

Создание и настройка карт с TomTom еще никогда не были такими простыми, независимо от вашего уровня навыков или предпочитаемого языка.

Для этой статьи мы составили список из девяти простых, но невероятно мощных возможностей TomTom Maps SDK как для разработчиков, так и для дизайнеров.

Используемые примеры поддерживаются на нескольких языках — Java, JavaScript и Swift — так что здесь каждый найдет что-то для себя. А поскольку шаблоны TomTom Maps SDK одинаковы для всех платформ, эти примеры легко переводятся на выбранный вами язык.

Чтобы следовать примерам кода, вам необходимо зарегистрироваться для доступа к Порталу разработчика TomTom и получить ключ API.

ВСТАВЬТЕ SDK В ВАШЕ ПРИЛОЖЕНИЕ IOS

После настройки Cocoapods, менеджера зависимостей для проектов Swift и Objective-C, интегрировать модуль TomTom Maps SDK так же просто, как включить следующую строку в ваш подфайл и выполнить установку пода из консоли.

pod 'TomTomOnlineSDKMaps'

Чтобы инициализировать карту, импортируйте модуль TomTomOnlineSDKMaps в файл вашего проекта и вставьте ключ API, найденный на панели управления TomTom Developer.

let mapConfig = TTMapConfigurationBuilder.create().withMapKey(<Key>).build() 
self.mapView = TTMapView(frame: view.bounds, mapConfiguration: mapConfig)

Для получения дополнительной информации и подробных примеров посетите официальный репозиторий Maps SDK For iOS Examples.

ОТОБРАЖЕНИЕ КАРТЫ С ЦЕНТРОМ НА МЕСТЕ

Установить исходный вид карты очень просто. Следующий пример Swift иллюстрирует, как отцентрировать карту на Амстердаме с уровнем масштабирования, приблизительно равным 45%.

let cameraPosition = TTCameraPositionBuilder.create(withCameraPosition: TTCoordinate.AMSTERDAM()).withZoom(10).build() 
mapView.setCameraPosition(cameraPosition)

На векторных картах функция withZoom принимает целое число от 0 до 22, где 0 возвращает вид всей земли.

Более подробное объяснение уровней масштабирования см. в разделе Понимание сетки фрагментов карты и уровней масштабирования.

ПОКАЗАТЬ, ГДЕ Я СЕЙЧАС

Отслеживание местоположения по умолчанию отключено, поэтому, чтобы отобразить и отслеживать текущее положение пользователя, сначала включите его. Ниже приведен пример Java.

tomtomMap.setMyLocationEnabled(true);

Чтобы получить текущее местоположение пользователя, просто вызовите getUserLocation на tomtomMap.

Location location = tomtomMap.getUserLocation();

Если устройство еще не имеет фиксированной позиции, функция getUserLocation может вернуть NULL. Чтобы обойти ошибку в этом случае, вы можете переопределить обратный вызов onLocationChanged.

НАЙТИ МЕСТО И ПОКАЗАТЬ МАРКЕР НА КАРТЕ

Чтобы добавить маркер на карту, нам нужны координаты. К счастью, TomTom упрощает географическую привязку с помощью Search API.

Перейдите в API Explorer, нажмите Попробовать и вставьте адрес в поле ввода запроса. В этом примере давайте использовать следующий адрес: 100 Century Center Ct 210, Сан-Хосе, Калифорния 95112, США.

Создайте массив с возвращенными координатами (lng, lat), чтобы добавить его на карту.

var speedyPizzaCoordinates = [-121.91595, 37.36729]; 
var marker = new tt.Marker().setLngLat(speedyPizzaCoordinates).addTo(map);

Для получения дополнительной информации ознакомьтесь с разделом Отображение нескольких местоположений с помощью TomTom Maps SDK.

НАСТРОЙКА МАРКЕРОВ

Существует несколько способов настроить маркеры. Одним из самых простых является создание всплывающего окна с информацией о месте.

Давайте настроим маркер, который мы сделали в последнем пункте, дав ему всплывающее окно и метку.

В существующем объекте tt.Marker определите позицию всплывающего окна в popupOffsets, установите метку с помощью HTML и создайте экземпляр всплывающего окна на существующем маркере с возможностью переключения.

var popupOffsets = { 
  top: [0, 0], 
  bottom: [0, -70], 
  'bottom-right': [0, -70], 
  'bottom-left': [0, -70], 
  left: [25, -35], 
  right: [-25, -35] 
} 
 
var popup = new tt.Popup({offset: popupOffsets}).setHTML("<b>Speedy's pizza</b>"); 
marker.setPopup(popup).togglePopup();

ВКЛЮЧАЙТЕ И ОТКЛЮЧАЙТЕ ВИДИМОСТЬ СЛОЯ

Многослойные карты могут предоставить пользователям возможность визуализировать широкий спектр данных на одной карте.

Для приложения, в котором несколько деталей относятся к одному местоположению — например, земельный кадастр или геологические исследования — возможность переключения видимости слоя имеет решающее значение для удобства пользователя.

Ниже приведен пример определения слоя и переключения его видимости.

В предопределенном объекте tt.Map, содержащемся в карте var, добавьте новый слой, вызвав addLayer и определив его свойства по мере необходимости — обязательно выберите отдельный идентификатор.

Слои полностью настраиваются через свойства слоя. Изучите документацию TomTom, чтобы поэкспериментировать с настройкой слоев.

map.addLayer({ 
    'id': layerId, 
    'type': 'fill', 
    'source': {...}, 
    'layout': {}, 
    'paint': {...} 
}, 'layer description');

Слои карты видны по умолчанию, но их можно переключать с помощью setLayoutProperty.

map.setLayoutProperty(layerId, 'visibility', 'none');

Для получения дополнительной информации ознакомьтесь с разделом Управление и стилизация слоев карты помимо основ. А чтобы увидеть примеры манипулирования слоями в функциональных приложениях, ознакомьтесь с Диспетчером такси и Учебником по трафику.

РИСУЙТЕ КРУГИ И МНОГОУГОЛЬНИКИ НА КАРТЕ

Геозона полезна для создания границ на карте. Распространенное использование геозоны — демонстрация точек интереса в пределах определенного радиуса. Например, при поиске недвижимости пользователь может захотеть просмотреть все школы на указанном расстоянии от собственности. Геозона также может быть полезна для таких ситуаций, как отслеживание транспортных средств, геомаркетинг, создание уведомлений и многое другое.

TomTom предоставляет простое в использовании приложение Geofences Creator, которое помогает разработчикам визуально создавать и ссылаться на заборы с помощью API геозон.

Запустите Конструктор геозон.
Введите свой ключ API и нажмите «Сохранить и продолжить».
Нажмите «Создать ключ администратора» и введите пароль.
Нажмите «Создать ключ администратора» и скопируйте ключ.
Выберите «Создатель геозон» для идентификатора проекта и нажмите «Сохранить и закончить».

6. Выберите тип ограждения.

7. Чтобы увеличить радиус круга, щелкните точку на карте и перетащите курсор от этой точки. Нажмите на карту еще раз, чтобы зафиксировать размер круга.

8. Появится всплывающее окно, позволяющее дать имя новому ограждению и указать дополнительные сведения о ограждении в формате JSON.

9. Нажмите «Сохранить».

Ваша новая геозона теперь может быть повторно ограждена с помощью идентификатора проекта «Создатель геозон».

Ознакомьтесь с разделом Что такое геозона?, чтобы получить подробную информацию о реализации геозоны в Python.

ПОЛУЧИТЬ ИНФОРМАЦИЮ О МЕСТАХ НА КАРТЕ

TomTom Search API — это мощная конечная точка, которая возвращает информацию о местах.

Обратное геокодирование

Конечная точка Search API Reverse Geocode принимает строку, разделенную запятыми (широта, долгота), и возвращает почтовый адрес, элемент улицы или географию.

Обратное геокодирование может быть полезно для преобразования данных GPS устройства в удобочитаемый адрес или название места.

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

Конечная точка имеет следующие три обязательных параметра.

номер версии (версия): 2
Запрос (строка в кодировке URL, «широта, долгота»): «37.8328%2c-122.27669»
ext (тип возвращаемого значения): .xml

Пример GET-запроса должен выглядеть следующим образом: /search/2/reverseGeocode/37.8328%2c-122.27669.xml?key=***

Достопримечательности

Для конечной точки поиска точек интереса (poiSearch) требуются те же три параметра, что и для конечной точки Geocode. Он возвращает подробную информацию о любых достопримечательностях, связанных с вашим поисковым запросом.

Конечная точка poiSearch по умолчанию возвращает 10 ответов, но может возвращать до 100 максимум. В большинстве случаев эту конечную точку лучше всего сочетать с точкой отсчета и радиусом, что ограничивает поиск определенной областью.

Интерактивные примеры и подробности о дополнительных параметрах для конечных точек poiSearch и reverseGeocode можно найти в API Explorer.

СОЗДАЙТЕ СТАТИЧЕСКОЕ ИЗОБРАЖЕНИЕ КАРТЫ

Статические карты полезны во многих отношениях, включая навигацию в автономном режиме.

Давайте деконструируем минимальный URL-адрес запроса для этой конечной точки, который создает PNG Амстердама с уровнем масштабирования 10.

https://api.tomtom.com/map/1/staticimage?zoom=10¢er=4.899886%2C%2052.379031&key=***

https://api.tomtom.com/map/1/staticimage — эта конечная точка имеет только один обязательный параметр, номер версии, который равен 1 в конце базового URL-адреса.
zoom=10 — Zoom принимает целое число от 0 до 22, где 0 отображает весь мир.
center=4.899886%2C%2052.379031 — Центр — это точка фокусировки, представленная в виде строки кодирования URL-адреса, разделенной запятыми, содержащей широту и долготу местоположения, в данном случае Амстердама.
key=*** — URL-адрес заканчивается вашим ключом API.

ОТКРОЙТЕ ДЛЯ СЕБЯ ТОМТОМ

Это лишь некоторые из функций, которые вы можете легко включить в свои приложения. Мы рекомендуем вам ознакомиться с TomTom API Explorer, чтобы открыть для себя весь спектр возможностей.

Чтобы начать изучение уже сегодня, зарегистрируйтесь на Портале разработчиков TomTom и ознакомьтесь со следующими статьями по теме:

Эта статья впервые появилась на странице https://developer.tomtom.com/blog.

9 простых способов использовать карты в своих приложениях