Узнайте, как быстро и легко добавить интерактивную карту с помощью Maps SDK и JavaScript.

ДОБАВЛЕНИЕ КАРТ TOMTOM В ПРИЛОЖЕНИЕ SVELTE

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

Хотя карты могут показаться сложными, их на удивление легко интегрировать в веб-приложения с помощью клиентских библиотек от TomTom. Фронтенд-разработчикам нужны эффективные и действенные варианты. Карты TomTom упрощают добавление интерактивных карт в приложения Svelte, что делает их идеальным выбором.

В этой статье мы покажем, как добавить карты TomTom в веб-приложение Svelte. Мы рассмотрим, как установить библиотеку карт SDK, инициализировать ее и управлять картой. Чтобы следовать, вы должны знать JavaScript и быть знакомым с Svelte.

НАСТРОЙКА

Чтобы создать приложение Svelte, сначала убедитесь, что на вашем компьютере установлен Node.js. Вы можете проверить наличие Node.js, введя в терминал следующую команду:

node -v

Если нет, просто перейдите на сайт Node.js, чтобы загрузить последнюю версию.

Кроме того, вам нужно установить библиотеку degit, чтобы вы могли клонировать шаблон Svelte:

npm install -g degit

Когда это закончится, мы можем начать работу с нашим приложением Svelte, создав пустую папку и клонировав шаблон в наш проект с именем «tomtom»:

npx degit sveltejs/template tomtom

Затем мы переходим в папку нашего проекта на терминале:

cd tomtom

Теперь, когда мы его настроили, мы можем установить зависимости нашего проекта:

npm install

Затем мы запускаем приложение Svelte с помощью:

npm run dev

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

Чтобы использовать службы поиска и маршрутизации TomTom, сначала необходимо установить TomTom Maps SDK. Используйте эту команду для установки этой библиотеки:

npm i @tomtom-international/web-sdk-maps

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

При регистрации учетной записи разработчика вы получаете API-ключ. Обратите внимание на ключ API, потому что мы скоро к нему вернемся.

СОЗДАНИЕ ПРИЛОЖЕНИЯ

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

Во-первых, чтобы начать создавать наше приложение, давайте импортируем библиотеку и ее таблицу стилей по умолчанию в наш компонент, добавив их в тег скрипта. Нам также нужно импортировать onMount в наш компонент, чтобы мы могли инициализировать нашу карту, когда компонент монтируется в объектный модуль документа (DOM):

import tt from "@tomtom-international/web-sdk-maps";
import '@tomtom-international/web-sdk-maps/dist/maps.css'
import { onMount } from "svelte";

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

import tt from "@tomtom-international/web-sdk-maps";
import '@tomtom-international/web-sdk-maps/dist/maps.css'
import { onMount } from "svelte";

Мы свяжем эти переменные непосредственно с их элементом ‹input/›, чтобы наше приложение всегда синхронизировалось, когда мы что-либо изменяем.

Затем в нашей onMount() мы запустим саму карту TomTom и назначим ее переменной карты. Кроме того, мы устанавливаем контейнер для хранения карты в пользовательском интерфейсе (UI) как mapElement.

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

onMount(() => {
      map = tt.map({
        key: "<Your API Key",
        container: mapElement,
        stylesVisibility: {
          trafficIncidents: true,
          trafficFlow: true
        },
        center: [longitude, latitude],
        zoom: zoom
      });
    });

В конечном итоге мы отобразим эти элементы в пользовательском интерфейсе. Элемент div, содержащий карту, отображаемую в пользовательском интерфейсе, привязывается непосредственно к элементу mapElement, который мы объявили и назначили ранее в onMount.

Также есть пара тегов ‹input/› для каждого из разделов Start Location и Destination, причем четыре тега input привязаны к переменным. Затем есть один дополнительный тег ‹input/›, который мы аналогичным образом используем для переменной масштабирования.

Мы называем это двусторонней привязкой данных в Svelte. Это позволяет пользователю обмениваться данными в двух направлениях внутри приложения. Наше приложение передает данные непосредственно из шаблонов пользовательского интерфейса в бизнес-логику и наоборот.

Эта привязка данных обеспечивает бесперебойную автоматическую синхронизацию данных между управляемым пользователем интерфейсом и логикой. Привязка данных может одновременно обрабатывать установку значения элемента и прослушивание событий изменения элемента в нашем проекте. Именно этот метод делает Svelte реактивным.

Теперь вернемся к нашему проекту. В приведенном ниже коде мы объявляем переменные внутри логики, и когда значение входных элементов изменяется, оно немедленно синхронизируется с переменными.

Этот метод упрощает обмен данными внутри нашего компонента.

<main>
  <div class="map" bind:this={mapElement}></div>
  <div>
   <h3>Start Location</h3>
   <input placeholder="latitude" bind:value={startLatitude}/>
   <input placeholder="latitude" bind:value={startLongitude}/>
  </div>
  <div>
   <h3>Destination</h3>
   <input placeholder="latitude" bind:value={destinationLatitude}/>
   <input placeholder="latitude" bind:value={destinationLongitude}/>
  </div>
  <input placeholder="Zoom number" type="number" bind:value={zoom}/>
  <button on:click={showRouteLayer}> See route</button>
</main>

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

const showRouteLayer = () => {
  map.addLayer({
    id: "123",
    type: "line",
    source: {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              properties: {},
              coordinates: [
                [parseFloat(startLatitude), parseFloat(startLongitude)],
                [parseFloat(destinationLatitude), parseFloat(destinationLongitude)]
              ]
            }
          }
        ]
      }
    },
    layout: {
      "line-cap": "round",
      "line-join": "round"
    },
    paint: {
      "line-color": "#ff0000",
      "line-width": 2
    }
  });
  map.setCenter([parseFloat(startLatitude), parseFloat(startLongitude)]);
  map.setZoom(zoom);
};

Здесь мы используем стандартный метод addLayer TomTom для получения координат, которые мы установили ранее. Затем он рисует линию между двумя координатами.

Мы также устанавливаем ширину и цвет линии. Затем пользовательский интерфейс центрирует карту по координатам startLatitude и startLongitude и увеличивает масштаб. Такое центрирование и масштабирование помогают создать удобный пользовательский интерфейс.

СЛЕДУЮЩИЕ ШАГИ

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

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

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

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

Эта статья изначально была опубликована на странице developer.tomtom.com/blog.