Skip to content

Area by point

Transfer any coordinate, rectangle or OSMID to the SmartMaps area service; we will determine the corresponding administrative areas or zip code areas for you to display on the map.

You can draw one or more administrative boundaries on the map. All you have to do is indicate a geographical point that lies within the administrative boundary to be defined. The administrative level can be changed by using the dropdown.

<!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=${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>