AirQualityPython/map.py - main - dplvv/Air_quality_monitoring_platform

AirQualityPython/map.py
82 строки3 KB
InventorDreamer
AirQualityPython
15 дек 2024, 15:45
15 дек 2024, 15:45d97adf0
import dash
import dash_leaflet as dl
from dash import html

# Ваш API-ключ OpenWeatherMap
API_KEY = "f671c8937a05bca463b772d6b58d6b8a"  # Замените на ваш API-ключ

# Создаем Dash-приложение
app = dash.Dash(__name__)

# Настройка слоев OpenWeatherMap
clouds_layer = dl.TileLayer(
    url=f"https://tile.openweathermap.org/map/clouds_new/{{z}}/{{x}}/{{y}}.png?appid={API_KEY}",
    attribution=None  # Убираем атрибуцию
)

precipitation_layer = dl.TileLayer(
    url=f"https://tile.openweathermap.org/map/precipitation_new/{{z}}/{{x}}/{{y}}.png?appid={API_KEY}",
    attribution=None  # Убираем атрибуцию
)

temperature_layer = dl.TileLayer(
    url=f"https://tile.openweathermap.org/map/temp_new/{{z}}/{{x}}/{{y}}.png?appid={API_KEY}",
    attribution=None  # Убираем атрибуцию
)

wind_layer = dl.TileLayer(
    url=f"https://tile.openweathermap.org/map/wind_new/{{z}}/{{x}}/{{y}}.png?appid={API_KEY}",
    attribution=None  # Убираем атрибуцию
)

# Основной макет приложения
app.layout = html.Div([
    html.H1("Weather Map Viewer", style={"textAlign": "center"}),

    # Карта с начальной точкой и масштабом
    dl.Map(
        center=[51.5074, -0.1278],  # Лондон
        zoom=5,
        children=[
            dl.TileLayer(attribution=None),  # Базовый слой OpenStreetMap без атрибуции
            dl.LayersControl([
                dl.Overlay(clouds_layer, name="Clouds", checked=True),  # Облачность
                dl.Overlay(precipitation_layer, name="Precipitation", checked=False),  # Осадки
                dl.Overlay(temperature_layer, name="Temperature", checked=False),  # Температура
                dl.Overlay(wind_layer, name="Wind", checked=False)  # Ветер
            ])
        ],
        style={"height": "80vh", "width": "100%"}  # Устанавливаем высоту и ширину карты
    )
])

# Добавление CSS для скрытия атрибуции
app.index_string = """
<!DOCTYPE html>
<html>
<head>
    <title>Weather Map</title>
    <style>
        .leaflet-control-attribution { 
            display: none !important;  /* Убираем нижний правый угол */
        }
    </style>
</head>
<body>
    <div id="react-entry-point">
        {%app_entry%}
    </div>
    <footer>
        {%config%}
        {%scripts%}
        <script id="_dash-renderer" type="application/javascript">
            new DashRenderer();
        </script>
    </footer>
</body>
</html>
"""

# Запуск сервера
if __name__ == '__main__':
    app.run_server(debug=True)