Fläche nach Punkt

Dieses Beispiel zeigt, wie Sie Flächeninformationen mit dem Area Service auf einer Karte anzeigen. Ein Klick auf einen beliebigen Punkt der Karte hebt bestimmte Flächen basierend auf der gewählten Ebene hervor.
<!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/area/umd/area.min.js"></script>
        <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>
            </select>
        </div>
        <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: 10,
                style: smartmapsgl.MapStyle.LIGHT
            });

            const area = new smartmaps.areaService.Area(apiKey);

            map.on('click', async (event) => {
                const params = {
                    point: { latitude: event.lngLat.lat, longitude: event.lngLat.lng },
                    level: document.getElementById('level').value
                };

                const data = await area.point(params);

                if (map.getLayer('geojson-layer')) {
                    map.removeLayer('geojson-layer');
                    map.removeLayer('geojson-outline-layer');
                    map.removeSource('geojson-source');
                }

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

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

                map.addLayer({
                    id: 'geojson-outline-layer',
                    type: 'line',
                    source: 'geojson-source',
                    layout: {},
                    paint: {
                        'line-color': '#ffffff',
                        'line-width': 3
                    }
                });
            });
        </script>
    </body>
</html>