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>
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP