Skip to content

Weather

This example demonstrates an interactive weather map using the Smartmaps API and weather data. Users can click on any location on the map to retrieve real-time weather information for that specific point. The application displays a popup with detailed weather data, including temperature, rainfall, cloud cover, wind speed and much more. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            html,
            body,
            #map {
                height: 100%;
            }

            #controls {
                position: absolute;
                top: 10px;
                left: 10px;
                background: white;
                padding: 10px;
                z-index: 1;
            }
        </style>
   </head>

    <body>
        <div id="map"></div>
        <script>
            const apiKey = "INSERT API-KEY";
            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 6,
                style: smartmapsgl.MapStyle.AUTO
            });

            map.on('load', () => {
                map.on('click', (e) => {
                    const latitude = e.lngLat.lat;
                    const longitude = e.lngLat.lng;

                        const url = `https://weather.smartmaps.cloud/api/v2/weather/point?apiKey=${apiKey}&latitude=${latitude}&longitude=${longitude}`;

                        return fetch(url)
                            .then(response => response.json())
                            .then(data => {
                                const features = data.features[0];
                                const weather = features.properties.currently;
                                const temperature = weather.temperature2Meters;
                                const rain = weather.rain;
                                const humidity = weather.relativeHumidity2Meters;
                                const precipitation = weather.precipitation;
                                const precipitationProbabiity = weather.precipitationProbability;
                                const showers = weather.showers;
                                const snowfall = weather.snowfall;
                                const cloudCover = weather.cloudCover;
                                const surfacePressure = weather.surfacePressure;
                                const windSpeed = weather.windSpeed10Meters;
                                const windDirection = weather.windDirection10Meters;

                                const popupContent = `
                                    <strong>Weather Information:</strong><br>
                                    Temperature: ${temperature} °C<br>
                                    Rainfall: ${rain} mm<br>
                                    Humidity: ${humidity} %<br>
                                    Precipitation: ${precipitation} mm<br>
                                    Precipitation probability: ${precipitationProbabiity} %<br>
                                    Rain showers: ${showers}<br>
                                    Snowfall: ${snowfall} mm<br>
                                    Cloud cover: ${cloudCover} %<br>
                                    Surface pressure: ${surfacePressure} hPa<br>                                    
                                    Wind Speed: ${windSpeed} m/s<br>
                                    Wind Direction: ${windDirection} °<br>
                                `;

                                new smartmapsgl.Popup()
                                    .setLngLat(e.lngLat)
                                    .setHTML(popupContent)
                                    .addTo(map);
                            });
                });
            });
        </script>
    </body>
</html>