AirQualityPython/map.html - main - dplvv/Air_quality_monitoring_platform

AirQualityPython/map.html
66 строк3 KB
InventorDreamer
AirQualityPython
15 дек 2024, 15:45
15 дек 2024, 15:45d97adf0
<!DOCTYPE html>
<html>
<head>
    <title>Weather Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Подключаем Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

    <!-- Подключаем Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100vh;"></div>

    <script>
        // Ваш API-ключ OpenWeatherMap
        const API_KEY = 'f671c8937a05bca463b772d6b58d6b8a';

        // Создаем карту и устанавливаем начальные координаты и уровень масштабирования
        const map = L.map('map').setView([51.5074, -0.1278], 5); // Лондон, начальная точка

        // Подключаем базовый слой OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Добавляем слой OpenWeatherMap
        const cloudsLayer = L.tileLayer(`https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${API_KEY}`, {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openweathermap.org/">OpenWeatherMap</a>'
        });

        const precipitationLayer = L.tileLayer(`https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=${API_KEY}`, {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openweathermap.org/">OpenWeatherMap</a>'
        });

        const temperatureLayer = L.tileLayer(`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${API_KEY}`, {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openweathermap.org/">OpenWeatherMap</a>'
        });

        const windLayer = L.tileLayer(`https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${API_KEY}`, {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openweathermap.org/">OpenWeatherMap</a>'
        });

        // Создаем переключатель слоев
        const overlayMaps = {
            "Clouds": cloudsLayer,
            "Precipitation": precipitationLayer,
            "Temperature": temperatureLayer,
            "Wind": windLayer
        };

        // Добавляем переключатель слоев на карту
        L.control.layers(null, overlayMaps).addTo(map);

        // Устанавливаем слой по умолчанию
        cloudsLayer.addTo(map);
    </script>
</body>
</html>