делаем сервес по  предаставлению данных карт и кординат сделай дизайн хороший сервис подписочный вот основной мой код
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Сервис подписки - Просмотр карт</title>
    <!-- Подключаем стили Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <!-- Подключаем стили Leaflet Draw -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-draw/dist/leaflet.draw.css" />
    <!-- Стили для модального окна и карты -->
    <style>
        body, html { margin: 0; padding: 0; height: 100%; }
        #map { width: 100%; height: 100%; }
        /* Стили для модального окна */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(0,0,0,0.5);
        }
        .modal-content {
            background: #fff;
            margin: 10% auto;
            padding: 20px;
            width: 80%;
            position: relative;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="map"></div>

<!-- Модальное окно -->
<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h2 id="modal-title">Заголовок карты</h2>
        <p id="modal-info">Информация о карте</p>
        <button id="download-btn">Скачать карту</button>
    </div>
</div>

<!-- Подключаем библиотеки JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-draw/dist/leaflet.draw.js"></script>
<!-- Подключение Turf.js для работы с геометрией -->
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>

<script>
// Инициализация карты
var map = L.map('map').setView([55.751244, 37.618423], 5); // Координаты Москвы

// Добавляем слой карты (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap Contributors'
}).addTo(map);

// Массив с координатами и информацией о картах (полигоны и полилинии)
var mapData = [
    {
        id: 1,
        title: "Участок 1",
        info: "Описание участка 1",
        type: "polygon",
        coordinates: [
            [55.75, 37.57],
            [55.75, 37.65],
            [55.70, 37.65],
            [55.70, 37.57],
            [55.75, 37.57]
        ],
        downloadLink: "maps/section1_map.pdf"
    },
    {
        id: 2,
        title: "Участок 2",
        info: "Описание участка 2",
        type: "polyline",
        coordinates: [
            [55.80, 37.50],
            [55.85, 37.55],
            [55.80, 37.60]
        ],
        downloadLink: "maps/section2_map.pdf"
    },
    // Добавьте больше данных по необходимости
];

// Глобальные переменные
var features = []; // Массив слоев (полигоны и полилинии)
var drawnItems = new L.FeatureGroup(); // Слой для нарисованных областей

// Добавляем полигоны и полилинии на карту
mapData.forEach(function(item) {
    var layer;
    if (item.type === "polygon") {
        layer = L.polygon(item.coordinates, {color: 'blue'}).addTo(map);
    } else if (item.type === "polyline") {
        layer = L.polyline(item.coordinates, {color: 'red'}).addTo(map);
    }
    layer.data = item; // Присваиваем данные слою
    layer.originalColor = layer.options.color; // Сохраняем оригинальный цвет
    layer.on('click', onFeatureClick); // Добавляем обработчик клика
    layer.bindTooltip(item.title, { permanent: false, direction: 'auto' }); // Всплывающая подсказка
    features.push(layer); // Добавляем слой в массив
});

// Добавляем слой для нарисованных областей
map.addLayer(drawnItems);

// Настраиваем инструменты рисования
var drawControl = new L.Control.Draw({
    draw: {
        polygon: true, // Разрешаем рисовать полигоны
        polyline: false,
        circle: false,
        circlemarker: false,
        marker: false,
        rectangle: false // Отключаем рисование прямоугольников
    },
    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});
map.addControl(drawControl);

// Обработчик события рисования области
map.on('draw:created', function (e) {
    var layer = e.layer;

    // Очищаем предыдущие выделения и нарисованные полигоны
    drawnItems.clearLayers();
    drawnItems.addLayer(layer);

    // Получаем GeoJSON нарисованного полигона
    var selectArea = layer.toGeoJSON();

    // Сбрасываем стили всех слоев
    features.forEach(function(feature) {
        feature.setStyle({ color: feature.originalColor });
    });

    // Фильтруем слои по точному пересечению и подсвечиваем их
    features.forEach(function(feature) {
        var featureGeoJSON = feature.toGeoJSON();

        var intersects = turf.booleanIntersects(selectArea, featureGeoJSON);

        if (intersects) {
            // Подсвечиваем слой
            feature.setStyle({ color: 'yellow' });
        }
    });
});

// Обработчик события редактирования/удаления области
map.on('draw:edited draw:deleted', function (e) {
    // Сбрасываем стили всех слоев
    features.forEach(function(feature) {
        feature.setStyle({ color: feature.originalColor });
    });

    if (e.type === 'draw:edited') {
        // Получаем все нарисованные полигоны
        var layers = drawnItems.getLayers();

        // Если есть хотя бы один полигон
        if (layers.length > 0) {
            var selectArea = layers[0].toGeoJSON();

            // Фильтруем слои по точному пересечению и подсвечиваем их
            features.forEach(function(feature) {
                var featureGeoJSON = feature.toGeoJSON();

                var intersects = turf.booleanIntersects(selectArea, featureGeoJSON);

                if (intersects) {
                    // Подсвечиваем слой
                    feature.setStyle({ color: 'yellow' });
                }
            });
        }
    }
});

// Обработчик клика по слою (полигону или полилинии)
function onFeatureClick(e) {
    var data = e.target.data;
    // Заполняем модальное окно данными
    document.getElementById('modal-title').innerText = data.title;
    document.getElementById('modal-info').innerText = data.info;
    document.getElementById('download-btn').onclick = function() {
        window.location.href = data.downloadLink;
    };
    // Показываем модальное окно
    document.getElementById('modal').style.display = 'block';
}

// Закрытие модального окна
document.getElementsByClassName('close-btn')[0].onclick = function() {
    document.getElementById('modal').style.display = 'none';
};

// Закрытие модального окна при клике вне его
window.onclick = function(event) {
    var modal = document.getElementById('modal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
};
</script>

</body>
</html>