Карты удобны, но они не всегда так интересны, как могли бы быть. Мы продемонстрируем инструмент Map Styler для нового TomTom Maps SDK, создав пользовательскую тему Хэллоуина, которую можно применить к любой карте.

Карты отличные. С распространением устройств с функцией определения местоположения приложения, которые так или иначе используют местоположение, стали неотъемлемой частью нашей жизни.

Однако есть одна загвоздка. Большинство картографических приложений используют стиль карты по умолчанию, который может быть или не легко читаться. Как вы можете видеть на карте ниже, обычно это не так уж и плохо. Стиль карт TomTom по умолчанию (показан ниже) довольно стандартный:

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

Таким образом, вы можете создавать действительно уникальные карты с помощью Map Styler. Что может быть лучше для изучения этих особенностей, чем веселая (и соответствующая сезону) карта Хэллоуина? Давайте посмотрим, как вы можете использовать настройщик, чтобы максимизировать жуткий фактор вашей карты.

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

Теперь, когда у вас есть карта, давайте перейдем к инструменту Стиль карты. В соответствии с духом Хэллоуина я решил сделать сушу на карте черным цветом, водоемы — кроваво-красным, а дороги — тыквенно-оранжевым. Это всего лишь предложения. Смело придумывайте свое веселое и пугающее (или праздничное) сочетание цветов!

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

Чтобы создать нашу карту Хэллоуина, мы сделаем две вещи: во-первых, мы изменим цвет зданий на тыквенно-оранжевый. Тогда мы сделаем реки, озера и океаны кроваво-красными, а не синими.

Чтобы отредактировать объект карты, нажмите на него. Когда вы это сделаете, вы увидите небольшое всплывающее окно с сообщением о том, какие слои присутствуют в этом месте. Например, если вы нажмете на воду недалеко от центра Сан-Франциско, вы увидите следующее:

С точки зрения карт вода не сложна, поэтому присутствует только один слой. Нажмите «Океан или море», чтобы увидеть панель свойств, содержащую редактируемые свойства слоя карты океана. Прокрутите вниз до заголовка «Свойства краски», где вы найдете цвета, которые вы можете редактировать:

Погодите-ка, а почему у океана два разных цвета? Океан не выглядит разноцветным на карте! Два числа слева от цвета — в данном случае 0 и 6 — представляют уровень масштабирования карты, при котором или выше применяется цвет. Итак, здесь океан выглядит немного другим цветом в зависимости от уровня масштабирования карты. Поскольку мы всегда хотим, чтобы наш океан Хэллоуина был кроваво-красным, давайте удалим одну из остановок и установим для оставшейся красивый темно-красный оттенок:

Жуткий! Теперь давайте щелкнем по населенному пункту, чтобы сделать все населенные пункты черными:

Сан-Франциско выглядит более зловещим, чем минуту назад, но к северу от моста Золотые Ворота все еще есть немного зелени. Если вы нажмете на него, вы увидите, что это национальный парк — часть Национальной зоны отдыха «Золотые ворота». Национальные и государственные парки, а также другие подобные территории подпадают под свою собственную цветовую схему, чтобы пользователи могли легко их идентифицировать. Здесь мы собираемся изменить его с парка на темный, чтобы соответствовать нашей теме Хэллоуина:

Теперь мы куда-то попали! У нас есть индивидуальный стиль карты. Давайте экспортируем этот стиль из настройщика, а затем применим его к карте. Чтобы экспортировать его, нажмите «Экспорт» в левом верхнем углу окна настройщика. Когда вы это сделаете, вы увидите, что ваш браузер загружает файл JSON, который мы будем использовать через мгновение.

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

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

Теперь, когда у нас есть настроенный стиль карты, давайте добавим его к карте, которую мы создали ранее. Чтобы добавить стиль, мы внесем небольшую модификацию в код инициализации нашей карты:

var map = tt.map({
  key: "<Your API Key Goes Here>",
  container: "map",        //style: 'tomtom://vector/1/basic-main',
  style: "http://localhost:8080/main.json",
  center: [-122.419948, 37.779241],
  zoom: 11.5
});

Теперь наша карта использует стиль Хэллоуина, который мы создали в настройщике! (Обратите внимание, что я добавил стиль main.json в корневой каталог и загружаю его из корневого каталога, который обслуживается http-сервером Node. Если вы поместите стиль в другом месте или вы используете другой метод обслуживания HTML и JavaScript, свойство стиля вашей карты может выглядеть иначе.)
Если мы загрузим нашу карту в браузере, мы увидим это:

Если мы загрузим нашу карту в браузере, мы увидим это:

Как видите, пользовательский стиль карты работает должным образом.

ВРЕМЯ ТЫКВЫ!

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

К счастью, TomTom позволяет легко добавлять пользовательские маркеры на карту. Обычно маркер выглядит так:

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

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

tt.setProductInfo("Halloween Map", "1.0");
var map = tt.map({
  key: "<Your API Key Goes Here>",
  container: "map",
  style: "http://localhost:8080/main.json",
  center: [-122.419948, 37.779241],
  zoom: 11.5
});
function getRandomCoordinate(min, max) {
  return Math.random() * (max - min) + min;
}
      
for(var p = 0; p < 20; p++) {
  var northWest = map.getBounds().getNorthWest();
  var southEast = map.getBounds().getSouthEast();
  var minLng = Math.min(northWest.lng, southEast.lng);
  var maxLng = Math.max(northWest.lng, southEast.lng);
  var minLat = Math.min(northWest.lat, southEast.lat);
  var maxLat = Math.max(northWest.lat, southEast.lat);
  var markerLng = getRandomCoordinate(minLng, maxLng);
  var markerLat = getRandomCoordinate(minLat, maxLat);
  var el = document.createElement("div");
  el.style.backgroundImage ="url(http://localhost:8080/pumpkin.svg)";
  el.style.width = "25px";
  el.style.height = "25px";
  el.style.backgroundRepeat = "no-repeat";
  el.addEventListener("click", function(e) {
    window.alert(`I'm a pumpkin at coordinates ${markerLng},${markerLat}!`);
  });
  // add marker to map
  new tt.Marker(el)
    .setLngLat([markerLng, markerLat])
    .addTo(map);
}

Давайте быстро посмотрим, что происходит.

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

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

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

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

После этого мы используем DOM API для создания нового элемента для нашего пользовательского маркера тыквы. Здесь мы не будем делать ничего необычного — просто создадим элемент div, зададим его ширину и высоту, а также настроим его фоновое изображение для использования нашей тыквы SVG. Мы также добавляем обработчик кликов, который заставляет каждую тыкву объявлять свое местоположение.

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

Это жуткая карта!

КОШЕЛЕК ИЛИ ЖИЗНЬ

С очень небольшим количеством пользовательского кода мы смогли создать собственную карту Хэллоуина! И, развлекаясь, мы также узнали, как использовать Map Styler и добавлять пользовательские маркеры на нашу карту.

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

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

Какие жуткие особенности вы можете придумать для своей карты Хэллоуина? Создайте что-нибудь веселое, а затем поделитесь этим с нами в Твиттере!

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