Django Leaflet - Customization

Job ID: 31275706

Budget: €30 – €250 EUR

Django Leaflet is a small app for Django which allows the usage of maps in form elements. It is a form widget which generates a map for input fields like PointField, MultiPointField an PolygonField.

For my uses case I would like to customize the map controls within the leaflet map that is generated by the widget. The map let's users select a location which is then added to the formfield on a mouseclick or touch.

I would like to customize the code for the following fields:

- PointField
- MultiPointField
- PolygonField

The reason why I would like to customize:

Currently a user needs to select a marker option from the toolbar and apply it to the map. If a user wants to update the location he first needs to select the delete tool from the toolbar, delete the layer and reselect the marker option from the toolbar and then select a new location on the map.

This involves multiple clicks and a certain understanding of how the toolbar works. I think this can be done easier.

End result:

I would like to see the marker location updated on a second click on the map or after the polygon is finished without specifically selecting a delete or update tool from the toolbar.

For the PointField, we can update the location instead of deleting the old marker and creating a new marker. For the MultiPointField we can just add different markers on click. For The PolygonField we can delete the old polygon after the first polygon is closed.

More about the map widget can be found here: https://github.com/makinacorpus/django-leaflet

Javascript code responsible for the map controls: https://github.com/makinacorpus/django-leaflet/blob/master/leaflet/static/leaflet/leaflet.forms.js

Documentation on how to customize the widget: https://django-leaflet.readthedocs.io/en/latest/widget.html#custom-forms

In the attachement I included a screenshot from the current map widget compared with the required solution. You will notice that I removed the map controls, which shows a bare map with only the zoomcontrols.

If you have any question about this project, please let me know.
Related categories: JavaScript Django Git