GeoJSON-Linie

Zeigen Sie einen GeoJSON-LineString auf der Karte an, der mehrere Städte verbindet, mit Markern an jeder Station.
<!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%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            const map = new smartmapsgl.Map({
                apiKey: "[INSERT API-KEY]",
                container: "map",
                center: { lat: 50.0, lng: 10.0 },
                zoom: 6,
                style: smartmapsgl.MapStyle.ESSENTIAL
            });

            // A route through several German cities
            const route = {
                type: "Feature",
                geometry: {
                    type: "LineString",
                    coordinates: [
                        [9.9937, 53.5511],   // Hamburg
                        [13.405, 52.52],      // Berlin
                        [12.3731, 51.3397],   // Leipzig
                        [11.582, 48.1351],    // Munich
                        [9.1829, 48.7758],    // Stuttgart
                        [8.6821, 50.1109],    // Frankfurt
                        [6.7735, 51.2277]     // Düsseldorf
                    ]
                }
            };

            map.on("load", () => {
                map.addSource("route", { type: "geojson", data: route });

                // Dashed background line
                map.addLayer({
                    id: "route-background",
                    type: "line",
                    source: "route",
                    layout: { "line-join": "round", "line-cap": "round" },
                    paint: {
                        "line-color": "#18345c",
                        "line-width": 8,
                        "line-opacity": 0.3
                    }
                });

                // Solid route line
                map.addLayer({
                    id: "route-line",
                    type: "line",
                    source: "route",
                    layout: { "line-join": "round", "line-cap": "round" },
                    paint: {
                        "line-color": "#18345c",
                        "line-width": 4
                    }
                });

                // Add markers at each stop
                const cities = ["Hamburg", "Berlin", "Leipzig", "Munich", "Stuttgart", "Frankfurt", "Düsseldorf"];
                route.geometry.coordinates.forEach((coord, i) => {
                    new smartmapsgl.Marker({ color: "#18345c" })
                        .setLngLat(coord)
                        .setPopup(new smartmapsgl.Popup({ offset: 25 }).setText(cities[i]))
                        .addTo(map);
                });

                // Fit map to route
                const bounds = new smartmapsgl.LngLatBounds();
                route.geometry.coordinates.forEach(coord => bounds.extend(coord));
                map.fitBounds(bounds, { padding: 50 });
            });
        </script>
    </body>
</html>