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 :

    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

{% load leaflet_tags %}
{% load static %}
        <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%;}
        <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

                // Layer
                var dataurl = '{% url "myData" %}';         
                var cadastre = L.geoJson().addTo(map);                  
                $.getJSON(dataurl, function (data) {
                    cadastre.addData(data, {
                        onEachFeature:function(feature, layer) {
                    window.alert("Data loaded");                    
        {% leaflet_map "main" callback="window.main_map_init" %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.