Leaflet draw not working with Django - shape never finishes

Question

My Django app just started having a weird problem where when I try to draw a shape on a map with Leaflet and Leaflet draw, the shape never finishes. That is, when I click and drag to draw a shape, the shape draws, then when I release the mouse, the shape looks finished but a new shape immediately starts drawing (with the mouse released). If I press "esc" the shape looks finished. But, the web console has the error:
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. leaflet.js:5:268

I tried updating django-leaflet from pip. I'm not sure where else leaflet.js would be coming from (it's not a static file). I'm using a MacBook, tried with track pad and USB mouse.

Anyone know how this started happening and how I can fix it? Bizarre that it was working and now is not without me changing anything.

Here's some relevant code:

    {% load leaflet_tags %}
    {% leaflet_css %}
    {% leaflet_js %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
    <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
    map.on(L.Draw.Event.CREATED, function (e) {
        console.log('created'); //Never prints to console
        var type = e.layerType;
        var layer = e.layer;
        map.addLayer(layer);
        geoJSON_obj = layer.toGeoJSON();
        if (type === 'circle') {
            var rad = layer.getRadius();
            geoJSON_obj.properties.radius = rad;
        }
        var jsonObj = JSON.stringify(geoJSON_obj);
        document.getElementById('id_image__location').value = jsonObj;
        });
    }

Using Django 2.2.3 and Python 3.8

score 0 · Accepted Answer · answered Jun 10 '20 at 17:51

Turns out it was an error on my part: the line document.getElementById('id_image__location').value = jsonObj; didn't work because the element didn't exist (should have been id_location). This, apparently, was making the larger function not work and the draw objects to not create properly.

After correcting that, everything works as it should (even with the MouseEvent.mozPressure is deprecated warning). Just posting here in case someone else has a similar issue.

Leaflet draw not working with Django - shape never finishes

1 Answers1