Хотя TomTom Maps SDK для Web представляет собой библиотеку JavaScript, мы рассмотрим, как включить ее в приложение Spring Boot с использованием Spring MVC и движка шаблонов Thymeleaf.
В этой статье мы рассмотрим, как включить TomTom Maps SDK для Web в приложение Spring Boot, написанное на Java. Вы можете найти исходный код на GitHub , и в этой статье есть теги для каждого шага .
Хотя TomTom Maps SDK для Web представляет собой библиотеку JavaScript, мы рассмотрим, как включить ее в приложение Spring Boot с использованием Spring MVC и движка шаблонов Thymeleaf, который будет генерировать HTML и JavaScript со стороны сервера.
Прежде чем вы что-либо сделаете с TomTom Maps SDK, вам нужно будет получить ключ API , который необходим для использования TomTom Maps API. Как только у вас будет свой ключ API, поместите его в место, которое легко изменить, а не в хранилище исходного кода. Как правило, это должно быть в переменной среды в целевой системе развертывания или в инструменте secrets. Мы рассмотрим несколько способов сделать это в Spring Boot.
Поскольку ключ API в конечном итоге появится на сгенерированной HTML-странице, вы захотите включить безопасность “Белый список доменов” (также известный как “Проверка ссылок”) на панели инструментов разработчика TomTom, чтобы ключ мог использоваться только приложением, развернутым в определенном домене. Вы также захотите свести к минимуму количество продуктов, которые вы включаете для ключа API, только до тех, которые вам нужны для вашего приложения.
Мы будем использовать инструмент spring initializr для создания базового проекта со следующими настройками:
- Проект Maven для Java 11 (при необходимости вы можете использовать Java 8), упакованный в виде JAR
- Spring Boot 2.3.2 (последняя версия на момент написания этой статьи)
- Зависимости:
- Инструменты разработки Spring Boot (всегда удобны для разработки)
- Spring Web (для поддержки Spring MVC)
- Thymeleaf (движок шаблонов)
После того как вы создали и загрузили проект, откройте его в своей любимой среде разработки.
Сначала мы создадим базовый шаблон Thymeleaf, который будет включать необходимые ссылки на TomTom Maps SDK.
Создайте новый HTML-файл в каталоге /src/main/java/resources/templates , назовите его home.html , и поместите в него следующее содержимое:
TomTom Mapping Example
Этот код загрузит как CSS, так и JavaScript Maps SDK непосредственно с CDN TomTom.
В теле страницы создайте заполнитель для карты, который будет занимать всю область отображения (благодаря тегу #map style в заголовке).
Чтобы вызвать отображение карты, используйте функцию tt.map , которая требует, чтобы мы передали ваш ключ API. Чтобы не вводить жесткий код ключа на эту страницу, мы загружаем его с помощью специального встроенного атрибута Thymeleaf JavaScript . Добавляя атрибут th:inline=”javascript” к тегу , мы указываем Thymeleaf искать специальный синтаксис встраивания “двойные квадратные скобки”. Это означает, что следующее будет обработано Thymeleaf, и оно заменит содержимое двойной скобки на apikey, который будет получен из модели Spring.
key: [[${apikey}]], // this will be replaced by Thymeleaf at runtime
Результирующий сгенерированный HTML-код будет выглядеть следующим образом:
key: YOUR_TOM_TOM_API_KEY, // this will be replaced by Thymeleaf at runtime
Начальный контроллер, который мы создадим, прост. Создайте новый класс с именем MapController и добавьте в него следующий код:
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MapController {
@Value("${tomtom.apikey}")
private String tomTomApiKey;
@GetMapping("/")
public String homePage(Model model) {
model.addAttribute("apikey", tomTomApiKey);
return "home";
}
}
Здесь мы используем аннотацию @Value для ввода значения свойства |/| tomtom.apikey
- Файл .spring-boot-devtools.properties (если он у вас есть, и только при локальном запуске)
- Переменная среды
- Файл application.properties
Это далеко не полный список — более подробную информацию см. в документе Spring Boot Externalized Configuration doc.
Наш @GetMapping также прост: мы помещаем ключ api в модель (чтобы он был доступен для отображения в шаблоне Thymeleaf), затем возвращаем имя представления (в данном случае home, чтобы соответствовать home.html файл, который мы созданный ранее).
Если вы все правильно настроили и запустили приложение, вы можете увидеть карту мира, открыв вкладку браузера и перейдя по ссылке http://localhost:8080 :
Мы можем использовать больше возможностей TomTom Maps SDK, добавив на страницу некоторый код JavaScript, а также дополнительные вставки Thymeleaf. В этом примере мы добавим всплывающие маркеры для нескольких местоположений, которые в конечном итоге будут выглядеть следующим образом:
Сначала мы изменим начальную центральную точку и масштаб, добавив еще два свойства в конфигурацию карты:
let map = tt.map({
key: [[${apikey}]], // key will be filled in by Thymeleaf
container: 'map',
style: 'tomtom://vector/1/basic-main',
center: [-35.4400, 37.2787],
zoom: 2
});
Свойство масштабирования поддерживает значения от 1 до 20, соответствующие наибольшему уменьшению до наибольшего увеличения. Мы будем использовать 2, просто немного увеличенный. Свойство center принимает пару координат долгота/широта для центрирования начального отображения карты. Обратите внимание, что эти координаты (и те, которые используются во всем API) являются обратными тому, что даст вам большинство поисков координат, поэтому убедитесь, что вы получили их в правильном порядке: сначала долгота, затем широта.
Далее мы настроим смещения всплывающих окон (подробности см. в справочной документации TomTom SDK ):
const popupOffsets = {
top: [0, 0],
bottom: [0, -50],
'bottom-right': [0, -70],
'bottom-left': [0, -70],
left: [25, -35],
right: [-25, -35]
}
Теперь мы добавим переменную для хранения массива информации о маркерах, которая будет заменена во время выполнения Thymeleaf, и добавим их в качестве всплывающих маркеров с помощью SDK:
// placeholder for data that will be filled in by Thymeleaf
const coolLocations = /*[[${coolLocations}]]*/ null;
coolLocations.forEach(location => {
const marker = new tt.Marker().setLngLat(location.lnglat).addTo(map);
const popup = new tt.Popup({offset: popupOffsets}).setHTML(location.description);
marker.setPopup(popup).togglePopup();
});
Затем в MapController добавьте некоторые из этих интересных местоположений в модель.
Сначала создайте простой статический внутренний класс (который будет использоваться в качестве объекта передачи данных) для хранения пары координат long lat и описания, используемого в приведенном выше JavaScript:
private static class Location {
private final double[] lnglat;
private final String description;
public Location(double[] lnglat, String description) {
this.lnglat = lnglat;
this.description = description;
}
public double[] getLnglat() {
return lnglat;
}
public String getDescription() {
return description;
}
}
Затем создайте несколько местоположений (помните, сначала долгота, затем широта).:
private ListcoolLocations() { return List.of( new Location(new double[]{-121.901481, 36.618253}, "Monterey Bay Aquarium"), new Location(new double[]{21.006010, 52.231606}, "Palace of Culture and Science"), new Location(new double[]{2.337612, 48.860717}, "Louvre Museum") ); }
А теперь добавьте их в модель:
@GetMapping("/")
public String homePage(Model model) {
model.addAttribute("apikey", tomTomApiKey);
model.addAttribute("coolLocations", coolLocations());
return "home";
}
Что приятно, так это то, что Thymeleaf позаботится о преобразовании нашего Списка объектов Location в массив JavaScript для нас при встраивании переменной coolLocations .
Когда вы запустите приложение сейчас, вы увидите карту с появляющимися всплывающими маркерами.
Конечно, вам не обязательно использовать встроенную строку для передачи местоположений в JavaScript, но иногда это полезно, если список местоположений не очень длинный, поскольку страница отображается один раз на сервере, а затем никаких дополнительных вызовов API для отображения местоположений не требуется.
В противном случае — например, если у вас много местоположений или вам нужна фильтрация на основе JavaScript – вы могли бы написать лишь небольшой объем кода JavaScript для извлечения этих местоположений из конечной точки приложения Spring Boot.
В этой статье мы рассмотрели, как создать приложение на основе Spring Boot для создания отображаемого на стороне сервера картографического приложения, которое использует мощный TomTom Maps JavaScript SDK. Мы также рассмотрели способы включения данных из модели Spring MVC непосредственно в код JavaScript, чтобы визуализированная страница была готова к работе без дополнительных вызовов API сервера.
Чтобы узнать больше о всплывающих маркерах, ознакомьтесь с руководством TomTom По местоположению магазина , а также с руководством, в котором показано, как использовать API маршрутизации для таких сервисов, как доставка пиццы . Вы бы использовали те же методы, которые вы видели в этой статье, для создания приложения на основе Spring Boot для предоставления всего необходимого HTML и JavaScript для интерактивного картографического приложения.
Эта статья первоначально появилась на developer.tomtom.com . Первоначальный автор – Роберт Дайболл.
Оригинал: “https://dev.to/tomtomdevs/using-tomtom-maps-with-java-and-spring-43cj”