Skip to content

Area by Point

This example demonstrates how to display area information on a map using the area service. Clicking on any part of the map highlights specific areas based on the selected level.

<!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>