Добавление оффлайн карт с open street map (osm) на web страницу
Долгое предисловие
Задался я как-то вопросом собрать GPS-ошейник для шерстяного спутника моей жизни, дабы этот кракен сухопутный мог бороздить лесные просторы без особого ущерба для моей нервной системы. Собрать саму «шайтан-машинку» планирую на двух ESP32, двух GPS-модулях NEO-6M и Lora-модулях E22 для дальней связи, чтобы работало везде, всегда и безотказно.
Пока имею тестовый стенд без Lora, но так как они занимают не самую основную роль, можно и протестировать. Однако, чтобы отображать карту в веб-интерфейсе, нужны глубокие познания и магические способности властелинов кода, которых у меня нет. Поиски в глобальной сети дали не очень ясную картину того, как я могу это сделать, так как написаны сложными буквами и страшными словами.
И вот, я решил поделиться тем, что нашёл, понял и применил.
Что понадобится:
Что получилось:
Для начала нужно получит готовые тайлы (мини фрагменты наше карты).
Распаковываем Mapertive и запускаем, в основное окно подгружается карта, для дальнейшего ускорения генерации тайлов рекомендую заранее подготовить участок карты в формате .osm, который можно экспортировать на официальном сайте OpenStreetMap, и открыть вместо стандартной карты.
Во вкладке Map устанавливаем границы участка для нарезки Map → Set Printing Bounds
В терминале вводи команду generate-tiles maxzoom=* minzoom=*, где maxzoom — максимальное приближение, minzoom — максимальное отдаление.
После завершения генерации тайлов, они появятся в папке Tiles, которую мы копируем в папку нашего будущего проекта.
В папку с проектом добавляем загруженную библиотеку и создаём html страницу вот с таким кодом:
Отображение тайлов OSM
<script src="leaflet/leaflet.js"></script>
<script>
// Создание карты
var map = L.map('map').setView([51.710298, 46.748233], 11);
// Добавление слоя тайлов
L.tileLayer('Tiles/{z}/{x}/{y}.png', {
maxZoom: 17,
minZoom: 10,
tileSize: 256,
zoomOffset: 0,
attribution: 'Your attribution goes here' // Здесь можно указать атрибуцию для слоя тайлов
}).addTo(map);
</script>
Остаётся изменить координаты начального фокуса и значения zoom под ваши .
