Бесплатные векторные карты на своём хостинге

Каждый веб-разработчик знает о OpenStreetMap ^[3] (OSM), свободной альтернативе Google Maps. Несмотря на всеобщую известность OSM, у некоторых всё-таки возникают вопросы: как сделать веб-карту с открытыми данными OSM, как самостоятельно публиковать карты?

На эту тему есть популярные руководства ^[4], в том числе по работе с базами PostGIS и запуску тайлсерверов для реализации бесшовных карт OSM. Но есть принципиально иной подход — векторные карты Protomaps ^[2], которые обеспечивают более высокое разрешение, настройку внешнего вида и наложение произвольных меток. Они изначально предполагают максимальную простоту в создании своих карт. А главное, что разместить тайлы можно на своём хостинге ^[5] или в облаке.

Векторные карты Protomaps ^[2] — это простая в использовании система базовых карт. Всего за пару минут можно выбрать любую область и получить автономную карту, работающую локально на вашем сервере/хостинге или без сервера (на S3).

Другими словами, если у нас сайт интернет-магазина, и мы хотим показать посетителям маршрут на карте, то больше не надо платить за использование Google Maps API, можно абсолютно бесплатно захостить тайлы Protomaps (OSM) на своём сервере, и это довольно несложно делается ^[6].

Состав

Карты Protomaps состоят из трёх основных частей:

• PMTiles, открытый формат для пирамид с тайлами, доступный через запросы HTTP Range ^[7], см. реализации PMTiles на Python и JS ^[8].

  Вся пирамида тайлов хранится в одном компактном файле PMTiles, который кодирует данные подобно видеокодекам ^[9].

  

  Разработчик говорит, что PMTiles для векторных данных во многом основан на формате GeoTIFF (COG) ^[10] — это растровый TIFF-файл с особой внутренней организацией, которая позволяет удалённо считывать его из облачного хранилища. PMTiles точно так же оптимизирован для облачных хостингов, хотя имеет несколько ключевых отличий от COG. Он хранит произвольные тайлы, а не только изображения TIFF, и обратно совместим с программами, которые могут читать GeoTIFF. Тем не менее, есть смысл рассматривать PMTiles как «COG для векторных тайлов».

• Экосистема инструментов и библиотек для создания, обслуживания и манипулирования PMTiles.
• Базовая карта (basemap), которая включает основные фичи мира (дороги, водоёмы и метки) из набора данных OpenStreetMap и поставляется в виде одного большого архива PMTiles.

Все библиотеки и форматы Protomaps опубликованы с открытым исходным кодом под свободными лицензиями, включая спецификации и реализации PMTiles, генератор базовых карт, векторный рендерер Leaflet ^[11] и движок хранения данных OSM Express ^[12].

Как захостить Protomaps на своём сервере

Вот краткая инструкция, как установить Protomaps на своём сервере или на виртуальной машине:

1. Установить утилиту командной строки pmtiles ^[13] для управления тайлами. Бинарник лежит на Github, совместим с S3.
2. Инспектируем последний билд базовых карт со страницы https://maps.protomaps.com/builds/ ^[14]:

   pmtiles show https://build.protomaps.com/20240114.pmtiles

   

   Этот файл размером примерно 110 ГиБ содержит все данные, которые распространяет проект OSM (карта всего мира).

   Обычно нам не нужна карта всей планеты, а только небольшой участок.

3. Извлекаем подмножество данных по заданным координатам (прямоугольник, который будет рендерится и отображаться на наших картах). Например, этот прямоугольник может включать город и окрестности.

   Для визуального определения координат можно воспользоваться сервисом Bboxfinder ^[15].

   

   Это координаты области вокруг Санкт-Петербурга. Извлекаем его из общего файла:

   pmtiles extract https://build.protomaps.com/20240114.pmtiles my_area.pmtiles --bbox=58.847859,27.443848,60.802064,33.310547

   

   В результате создаётся файл my_area.pmtiles размером всего 18 МБ — и это мы начертили очень большой прямоугольник. В принципе, если ограничиться только городом, то размер будет в районе 2−3 МБ.

4. На карту можно наложить произвольные маркеры и слои данных (пример ^[16]).
5. Осталось установить на своём сайте векторный рендерер и подгрузить ему тайлы. В качестве рендерера можно использовать protomaps-leaflet ^[17] и др. Подробнее см. документацию ^[18].

   В большинстве случаев для рендеринга рекомендуется Leaflet: это легковесный движок с простым API и большой экосистемой плагинов для UI и визуализации карт. В базовых картах Protomaps используется плагин Leaflet собственной разработки protomaps-leaflet ^[11].

   В случае более сложных веб-карт с «плавным масштабированием» на базе WebGL рекомендуется MapLibre GL JS ^[19]. Это более крупная библиотека с более мощным API для стилизации.

   OpenLayers ^[20] — ещё один продвинутый фронтенд с максимальным функционалом по части GIS. В профессиональных компаниях по разработке геоинформационных сервисов наверняка используют именно его. Поддержка PMTiles в OpenLayers пока считается экспериментальной (неофициальной).

Техническое сравнение Protomaps с другими картами

Можно сравнить ^[21] Protomaps с популярными картографическими сервисами: Google Maps API, OpenStreetMap ^[22] и Mapbox.

▍ Google Maps API

Первое отличие — цена. Google Maps API предлагает щедрый бесплатный тариф в 30 000 загрузок ^[23], но затем взимает довольно высокую плату. В отличие от него, Protomaps изначально спроектирован как система на хостинге ^[5] у пользователя, а именно как 100% статический бэкенд в облачном хранилище. Соответственно, пользователь оплачивает только услуги хостинга ^[5], то есть хранение и трафик, а это копеечная плата по сравнению с тарифами Google Maps.

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

Наконец, Google Maps API приходится использовать через проприетарный Javascript SDK с ограниченными возможностями настройки. Protomaps можно использовать с любой опенсорсной библиотекой, включая Leaflet ^[11], MapLibre GL JS ^[19] и OpenLayers ^[20].

Но если мы укладываемся в бесплатный лимит, а сценарий использования не предполагает ничего сложного, то Google Maps API кажется более предпочтительным вариантом, чем Protomaps.

▍ OpenStreetMap

OpenStreetMap работает по лицензии Open Database License ^[24]. Еженедельно на сайте Planet OSM ^[25] выкладывают новый файл. Это просто набор данных с метками для создания карт. Важно понимать, что проект OSM официально не распространяет карты и не оказывает услуги по поиску и навигации.

У OpenStreetMap есть стандартный слой тайлов openstreetmap-carto ^[26], который отображается на главной странице. Он основан на динамическом рендеринге растровых изображений. В отличие от векторных тайлов, его нельзя настраивать на стороне клиента, он обязательно требует наличия многих вспомогательных программ, таких как PostgreSQL, Apache и Mapnik. Это вспомогательный слой для участников проекта, и по официальным правилам ^[27] запрещено его интенсивное внешнее использование или массовая загрузка.

Проект Protomaps как раз и создан, чтобы преодолеть эти ограничения. Он предоставляет базовые наборы тайлов (basemap) из OSM. Базовый набор включает самые распространённые элементы для фона, такие как водные объекты, океаны, здания и дороги. Это результат обработки тайлов OSM для эффективного интерактивного отображения с помощью генерализации ^[28], организации слоёв ^[29], вычисление яркости и положения меток.

▍ Mapbox

Mapbox — коммерческий провайдер карт на базе OpenStreetMap. Также как в случае Google Maps API, доступ осуществляется через API с оплатой за фактическое использование. В этом и главное отличие от Protomaps, где объём использования не ограничен, а ключи API не требуются. Тут пользователь оплачивает только хостинг ^[5] файлов на своём сервере или в облаке.

Кроме того, данные Mapbox из OSM не всегда актуальные, в то время как Protomaps может обновляться из последних версий датасета OSM сразу после их выхода.

В то же время Protomaps поддерживает совместимость с форматами Mapbox, которые сейчас считаются открытыми стандартами: это библиотека рендеринга фронтенда Mapbox GL (конкретно, форк MapLibre GL ^[19]), а также формат векторных тайлов Mapbox Vector Tile ^[30] (его называют MVT или PBF, ссылаясь на формат сериализации Protocol Buffers ^[31]). Он поддерживается многими GIS-системами, такими как PostGIS ^[32].

Компания Protomaps LLC (на самом деле это один человек ^[33]) зарабатывает на хостинге ^[5] карт: у неё можно зарегистрировать ключ API ^[34] с ограничением 1 млн запросов в месяц. В случае коммерческого использования карт предлагается стать спонсором проекта на GitHub ^[35].

Но при интенсивном использовании лучше разместить тайлы на своём хостинге ^[5] или в облаке: в последнем случае рекомендуют платформу Cloudflare R2 ^[36].

Для сокращения издержек даже издание The Washington Post предпочло заменить Mapbox на опенсорсные решения ^[37]. Они использовали набор технологий: OpenMapTiles ^[38] для генерации тайлов, Maputnik ^[39] для оформления, PMTiles ^[2] для хостинга ^[5] тайлов и Maplibre-gl-js ^[40] для рендеринга на стороне клиента.

Оформление карт в Maputnik

Для чего это всё

Leaflet ^[41] — популярная опенсорсная библиотека для публикации интерактивных карт. С размером всего 42 КБ на JS она эффективно работает на всех мобильных устройствах. Движок protomaps.js ^[42] добавляет к ней векторный рендеринг высокого разрешения с системой картографической символики на основе кода ^[18] (создание меток и маркеров, прямой доступ к Canvas 2D).

В целом, формат MBTiles ^[43] отлично подходит для хостинга ^[5] «кусочка мира» в векторном формате на своём сервере или в облаке.