How to add event to LeafletWidget in django-leaflet?

Question

In my django app I have a Worker model with a name and location (Point). Using django-leflet LeafletWidget I can create a Form where the user can set a location (marker to that worker). Is it possible to add an event to the widget, so, every time the user sets the marker, or change the marker position it gets the coordinates of that point and perform other actions (like an ajax request)?

class WorkerForm(forms.ModelForm):
    
    class Meta:
        model = WorkerModel
        exclude = ("id",)
        widgets = {
            'name':forms.TextInput(attrs={'class': 'form-control'}),
            'location': LeafletWidget(),
}

in the template i just call 'forms.location' and it renders the map with the controls to set a marker

Every time the user sets the marker I want to get the location of that marker. How do I do that?

Answer 1

First you should add an additional JavaScript file to the form, where you can capture the event and do whatever you like with it. To do so, add a class media to the form and indicate the location of the JS inside:

class WorkerForm(forms.ModelForm):

    ...

    class Media:
        js = ('path/to/script.js',)

Create the script.js file on the path/to directory inside your static directory of your app. On that script.js, add the following code:

// Wait for the map to be initialized
$(window).on('map:init', function(e) {
    // Get the Leaflet map instance
    map = e.originalEvent.detail.map;
    // Capture the creation of a new feature
    map.on('draw:created', function (e) {
        const coordinates = e.layer._latlng;
        // Your stuff
    });
    map.on('draw:edited', function (e) {
        var layers = e.layers._layers
        var coordinates;
        Object.keys(layers).forEach(function(key) {
            coordinates = layers[key]._latlng;
        });
        // Your stuff
    });
});

Check the Leaflet Draw documentation to see all the events available.