i am using leaflet to display map in django template. i give latitude, longitude and radius and filter results based on that and try to add marker to map. how ever i couldnt create map markers since i dont know how to pass map object to event and also i wish to know how to get lat lng from the address in leaflet.
index.html
<!DOCTYPE html>
<html>
{% load static %} {% load leaflet_tags %}
<head>
{% leaflet_js %} {% leaflet_css %}
<style>
div#gis {
height: 500px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}"></script>
</head>
<body>
{% csrf_token %}
<label for="latitude">Latitude</label>
<input type="number" name="latitude" id="latitude" step="any">
<br />
<label for="longitude">Longitude</label>
<input type="number" name="longitude" id="longitude" step="any">
<br />
<label for="radius">Radius</label>
<input type="number" name="radius" id="radius" step="any">
<br/>
<button type="submit" onclick="myFunction()">Submit</button>
<script type="text/javascript">
let csrftoken =
document.cookie.replace(/(?:?:^|.*;\s*)csrftoken\s*\=\s* .
([^;]*).*$)|^.*$/, "$1");
function myFunction(){
lat= document.getElementById('latitude').value
lon=document.getElementById('longitude').value
rad=document.getElementById('radius').value
$.ajax({
url: "{% url 'data' %}" + "?
latitude="+lat+"&longitude="+lon+"&radius="+rad,
type: 'POST',
dataType: 'json',
headers: { "X-CSRFToken": csrftoken},
contentType: 'application/json;charset=utf-8',
success:function(response){
response.features.map((map)=>{
Lat = map.geometry.coordinates[1]
Lon = map.geometry.coordinates[0]
L.marker([ Lat,Lon]).addTo(map)
})
},
})
}
</script>
{% leaflet_map "gis" %}
</body>
</html>>
