CODEWITHSUNDEEP
javascripthtmlleaflet
莎拉Sarah
莎拉Sarah

Reputation: 109

How to marker search become draggable and give the Longitude & latitude in leaflet

I want my leaflet map able to drag the marker and get the longitude and latitude. The marker show from search result. Here my js code but I'm stuck T^T please help me. Thank you

and here my HTML for address and Latitude Longitude

<form>
 <p>
    <label for="address">Address</label>
    <input id="address">
  </p>

   <p>
      <label for="latitude">Lintang</label>
      <input id="latitude" placeholder="-6.922045042885848">
   </p>

    <p>
      <label for="longitude">Bujur</label>
      <input id="longitude" placeholder="107.61605564716159">
    </p>
</form>

<div class="frame-lokasi">
  <div id="map"></div>
</div>

here my js

var map = L.map('map', {
        center: [-6.922045042885848, 107.61605564716159],
        zoom: 18
    });

    L.control.scale().addTo(map);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var searchControl = new L.esri.Controls.Geosearch().addTo(map);

    var results = new L.LayerGroup('resuls', {draggable: true}).addTo(map);

    var marker = L.marker([-6.922045042885848, 107.61605564716159], {
        draggable: true
    }).addTo(map);

    marker.on('dragend', function (e) {
        document.getElementById('latitude').value = marker.getLatLng().lat;
        document.getElementById('longitude').value = marker.getLatLng().lng;
    });

    searchControl.on('results', function(e){
        results.clearLayers();
        for (var i = e.results.length - 1; i >= 0; i--) {
            results.addLayer(L.marker(e.results[i].latlng));
        }
    });

    setTimeout(function(){$('.pointer').fadeOut('slow');},3400);

Upvotes: 2

Views: 482

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Update this line: results.addLayer(L.marker(data.results[i].latlng));

searchControl.on('results', function(e) {
    results.clearLayers();
    for (var i = e.results.length - 1; i >= 0; i--) {
        var searchMarker = L.marker(data.results[i].latlng, {
            draggable: true
        });
        document.getElementById('latitude').value = searchMarker.getLatLng().lat; 
        document.getElementById('longitude').value = searchMarker.getLatLng().lng;

        searchMarker.on('dragend', function(e) {
            console.log(e);
            var _marker = e.target;
            console.log(_marker.getLatLng())
            document.getElementById('latitude').value = _marker.getLatLng().lat; 
            document.getElementById('longitude').value = _marker.getLatLng().lng;
        })
        results.addLayer(searchMarker);
    }
});

And is data.results a typo? L.marker(data.results[i].latlng, { data is nowhere defined maybe e.results

Upvotes: 1

Related Questions