[Answered ]-Leaflet multiple markers django map reference?

by

2👍

✅

I’m really unfamiliar with django, so i could be wrong but doesn’t your for loop insert multiple map_init_basic methods/callbacks? So you declaring the same callback function over and over? And only one will execute on map initialization. My guess is that you should put the for loop in the callback function around the marker declaration:

<script type="text/javascript">

    function map_init_basic (map, options) {

        {% for device in latest_device_list %}

            marker = new L.marker([{{device.Device_Lat}}, {{device.Device_Lon}}])
                .bindPopup("<h3>"+{{device.Device_IMEI}}+"</h3>")
                .addTo(map);  

        {% endfor %}

    }

</script>

What’s happening now is that when you have say three markers in your device list, it would end up like this:

<script type="text/javascript">

    function map_init_basic (map, options) {
        marker = new L.marker([0, 0])
            .bindPopup("<h3>"+ 'ABC' +"</h3>")
            .addTo(map);  
    }
    function map_init_basic (map, options) {
        marker = new L.marker([1, 1])
            .bindPopup("<h3>"+ 'DEF' +"</h3>")
            .addTo(map);  
    }
    function map_init_basic (map, options) {
        marker = new L.marker([2, 2])
            .bindPopup("<h3>"+ 'GHI' +"</h3>")
            .addTo(map);  
    }

</script>

The second function declaration, will overwrite the first, and the third will overwrite the second. So when map_init_basic gets called only the third function will execute.

👤iH8

0👍

Corrected code:

{% if latest_device_list %}
 <script type="text/javascript">
  function map_init_basic (map, options) {
   var marker = null;
   map.setView([51.505, -0.09], 13);
    {% for device in latest_device_list %}
        marker = new L.marker([{{device.Device_Lat}}, {{device.Device_Lon}}])
		.bindPopup("<h3>"+{{device.Device_IMEI}}+"</h3>")
		.addTo(map);  
    {% endfor %}
	 }
	</script>
{% else %}
    <p>No Devices are available.</p>
{% endif %}
  {% leaflet_map "yourmap" callback="window.map_init_basic" %}   
</body>
👤user3470096

Leave a comment