Долгое предисловие

Задался я как-то вопросом собрать GPS-ошейник для шерстяного спутника моей жизни, дабы этот кракен сухопутный мог бороздить лесные просторы без особого ущерба для моей нервной системы. Собрать саму “шайтан-машинку” планирую на двух ESP32, двух GPS-модулях NEO-6M и Lora-модулях E22 для дальней связи, чтобы работало везде, всегда и безотказно.

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

И вот, я решил поделиться тем, что нашёл, понял и применил.

Что понадобится:

Что получилось:

Для начала нужно получит готовые тайлы (мини фрагменты наше карты).

  1. Распаковываем Mapertive и запускаем, в основное окно подгружается карта, для дальнейшего ускорения генерации тайлов рекомендую заранее подготовить участок карты в формате .osm, который можно экспортировать на официальном сайте OpenStreetMap, и открыть вместо стандартной карты.

  2. Во вкладке Map устанавливаем границы участка для нарезки Map -> Set Printing Bounds

  3. В терминале вводи команду generate-tiles maxzoom=* minzoom=*, где maxzoom - максимальное приближение, minzoom - максимальное отдаление.

  4. После завершения генерации тайлов, они появятся в папке Tiles, которую мы копируем в папку нашего будущего проекта.

  5. В папку с проектом добавляем загруженную библиотеку и создаём html страницу вот с таким кодом:

<!DOCTYPE html>
<html>
<head>
    <title>Отображение тайлов OSM</title>
    <style>
        /* Стили для контейнера карты */
        #map { 
            margin: 20px 20px 20px;
            height: 700px;
            border-radius: 50px;
            text-align:center;
        }
    </style>
    <link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- Подключение CSS-файла Leaflet -->
</head>
<body>
    <div id="map"> <!-- Контейнер карты -->
        <script src="leaflet/leaflet.js"></script> <!-- Подключение JavaScript-файла Leaflet -->
        <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>
    </div>
</body>

Остаётся изменить координаты начального фокуса и значения zoom под ваши .

Если кто имеет опыт работы в данной сфере буду рад услышать советы и рекомендации