исправь ошибки  и  доработай интерфейс
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>GeoMap Pro - Сервис подписки</title>
    <!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Подключаем стили 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%;
            font-family: 'Arial', sans-serif;
        }
        /* Высота карты */
        #map {
            width: 100%;
            height: calc(100vh - 56px); /* Учитываем высоту навбара */
        }
        /* Настройка тултипов Leaflet */
        .leaflet-tooltip {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #6c757d;
            border-radius: 4px;
            color: #343a40;
            font-size: 14px;
            padding: 2px 6px;
        }
        /* Стили для модальных окон */
        .modal-content {
            background: #f8f9fa;
            border-radius: 10px;
        }
        .close-btn {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <!-- Навигационная панель -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">GeoMap Pro</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="tab">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#news" data-toggle="tab">Новости</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" data-toggle="tab">О нас</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact" data-toggle="tab">Контакты</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn btn-primary text-white ml-2" id="subscribeBtn" href="#">Подписаться</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link ml-2" id="loginBtn" href="#">Войти</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Контейнер вкладок -->
    <div class="tab-content">

        <!-- Вкладка Главная (Карты) -->
        <div class="tab-pane fade show active" id="home">
            <div id="map"></div>

            <!-- Модальное окно информации о карте -->
            <div id="modal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 id="modal-title" class="modal-title">Заголовок карты</h5>
                            <button type="button" class="close close-btn" data-dismiss="modal" aria-label="Закрыть">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p id="modal-info">Информация о карте</p>
                        </div>
                        <div class="modal-footer">
                            <button id="download-btn" class="btn btn-primary">Скачать карту</button>
                            <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Закрыть</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Вкладка Новости -->
        <div class="tab-pane fade" id="news">
            <div class="container mt-4">
                <h2>Последние Новости</h2>
                <!-- Пример новостей -->
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">Обновление картографического сервиса</h5>
                        <h6 class="card-subtitle mb-2 text-muted">12 апреля 2024</h6>
                        <p class="card-text">Мы рады сообщить о запуске новой версии нашего картографического сервиса с улучшенными функциями и удобным интерфейсом.</p>
                        <a href="#" class="card-link">Читать далее</a>
                    </div>
                </div>
                <!-- Добавьте больше новостей по необходимости -->
            </div>
        </div>

        <!-- Вкладка О нас -->
        <div class="tab-pane fade" id="about">
            <div class="container mt-4">
                <h2>О GeoMap Pro</h2>
                <p>
                    GeoMap Pro — это передовой картографический сервис, предлагающий интерактивные карты, подробные географические данные и различные инструменты для анализа пространственной информации.
                </p>
                <!-- Остальной контент -->
            </div>
        </div>

        <!-- Вкладка Контакты -->
        <div class="tab-pane fade" id="contact">
            <div class="container mt-4">
                <h2>Контакты</h2>
                <!-- Контент вкладки Контакты -->
            </div>
        </div>

    </div>

    <!-- Модальные окна для Входа и Регистрации -->
    <!-- Модальное окно для входа -->
    <div id="loginModal" class="modal" tabindex="-1" role="dialog">
        <!-- Контент модального окна Входа -->
    </div>

    <!-- Модальное окно для регистрации -->
    <div id="signupModal" class="modal" tabindex="-1" role="dialog">
        <!-- Контент модального окна Регистрации -->
    </div>

    <!-- Подключаем библиотеки JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <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);

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

    // Данные карт
    var mapData = [
        // Ваши данные
    ];

    var features = [];
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Добавляем слои на карту
    mapData.forEach(function(item) {
        var layer;
        if (item.type === "polygon") {
            layer = L.polygon(item.coordinates, {color: '#007bff', fillOpacity: 0.5});
        } else if (item.type === "polyline") {
            layer = L.polyline(item.coordinates, {color: '#dc3545'});
        }
        layer.data = item;
        layer.originalColor = layer.options.color;
        layer.on('click', onFeatureClick);
        layer.bindTooltip(item.title, { permanent: false, direction: 'auto' });
        layer.addTo(map);
        features.push(layer);
    });

    // Инструменты рисования
    var drawControl = new L.Control.Draw({
        draw: {
            polygon: true,
            rectangle: false,
            polyline: false,
            circle: false,
            marker: false,
            circlemarker: false
        },
        edit: {
            featureGroup: drawnItems,
            remove: true
        }
    });
    map.addControl(drawControl);

    // Обработчик рисования
    map.on('draw:created', function (e) {
        var layer = e.layer;
        drawnItems.clearLayers();
        drawnItems.addLayer(layer);
        var selectArea = layer.toGeoJSON();
        resetFeatureStyles();
        highlightIntersectingFeatures(selectArea);
    });

    // Обработчик редактирования/удаления
    map.on('draw:edited draw:deleted', function () {
        resetFeatureStyles();
        var layers = drawnItems.getLayers();
        if (layers.length > 0) {
            var selectArea = layers[0].toGeoJSON();
            highlightIntersectingFeatures(selectArea);
        }
    });

    // Сброс стилей
    function resetFeatureStyles() {
        features.forEach(function(feature) {
            feature.setStyle({ color: feature.originalColor });
            feature.bringToBack();
        });
    }

    // Подсветка пересекающихся слоев
    function highlightIntersectingFeatures(selectArea) {
        features.forEach(function(feature) {
            var featureGeoJSON = feature.toGeoJSON();
            var intersects = turf.booleanIntersects(selectArea, featureGeoJSON);
            if (intersects) {
                feature.setStyle({ color: '#ffc107' });
                feature.bringToFront();
            }
        });
        drawnItems.eachLayer(function(layer) {
            layer.bringToBack();
        });
    }

    // Обработчик клика по слою
    function onFeatureClick(e) {
        var data = e.target.data;
        $('#modal-title').text(data.title);
        $('#modal-info').text(data.info);
        $('#download-btn').off('click').on('click', function() {
            window.location.href = data.downloadLink;
        });
        $('#modal').modal('show');
    }

    // Обработчики модальных окон
    $('.close-btn').on('click', function() {
        $(this).closest('.modal').modal('hide');
    });

    $('#loginBtn').on('click', function(e) {
        e.preventDefault();
        $('#loginModal').modal('show');
    });

    $('#subscribeBtn').on('click', function(e) {
        e.preventDefault();
        $('#signupModal').modal('show');
    });

    // Обработка форм
    // Обработчик формы входа
    $('#loginForm').on('submit', function(e) {
        e.preventDefault();
        // Логика входа
        $('#loginModal').modal('hide');
    });

    // Обработчик формы регистрации
    $('#signupForm').on('submit', function(e) {
        e.preventDefault();
        // Логика регистрации
        $('#signupModal').modal('hide');
    });

    // Форма контакта
    $('#contactForm').on('submit', function(e) {
        e.preventDefault();
        // Логика отправки сообщения
        alert('Ваше сообщение отправлено!');
        $(this).trigger('reset');
    });
    </script>

</body>
</html>