Map Widget - Address

Determine and Display Address based on a Point on the Map

The example demonstrates interaction with the formcycle map widget, displaying location information, and adding/removing markers (points).

Here's a summary of the functionality:

The map is initialized and responds to a click event.
Upon clicking the map, all markers except the last one are removed, and the coordinates (latitude and longitude) of the last point are displayed.
The `showLocations` function asynchronously retrieves address data for each marker from an API and displays it in a popup on the map.
Functions are provided to show and hide a loading screen while location data is being retrieved.
Error handling is implemented in case fetching address data fails.

Please select a point to determine the address.

50 m

Latitude

Longitude

const mapInstance = $.xutil.xMapApi.instance("[data-name='map1']");

const mapLeaflet = mapInstance.leafletMap();



mapLeaflet.on('click', handleMapClick);



function handleMapClick(event) {

    const current = mapInstance.selectedGeometry();

    mapInstance.selectGeometry({type: current.type, points: current.points.slice(-1) });

    

    const markers = getAllMarkers(this);

    showLocations(markers);

    showXY(markers);

}



function getAllMarkers(leafletMap) {

    const allMarkers = [];

    

    Object.values(leafletMap._layers).forEach(layer => {

        if (layer instanceof L.Marker) {

            allMarkers.push(layer);

        }

    });

    return allMarkers;

}



function showXY(markers) {

    const { lat, lng } = markers[0].getLatLng();

    $('.tfLng').val(lng);

    $('.tfLat').val(lat);

}





function showLoader() {

    $('<div>', {'class':'loaderWrapper'})

    .append($('<div>', {'class':'loader' }))

    .appendTo('body');

}



function hideLoader(){

    $('.loaderWrapper').remove();

}



async function showLocations(markers) {

    showLoader();

    const zoom = mapInstance.leafletMap().getZoom();

    

    for (const marker of markers) {

        const { lat, lng } = marker.getLatLng();

        

        try {

            const response = await $.getJSON({

                url: 'https://nominatim.openstreetmap.org/reverse',

                data: {

                    format: 'json',

                    addressdetails: '1',

                    zoom: zoom,

                    lat: lat,

                    lon: lng

                }

            });

            marker.bindPopup(response.display_name).openPopup();

        } catch (error) {

            console.error('Fehler beim Abrufen der Adresse:', error);

        }

    }

    hideLoader();

}