Passing leaflet map object to a event

Question

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>>

Passing leaflet map object to a event

0 Answers0