Отображение нескольких местоположений с помощью Maps SDK

Много местоположений и только один API — узнайте, как использовать TomTom Maps SDK

TomTom Maps SDK позволяет разрабатывать приложения на основе местоположения для веб-приложений, iOS и Android. Он обеспечивает легкий доступ к миллионам точек данных, собранных TomTom, функциям карт для веб-приложений, поиску местоположения и многому другому, а также совместим как с веб-платформами, так и с собственными платформами мобильных приложений.

В этой статье мы рассмотрим использование TomTom Maps SDK, изучив некоторые способы использования его вызова API SDK для одновременного отображения местоположения нескольких объектов на карте. В статье также показано, как лучше всего улучшить использование карты, используя дополнительные функции и вызовы API, доступные на портале разработки приложений. В нем также объясняется процесс настройки стиля и функций векторной карты, чтобы вы могли приступить к созданию приложений на основе местоположения.

НАЧИНАЯ

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

Простое добавление приложения и запрос доступа к продукту Maps Display API побудит TomTom предоставить бессрочный ключ API для использования с Map Display API. Пользователи получают 2500 бесплатных транзакций API в день для поддержки приложения и имеют доступ к бесплатным картам и плиткам транспортных потоков при использовании Mobile Maps SDK для Android™ и iOS. (Обратите внимание: если 2500 транзакций API в день недостаточно, дополнительные транзакции можно приобрести, посетив экран Мои кредиты на панели инструментов разработчика.)

СКАЧАТЬ SDK КАРТЫ

TomTom Maps SDK доступен для бесплатной загрузки на Портале TomTom для разработчиков. Разархивируйте его и сохраните в папке проекта. Вы также можете использовать наш CDN, добавив следующий фрагмент в раздел HEAD вашего HTML-файла.

<head>
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.4.0/maps/maps.css'>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.4.0/maps/maps-web.min.js"></script>
</head>

ОТОБРАЖЕНИЕ КАРТЫ

Чтобы познакомиться с картой SDK, давайте начнем с чего-то простого: Отображение карты в приложении без определенного места в фокусе карты. Ниже приведен код для этого (обратите внимание, что вам сначала нужно создать приложение на портале разработчика, потому что потребуется созданный ключ API).

var map = tt.map({
            key: "<your maps api key>",
            container: "map"
        });

Как показано ниже, скрипт показывает карту мира с масштабом 0.

Каждая карта должна фокусироваться на определенной точке, чтобы добавить больше контекста на карту. В этом примере координаты HQ размещены на карте.

Географические координаты могут быть добавлены в виде массива широт и долгот. Также включен уровень масштабирования 15. Вот пример:

var HQ = { lat: 9.0548, lng: 7.4856 }
var map = tt.map({
   key: '<your-api-key>'
   container: 'map',
   center: HQ,
   zoom: 15
});

ДОБАВЛЕНИЕ МАРКЕРА НА КАРТУ

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

var marker = new tt.Marker().setLngLat(HQ).addTo(map);
var popup = new tt.Popup({ anchor: 'top' }).setText('HeadQuarters')
marker.setPopup(popup).togglePopup()

Тот же процесс можно повторить, чтобы добавить на карту несколько местоположений, как показано на следующем изображении.

Продолжая процесс, вы можете добавить больше очков.

ПОЛУЧЕНИЕ ВАЖНОЙ ДЕТАЛИ

Местоположение и геокоординаты

TomTom предоставляет API для получения геокоординат любого местоположения. Самый простой способ получить эти координаты — через TomTom API Explorer. Раздел Fuzzy Search API помогает получить координаты местоположения, используя общий адрес.

Возьмите образец адреса 2311 North Los Robles Avenue, Pasadena, California, USA и поместите его в поле запроса; очистить другие предварительно заполненные поля при выполнении этого запроса. Данные ответа возвращают координаты в следующем формате.

<position>
    <lat>37.36729</lat>
    <lon>-121.91595</lon>
</position>

