1

I implemented leaflet in my Django project, and managed to add the draw functionalities. The thing is after i draw the shape instantly disappears. What should i do to solve the problem?

map.html

{% load static %}
{% load leaflet_tags %}
<!doctype html>
<html lang="en">
<head>
  {% leaflet_css plugins="ALL" %}
  <title>Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="{% static 'map.css' %}">
  <link rel="stylesheet" type="text/css" 
     href="https://unpkg.com/[email protected]/dist/leaflet.css">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
  {% leaflet_js plugins="ALL" %}
  <div id="map"></div>
  <script src="{% static 'map.js' %}"></script>
</body>
</html>

map.js

var mapcenter = [41.47132109359731, 12.907624901567564];
var map = L.map('map', {zoomControl: false}).setView(mapcenter, 11);

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '1652310'}).addTo(map);

// Zoom Control
var zoomControl = L.control.zoom({
  position: "topleft"
});
zoomControl.addTo(map);

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        polygon: {
            allowIntersection: false
        }
    },
    draw: {
        circle: false,
        circlemarker: false,
        polygon: {
            allowIntersection: false
        }
    }
});
map.addControl(drawControl);

1 Answer 1

1

When you finish drawing of feature/geometry, item is not automatically added to the feature layer, you have to add it through L.Draw.Event.CREATED event processing function:

map.on(L.Draw.Event.CREATED, function (event) {
  var layer = event.layer;
  drawnItems.addLayer(layer);
});
1
  • thanks :) don't know why the .layer is deprecated but it works :) Nov 18, 2021 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.