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);};

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.
    – TomazicM
    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?
    – williamh
    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.
    – TomazicM
    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)})};;,,
    – williamh
    Dec 8, 2021 at 9:28
  • I discovered Icons have the option to set as draggable which removes the need for this question.
    – williamh
    Dec 8, 2021 at 10:08

1 Answer 1

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);
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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