Обратите внимание, что вы не должны использовать специальные символы HTML (например, ‘$’,’?’,&’,’#’) в любом адресе.

ЗАГРУЗКА НЕСКОЛЬКИХ КООРДИНАТ ОДНОВРЕМЕННО

В производственной среде было бы непрактично добавлять каждую новую локацию на карту с новой строкой кода. Координата может быть добавлена в цикле и добавлена на карту.

var companyAssets = [
                { lat: 52.373627, lng: 4.902642 },
                { lat: 52.3659, lng: 4.927198 },
                { lat: 52.347878, lng: 4.893488 },
                { lat: 52.349447, lng: 4.858433 }];
            companyAssets.forEach(function (child) {
                new tt.Marker().setLngLat(child).addTo(map);
            });

ПОКАЗ КАРТЫ ТЕМНОЙ КОЖИ

Карты по умолчанию представлены в нескольких темах. Вы можете переключаться между различными скинами, используя стиль в инициализации карты. Проверьте следующий пример на портале разработчиков, чтобы увидеть, как настроить URL-адрес при выборе нового стиля.

Например, переход в ночной режим будет выглядеть так:

var map = tt.map({
            key: <your-api-key>
            container: 'map',
            center: HQ,
            style: 'https://api.tomtom.com/style/1/style/20.4.5-*/?map=basic_night&poi=poi_main',
            zoom: 15
        });

СТИЛЬ КАРТЫ

Свойства векторных карт TomTom, такие как цвета заливки, стили линий, толщина и т. д., определяются в редактируемом файле JSON. Более подробную документацию по доступным свойствам можно найти здесь. Вместо того, чтобы редактировать вручную, создание стиля с помощью TomTom Map Styler является более простым подходом.

Векторные карты состоят из плиток и схем; плитка используется для обслуживания данных на карте, а схема определяет структуру данных. Клиент определяет, как представить эти данные конечному пользователю, используя стиль (например, использование цвета и функций, таких как 2D-области, дороги, океан и т. д.).

Используя TomTom Map Styler, разработчики могут настраивать и просматривать функции карты. (Например, вы можете изменить фон океана на красный вместо обычного синего.)

НАЧАЛО НАСТРОЙКИ КАРТЫ

Чтобы приступить к созданию собственного стиля, перейдите по ссылке TomTom Map Styler выше. Тема по умолчанию загружается по умолчанию. Вам потребуется добавить ключ TomTom API, если вы не вошли в систему.

Следующим шагом является открытие нового файла JSON, содержащего определение стиля, в TomTom Map Styler. Нажмите на кнопку «Открыть».

И выберите стиль «Ночь + ДТП».

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

В левой части TomTom Map Styler отображаются векторные слои карты с применимыми настройками. Вы также увидите свойства, которые можно настроить. Справа показан предварительный просмотр изменений в реальном времени.

В любой момент новый настроенный стиль можно экспортировать из редактора и протестировать: просто нажмите «Экспорт» в меню и дайте ему новое имя.

Вы можете протестировать стиль здесь. Загрузите измененный стиль (нажмите кнопку Выбрать файл) и просмотрите результаты.

СОЕДИНЯЯ ВСЕ ВМЕСТЕ: ПРИМЕР РЕАЛЬНОЙ КАРТЫ

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

var AbujaZone = [
    {Address:"HQ",Coordinate: [9.0548, 7.4856]},
    {Address:"SUB HQ",Coordinate: [9.0600, 7.4899 ]},
    {Address:"ABUJA A",Coordinate: [9.0509, 7.4931 ]},
    {Address:"ABUJA B",Coordinate: [9.046, 7.4873 ]}
    {Address:"ABUJA C", Coordinate: [9.0530, 7.4793 ]}
    {Address:"NEW CONSTRUCTION",Coordinate:[9.0650, 7.4924 ]},
    {Address:"ABUJA E", Coordinate: [9.0650, 7.4734 ]}
]

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

AbujaZone.forEach(function (child) {
    new tt.Marker().setLngLat(child.Coordinate).addTo(map);
});

Проект на скриншоте переключается между двумя разными локациями: Лагос и зона Абуджа. Чтобы указать значок маркера для каждого местоположения, вам необходимо обновить элемент DOM для маркера. Посмотрите этот пример на портале разработчиков TomTom.

Вот фрагмент кода для создания пользовательского маркера:

function createMarker(icon, position, color, popupText) {
            var markerElement = document.createElement('div');
            markerElement.className = 'marker';
            var markerContentElement = document.createElement('div');
            markerContentElement.className = 'marker-content';
            markerContentElement.style.backgroundColor = color;
            markerElement.appendChild(markerContentElement);
            var iconElement = document.createElement('div');
            iconElement.className = 'marker-icon';
            iconElement.style.backgroundImage =
                'url(../assets/images/custom-markers/' + icon + ')';
            markerContentElement.appendChild(iconElement);
            var popup = new tt.Popup({offset: 30}).setText(popupText);
            // add marker to map
            new tt.Marker({element: markerElement, anchor: 'bottom'})
                .setLngLat(position)
                .setPopup(popup)
                .addTo(map);
        }

Обратите внимание на URL-адрес iconElement. Фон исходит из активов, которые вы можете добавить в свое приложение.

РЕЗЮМЕ

В этой статье были рассмотрены способы добавления нескольких местоположений на карту и настройки вида карты, а также рассмотрено использование маркеров и отображений элементов векторной карты. Официальная документация TomTom содержит полный список доступных функций и опций.

TomTom API предлагает полный набор инструментов на основе местоположения с множеством функций для создания полнофункциональных приложений на основе местоположения, в том числе:

Traffic API: информация о трафике может отображаться через Traffic API в различных стилях и вариантах. Информация о транспортном потоке или дорожно-транспортном происшествии может быть наложена поверх карт TomTom для визуализации уровня заторов, пробок, дорожных работ, заблокированных дорог, перекрытий и т. д.
API отображения карт: API отображения карт позволяет отображать статические и интерактивные карты в любом мобильном и/или веб-приложении. Технология создания карт TomTom в реальном времени предоставляет пользователям самые точные и актуальные карты.
API маршрутизации. API маршрутизации позволяет планировать маршрут из точки А в точку Б, учитывая как исторические данные, так и условия трафика в реальном времени. В результате приложения могут предоставлять пользователям очень точное время в пути, а также оперативную обновленную информацию о поездках и инструкции по маршруту для различных видов транспорта, таких как автомобиль, грузовик, велосипед и пешеход.
Search API: Search API позволяет осуществлять геокодирование и поиск адреса или места. Используя алгоритмы нечеткого сопоставления и автозаполнение, API поиска обеспечивает превосходный интерфейс запросов для прямого взаимодействия с конечными пользователями.

Независимо от того, разрабатываете ли вы мобильное приложение корпоративного уровня на основе данных GPS, подобное Uber, Google Maps, Yelp, FourSquare или Pokemon Go, или новое приложение в категории знакомств, погоды, социальных сетей, дополненной реальности или фитнеса. , это может быть очень полезным набором инструментов.

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

Эта статья впервые появилась на странице https://developer.tomtom.com/blog. Первоначальный автор — Джон Оди.

Отображение нескольких местоположений с помощью Maps SDK