Edit Django geometries fields with Leaflet
source link: https://blog.mathieu-leplatre.info/edit-django-geometries-fields-with-leaflet.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Edit Django geometries fields with Leaflet
Wed 26 March 2014After the previous article regarding Django, Leaflet and GeoJSON, I wanted to highlight the simplicity of GeoDjango geometries creation and edition with django-leaflet.
It relies on Leaflet.draw for user interactions.
note:Until recently, it was restricted to Django 1.6+, but Gaël contributed a backport that allows Django 1.4.2+ users to have them too !In Django Adminsite
Given a GeoDjango model as usual
# models.py from django.db import models from django.contrib.gis.db import models as gismodels class MushroomSpot(gismodels.Model): name = models.CharField(max_length=256) geom = gismodels.PolygonField() objects = gismodels.GeoManager() def __unicode__(self): return self.name
Register using Leaflet GeoAdmin
It's as simple as :
from django.contrib import admin from leaflet.admin import LeafletGeoAdmin from .models import MushroomSpot admin.site.register(MushroomSpot, LeafletGeoAdmin)
In forms views
Edition view usign Class-Based View
from django import forms from django.views.generic import UpdateView from leaflet.forms.widgets import LeafletWidget from .models import MushroomSpot class MushroomSpotForm(forms.ModelForm): class Meta: model = MushroomSpot fields = ('name', 'geom') widgets = {'geom': LeafletWidget()} class EditMushroomSpot(UpdateView): model = MushroomSpot form_class = MushroomSpotForm template_name = 'form.html'
Form template with Leaflet tags
{% load leaflet_tags %} <html> <head> {% leaflet_js plugins="forms" %} {% leaflet_css plugins="forms" %} </head> <body> <h1>Edit {{ object }}</h1> <form method="POST"> {{ form }} {% csrf_token %} <input type="submit"/> </form> </body> </html>
Going further...
The Django form widget has a couple of options, that can tweak some aspects of the map (size, read-only, ...).
But some advanced usage might require specific interactions or behaviour, beyond Django field and widgets customizations.
Custom field JavaScript component
The frontend field component behaviour and initialization is also pluggable, and can be used to add extra controls, layers or whatever.
Custom.GeometryField = L.GeometryField.extend({ addTo: function (map) { L.GeometryField.prototype.addTo.call(this, map); var filecontrol = map.filecontrol = L.Control.fileLayerLoad(); map.addControl(filecontrol); } });
class CustomLeafletWidget(LeafletWidget): geometry_field_class = 'Custom.GeometryField'
Custom de/serialization of form field value
The Javascript component for de/serializing fields value is pluggable, can be used to override the way the geometries are sent to the form.
Custom.FieldStore = L.FieldStore({ save: function (layer) { this.formfield.value = {"latlngs": layer.getLatLngs()}; } });
class CustomLeafletWidget(LeafletWidget): field_store_class = 'Custom.FieldStore'
Help us improve django-leaflet !
We built django-leaflet at Makina Corpus for some our Webmapping projects. It is used in production and gives us satisfaction in most use-cases.
If our initial design does not match your needs, please tell us what you think !
For example, personnally, I would like to remove the <script> tag in the map template, and pass configuration entries through the DOM instead...
...your turn !
#django, #leaflet, #gis, #geojson - Posted in the Dev category
© Copyright 2020 by Mathieu Leplatre. mnmlist Theme
Content licensed under the Creative Commons attribution-noncommercial-sharealike License.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK