CODEWITHSUNDEEP
javascriptreactjsleafletreverse-geocodingreact-leaflet
Alexey Menog
Alexey Menog

Reputation: 43

How to retrieve a place's address when I know latitude & longitude in React-Leaflet using leaflet-control-geocoder?

I know LatLng, but I would like to retrieve the address similar to the library following link: https://github.com/perliedman/leaflet-control-geocoder, but I don't know how to use this library for react-leaflet 2.1.2.

Upvotes: 4

Views: 7337

Answers (1)

kboul
kboul

Reputation: 14570

To get address using leaflet-control-geocoder you need to use the reverse method like in this example

import L from 'leaflet';
import LCG from 'leaflet-control-geocoder';
...
componentDidMount() {
    const map = this.leafletMap.leafletElement;
    const geocoder = LCG.L.Control.Geocoder.nominatim();
    let marker;

    map.on('click', e => {
        geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), results => {
            var r = results[0];
            if (r) {
                if (marker) {
                    marker.
                        setLatLng(r.center).
                        setPopupContent(r.html || r.name).
                        openPopup();
                } else {
                    marker = L.marker(r.center)
                        .bindPopup(r.name)
                        .addTo(map)
                        .openPopup();
                }
            }
        })
    })
}

in the render method:

const height = {height: '100vh' };
const center = { lat: 51.50, lng: 0.12 };
...
<Map 
    style={height}
    center={center} 
    zoom={18}
    ref={m => { this.leafletMap = m; }}>
    <TileLayer           
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
</Map>

Demo

Upvotes: 6

Related Questions