Drawing different objects on leaflet map with custom controls

Question

I would like to draw different type of objects on a leaflet map with leaflet-geoman. I have a geojson layer not editable (agricol parcels) on overlay pane and I want to choose in a combobox (or buttons nethermind) the type of object to draw. It can be markers (for trees for example) or polyline (hedge...) or polygone (forest...) with different style (color, marker, tooltip...) : a forest is green, a tree with some icon, a hedge is brown, a forest is green fill.... Just after the end of drawing, I would like to show a popup to fill some information like the name of the object for example. I would like to put all these drawings in a layer that can be shown/hide with the pane control. I can have different layers according to the type of objects. At least, I would like to get all drawn objects (with extra informations...) and save it in geojson. Do you have an example for doing such thing ? I still didn't found anything. Thank's

Guen

Answer 1

You can create different draw shapes to give them different color: customcontrols.js:

map.pm.Toolbar.copyDrawControl('Rectangle', {
  name: 'RectangleCopy',
  block: 'custom',
  title: 'Display text on hover button',
  actions: _actions,
});
map.pm.Draw.RectangleCopy.setPathOptions({ color: 'green' });

Then check on the pm:create listener which shape is created and then add a popup to it:

map.on('pm:create',(e)=>{
  if(e.shape === 'RectangleCopy'){
     e.layer.bindPopup('Treee').openPopup();
  }
});

To add a layers to a FeatureGroup you can use map.pm.setGlobalOptions({layerGroup: YOUR_GROUP});

And to get all drawn layers you can call map.pm.getGeomanDrawLayers(true).toGeoJSON() or because you have your own group: YOUR_GROUP.toGeoJSON()