Geographic Information Systems Asked on June 15, 2021
I wan’t to display GeoJSON data on a Leaflet
map using Django
. Data is from a PostgreSQL
database, I have created a view with raw JSON which returns me data but I wan’t to add this to a Leaflet
map as a GeoJSON. My Leaflet
map display but empty (without data) and I can’t even add a simple marker or a baselayer.
I have read all I found about this (similar issue 1, similar issue 2, similar issue 3, similar issue 4) and tried several codes without success.
Am I missing something big ?
parcelle/views.py
from .models import Parcelle
from django.http import HttpResponse
from django.core.serializers import serialize
from django.views.generic import TemplateView
# GeoJSON
def geojson_view(request):
geom_as_geojson = serialize('geojson', Parcelle.objects.all())
return HttpResponse(geom_as_geojson, content_type='json')
def parcelle_view(request):
redis_key = 'parcelles'
parcelle_as_geojson = cache.get(redis_key)
if not parcelle_as_geojson:
parcelle_as_geojson = serialize('geojson', Parcelle.objects.all())
cache.set(redis_key, parcelle_as_geojson)
return HttpResponse(parcelle_as_geojson, content_type='json')
# Leaflet page
class MainPageView(TemplateView):
template_name = 'parcelle/index.html'
parcelle/models.py
from __future__ import unicode_literals
from django.contrib.gis.db import models
class Parcelle(models.Model):
reference_cadastrale = models.CharField(max_length=14)
location = models.MultiPolygonField(srid=4326)
def __str__(self):
return '{}'.format(self.reference_cadastrale)
def __unicode__(self):
return '{}'.format(self.reference_cadastrale)
parcelle_mapping = {
'reference_cadastrale': 'reference_cadastrale',
'location' : 'MULTIPOLYGON'
}
parcelle/admin.py
from django.contrib.gis import admin
from .models import Parcelle
from leaflet.admin import LeafletGeoAdmin
admin.site.register(Parcelle, LeafletGeoAdmin)
foncier/urls.py
from django.contrib import admin
from django.urls import path
from parcelle.views import geojson_view, parcelle_view, MainPageView
urlpatterns = [
path('admin/', admin.site.urls),
path('parcelle/', MainPageView.as_view(), name='parcelles'),
path('data/', geojson_view, name='data'),
]
foncier/settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'bla bla bla bla'
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.gis',
'foncier',
'parcelle',
'leaflet',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
MIDDLEWARE_CLASSES = [
'django.middleware.cache.UpdateCacheMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.cache.FetchFromCacheMiddleware',
]
CACHES = {
'default': {
'BACKEND': 'redis_cache.RedisCache',
'LOCATION': '127.0.0.1:8000',
},
}
ROOT_URLCONF = 'foncier.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, "templates")],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'foncier.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.contrib.gis.db.backends.postgis',
'NAME': 'myDB',
'USER': 'myUser',
'PASSWORD': 'myPSWD',
'HOST': 'myHost',
'PORT': '1111' # Fake value
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
STATIC_URL = '/static/'
SERIALIZATION_MODULES = {
"geojson": "django.contrib.gis.serializers.geojson",
}
STATICFILES_DIR = (
os.path.join(BASE_DIR, 'static'),
)
LEAFLET_CONFIG = {
'DEFAULT_CENTER': (43.446577,6.079717),
'DEFAULT_ZOOM': 9,
}
parcelle/templates/parcelle/index.html
<html>
{% load leaflet_tags %}
{% load static %}
<head>
<title>My map</title>
{% leaflet_js %}
{% leaflet_css %}
<script src="{% static 'leaflet-ajax/dist/leaflet.ajax.min.js' %}"></script>
<script src="{% static 'spin.js/spin.min.js' %}"></script>
<script src="{% static 'leaflet-spin/leaflet.spin.js' %}"></script>
<style>
#main {width:100%; height:100%;}
</style>
</head>
<body>
<script type="text/javascript">
function map_init_basic (map, options) {
// Layer
var geojsonParcelleLayer = new L.GeoJSON.AJAX("{% url 'parcelles' %}", {
onEachFeature:function(feature, layer) {
layer.bindPopup(feature.properties.reference_cadastrale.toString());
}
});
geojsonParcelleLayer.addTo(map);
// Baselayer
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 = {
"OSM": osm,
"ESRI": esri,
"Google Hybrid": google
};
L.control.layers(baseLayers).addTo(map);
}
</script>
{% leaflet_map "main" callback="window.map_init_basic" %}
</body>
</html>
Edit
var dataurl = '{% url "parcelles" %}';
$.getJSON(dataurl, function (data) {
L.geoJson(data, {
onEachFeature:function(feature, layer) {
layer.bindPopup(feature.properties.reference_cadastrale.toString());
}
}).addTo(map);
});
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP