Skip to content

Forward geocoding based on a single-slot input field

This example demonstrates a simple and efficient geocoding process using a single-slot input field. Users can enter an address into a field. The given address is then converted into geographic coordinates (latitude and longitude), that are displayed on the map using a marker.

<!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;
                font-family: Arial, sans-serif;
            }

            html,
            body,
            #map {
                height: 100%;
            }

            #input-container {
                position: absolute;
                z-index: 1;
                top: 10px;
                left: 10px;
                background-color: white;
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            }

            #address-input {
                width: 300px;
                padding: 5px;
            }

            #submit-button {
                padding: 5px 10px;
                margin-left: 5px;
            }
        </style>
    </head>

    <body>
        <div id="input-container">
            <input type="text" id="address-input" placeholder="Enter address or search string">
            <button id="submit-button">Geocode</button>
        </div>
        <div id="map"></div>

        <script>
            const apiKey = "INSERT API-KEY";

            // Initialize the map
            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 14,
                style: smartmapsgl.MapStyle.LIGHT
            });

            // Variable to store the current marker (so we can remove it on new searches)
            let currentMarker = null;

            document.getElementById('submit-button').addEventListener('click', async () => {
                const searchString = document.getElementById('address-input').value;

                if (!searchString) {
                    alert("Please enter an address or search string.");
                    return;
                }

                // Prepare the geocode request
                const geocodeRequest = {
                    type: "Feature",
                    properties: {},
                    geometry: {
                        type: "Point",
                        coordinates: [0, 0] // Dummy coordinates
                    },
                    crs: {
                        type: "name",
                        properties: {
                            name: "urn:ogc:def:crs:OGC:1.3:CRS84"
                        }
                    },
                    searchparams: {
                        geocodingType: "GEOCODE",
                        coordFormatOut: "GEODECIMAL_POINT"
                    },
                    authentication: {
                        channel: "Test123"
                    },
                    location: {
                        singleSlot: searchString
                    }
                };

                try {
                    // Send the geocode request
                    const response = await fetch(`https://www.yellowmap.de/api_rst/v2/geojson/geocode?apiKey=${apiKey}`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(geocodeRequest)
                    });

                    const geocodeData = await response.json();

                    if (geocodeData.features && geocodeData.features.length > 0) {
                        const coordinates = geocodeData.features[0].geometry.coordinates;

                        // Center the map on the new coordinates
                        map.setCenter({ lat: coordinates[1], lng: coordinates[0] });

                        // Remove the old marker if it exists
                        if (currentMarker) {
                            currentMarker.remove();
                        }

                        // Add the new marker
                        currentMarker = new smartmapsgl.Marker()
                            .setLngLat([coordinates[0], coordinates[1]])
                            .addTo(map);
                    } else {
                        alert("No results found.");
                    }
                } catch (error) {
                    console.error('Error during geocoding:', error);
                    alert("An error occurred while geocoding.");
                }
            });
        </script>
    </body>

</html>