0
284
ViewsHow to build Leaflet control located with marker draggable(update lat/long when drag) & auto update value in lat/long form
I had the existing code which already built with located control and auto update lat/long in value web form(see attached)
Now I want to add a draggable maker when my location is detected and auto update the lat/long when maker pin point changed focus on located control function. My search control function work as expected, it was using markerz as maker.
Here was my existing code:
<script type="text/javascript">
var mymap = L.map(\'dvMap\').setView(['. $pin_lat . ', ' . $pin_long . '],13);
L.tileLayer(\'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png\',{maxZoom: 18,attribution: \'\'}).addTo(mymap);
var markerz = L.marker([' . $pin_lat . ', ' . $pin_long . '],{draggable:
true}).addTo(mymap);
var searchControl = new L.Control.Search({url:
\'//nominatim.openstreetmap.org/search?format=json&q={s}\',jsonpParam:
\'json_callback\',
propertyName: \'display_name\',propertyLoc:
[\'lat\',\'lon\'],marker: markerz,autoCollapse: true,autoType:
true,minLength: 2,});
searchControl.on(\'search:locationfound\', function(obj) {
var lt = obj.latlng + \'\';
var res = lt.split("LatLng(" );
res = res[1].split( ")" );
res = res[0].split( ","
);
document.getElementById(\'map_lat\').value = res[0];
document.getElementById(\'map_long\').value = res[1];
});
mymap.addControl( searchControl );
markerz.on(\'dragend\', function (e) {
document.getElementById(\'map_lat\').value =
markerz.getLatLng().lat;
document.getElementById(\'map_long\').value =
markerz.getLatLng().lng;
});
L.control.locate({
strings: {
title: "Show me where I am!"
}
}).addTo(map);map.on(\'locationfound\',(e)=>{
console.log(e);
document.getElementById(\'map_lat\').value = e.latlng.lat;
document.getElementById(\'map_long\').value = e.latlng.lng;
});
</script>
·
Juan Pablo Isaza
1 answers
Answer question0
You need to call setLatLng() on the marker:
map.on(\'locationfound\',(e)=>{
console.log(e);
markerz.setLatLng(e.latlng);
document.getElementById(\'map_lat\').value = e.latlng.lat;
document.getElementById(\'map_long\').value = e.latlng.lng;
});
·
Juan Pablo Isaza
Report
Answer question