Lealfet spin path in a Django application

Geographic Information Systems Asked on January 3, 2021

I work with Django and Leaflet to create maps applications. I can display a Leaflet map and load data from a GEOJSON. While this GEOJON is loading I wan’t to display a spinner. I used bower to install leaflet-spin :

bower install leaflet-spin

After this, I can see leaflet-spin and spin.js folders and files in myApp/templates/myApp/nodes_modules. Then I added static files in my settings.py :

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

And scripts in my index.html :

{% load static %}
<script src="{% static 'myApp/spin.min.js' %}"></script>
<script src="{% static 'myApp/leaflet.spin.js' %}"></script>

But when the map is loading, Django terminal return me this :

[29/Jul/2020 07:56:30] "GET /static/myApp/leaflet.spin.js HTTP/1.1" 404 1696
Not Found: /favicon.ico

I can see icon file in myApp/templates/myApp/nodes_modules/spin.js/.grunt/grunt-gh-pages/gh-pages/release/favicon.ico but it seems path is not good.

Is there something wrong in my config or have I missing something in my files structure ?

Here is my full index.html

<html>
{% load leaflet_tags %}
{% load static %}
    <head>
        <title>My map</title>
        {% leaflet_js %}
        {% leaflet_css %}
        <script src="{% static 'myApp/spin.min.js' %}"></script>
        <script src="{% static 'myApp/leaflet.spin.js' %}"></script>
        <script src="{% static 'myApp/jquery.min.js' %}"></script>      
        <style media="screen">
        #main {width:100%; height:100%;}
        </style>
    </head>
    <body>
        <script type="text/javascript">         
            function main_map_init (map, options) {

                // Basemap
                var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
                var esri = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
                var google = L.tileLayer('http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}');
                var baseLayers = {
                    "Carte OSM": osm,
                    "Photo ESRI": esri,
                    "Google Hybrid": google
                };
                L.control.layers(baseLayers).addTo(map);

                // Layer
                var dataurl = '{% url "myData" %}';         
                var cadastre = L.geoJson().addTo(map);                  
                
                $.getJSON(dataurl, function (data) {
                    cadastre.fire('data:loaded');
                    cadastre.addData(data, {
                        onEachFeature:function(feature, layer) {
                            layer.bindPopup(feature.properties.reference_cadastrale.toString());
                        }
                    });
                    window.alert("Data loaded");                    
                    map.fitBounds(cadastre.getBounds());
                });
            }
        </script>
        {% leaflet_map "main" callback="window.main_map_init" %}
    </body>
</html>

django leaflet leaflet spin

Add your own answers!

Ask a Question

Get help from others!