Gebiet nach Punkt

Übergeben Sie eine beliebige Koordinate, ein Rechteck oder eine OSMID an den SmartMaps Area Service; wir ermitteln für Sie die entsprechenden Verwaltungsgebiete oder Postleitzahlengebiete zur Anzeige auf der Karte.
Sie können eine oder mehrere Verwaltungsgrenzen auf der Karte zeichnen. Dazu müssen Sie lediglich einen geografischen Punkt angeben, der innerhalb der zu definierenden Verwaltungsgrenze liegt. Die Verwaltungsebene kann über das Dropdown-Menü geändert werden.
<!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="controls">
            <label for="level">Level:</label>
            <select id="level">
                <option value="0">ZIP</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <!-- Add more options -->
            </select>
        </div>
        <div id="map"></div>
        <script>
            const apiKey = '[INSERT API-KEY]';
            const map = new smartmapsgl.Map({
                apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 10,
                style: smartmapsgl.MapStyle.AUTO
            });

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

                    // Get level from the dropdown menu
                    const level = document.getElementById('level').value;

                    const url = `https://area.smartmaps.cloud/api/v2/Boundaries/point?apiKey=${smartmapsgl.encodeString(apiKey)}&level=${level}&latitude=${latitude}&longitude=${longitude}`;

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            // Remove existing layer
                            if (map.getLayer('geojson-layer')) {
                                map.removeLayer('geojson-layer');
                                map.removeLayer('geojson-outline-layer');
                                map.removeSource('geojson-source');
                            }

                            // Add GeoJSON as source
                            map.addSource('geojson-source', {
                                'type': 'geojson',
                                'data': data
                            });

                            // Add layer to display the GeoJSON
                            map.addLayer({
                                'id': 'geojson-layer',
                                'type': 'fill',
                                'source': 'geojson-source',
                                'layout': {},
                                'paint': {
                                    'fill-color': '#18345c',
                                    'fill-opacity': 0.6,
                                }
                            });

                            // Line-Layer for outline of polygon
                            map.addLayer({
                                'id': 'geojson-outline-layer',
                                'type': 'line',
                                'source': 'geojson-source',
                                'layout': {},
                                'paint': {
                                    'line-color': '#ffffff',
                                    'line-width': 3
                                }
                            });
                        })

                    // Show popup when clicking on a feature 
                    map.on('click', 'geojson-layer', (e) => {
                        const coordinates = e.lngLat;
                        const feature = e.features[0];
                        const name = feature.properties.name;
                        const zip = feature.properties.zip;

                        let popupContent = `<strong>Name:</strong> ${name}`;
                        if (zip) {
                            popupContent = `<strong>ZIP:</strong> ${zip}`;
                        } else {
                            popupContent = `<strong>Name:</strong> ${name}`;
                        }

                        new smartmapsgl.Popup()
                            .setLngLat(coordinates)
                            .setHTML(popupContent)
                            .addTo(map);
                    });

                    // Change the appearance of the mouse pointer when it is moved across the layer 
                    map.on('mouseenter', 'geojson-layer', () => {
                        map.getCanvas().style.cursor = 'pointer';
                    });

                    map.on('mouseleave', 'geojson-layer', () => {
                        map.getCanvas().style.cursor = '';
                    });
                })

                    .catch(error => console.error('Error loading GeoJSON:', error));
            });
        </script>
    </body>
</html>