0

I have a Leaflet map with a featureGroup, a layerGroup and drawControl however only the featureGroup is editable using the drawControl.

I think its because the layerGroup is separate from the featureGroup rather than a layer within it. Instead of .addTo(map) I have tried new L.layerGroup().addTo(drawnItems) but to no avail.

My html code is:

var LeafIcon = L.Icon.extend({ options: { iconSize: [51.7, 25.3], iconAnchor: [11, 46], } }); var myIcon1 = new LeafIcon({iconUrl: 'images/s1.png'}), myIcon2 = new LeafIcon({iconUrl: 'images/s2.png'}), myIcon3 = new LeafIcon({iconUrl: 'images/s3.png'}), myIcon4 = new LeafIcon({iconUrl: 'images/s4.png'}), myIcon5 = new LeafIcon({iconUrl: 'images/s5.png'}), myIcon6 = new LeafIcon({iconUrl: 'images/s6.png'}), myIcon7 = new LeafIcon({iconUrl: 'images/s7.png'}), myIcon8 = new LeafIcon({iconUrl: 'images/s8.png'}), myIcon9 = new LeafIcon({iconUrl: 'images/s9.png'}), myIcon10 = new LeafIcon({iconUrl: 'images/s10.png'}), myIcon11 = new LeafIcon({iconUrl: 'images/s11.png'}), myIcon12 = new LeafIcon({iconUrl: 'images/s12.png'}), myIcon13 = new LeafIcon({iconUrl: 'images/s13.png'}), myIcon14 = new LeafIcon({iconUrl: 'images/s14.png'}), myIcon15 = new LeafIcon({iconUrl: 'images/s15.png'}); //adds drawn items layer var drawnItems = new L.FeatureGroup().addTo(map); //adds site tags layer var sitetagItems = new L.layerGroup().addTo(map); //add drawing tools to map and default polygons to red once zoomed and circle to default to blue map.drawControl = new L.Control.Draw({ draw: { rectangle: false, polygon: { shapeOptions: { color: 'red' }, allowIntersection: false, drawError: { color: 'orange', timeout: 1000 }, showArea: true, metric: true, repeatMode: true }, circlemarker:{ metric: true, radius: 343, color:'blue', fill:false } }, edit: { featureGroup: drawnItems, layerGroup: sitetagItems, } }); map.addControl(map.drawControl); map.on('draw:created', function(e) { e.layer.addTo(drawnItems); }) function Action1(){var bounds = map.getBounds();var center = bounds.getCenter();L.marker([center.lat,center.lng], {icon: myIcon1}).addTo(sitetagItems);};
Improve this question
6
  • There is no layerGroup option in edit option of L.Control.Draw control. You can edit only features from feature group that is specified in featureGroup option. Commented Dec 7, 2021 at 20:47
  • Thanks for the response. If instead I add my Icons to the featureGroup called drawnItems is there later a way to remove all the LeafIcon s but not the other features on drawnItems? Commented Dec 7, 2021 at 21:35
  • You cannot add icon directly to a map, only through a marker. Marker can be at any time added to or removed from a map or a group layer. Commented Dec 7, 2021 at 22:16
  • So as a work around i have the following but it removes everything on drawnItems layer , my desired behaviours is that the function will only remove the LeafIcons,,,function Action16(){drawnItems .eachLayer(function(l){drawnItems .removeLayer(l)})};;,, Commented Dec 8, 2021 at 9:28
  • I discovered Icons have the option to set as draggable which removes the need for this question. Commented Dec 8, 2021 at 10:08

1 Answer 1

Reset to default
2

As you discovered you can move marker icons around with mouse if you set marker option draggable to true, but this means that predefined markers editing is a bit different as drawn items editing.

if you want to edit predefined markers the same way as drawn items and latter remove only those predefined markers, you can achieve that by adding predefined marker to drawnItems layer, but defining them with some custom property, lets say isSiteTag: true that you can use later to identify markers that have to be deleted.

Relevant part of code could the look something like this:

function Action1() { var bounds = map.getBounds(); var center = bounds.getCenter(); L.marker([center.lat, center.lng], { icon: myIcon1, isSiteTag: true }).addTo(drawnItems); }; function Action16() { drawnItems.eachLayer(function(layer) { if (layer.options.isSiteTag) drawnItems.removeLayer(layer); }); }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.