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

score 0 · Accepted Answer · answered Nov 13 '21 at 10:33

0

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()

answered Nov 13 '21 at 10:33

Falke Design

10,635
3
15
30

And I continue... How I can get the type of the shape and a unique valeur created when I finish the draw with myLayer.toGeaoJSON() ? Beacause I need to save this informations with the geom in the database... Thank's – GuenLM Nov 13 '21 at 15:28
I found e.marker._leaflet_id to get unique id on pm:create but how I can have this id in the export toGeoJSON() ? – GuenLM Nov 13 '21 at 16:50
and I found how to pass custom informations on options but not to get this info in properties geoJson. I can read all the myLayer.pm._layers and get all these info but I must transform _latlng to geojson... is there a function for that in geoman ? – GuenLM Nov 13 '21 at 18:00
Don't use `_leaflet_id` as your unique id, because when you reload the map the leaflet_id will start again by zero. And then you have your id twice. You need to generate a custom id by your self or on the database by incementing the line id `1,2,3,4,...`. – Falke Design Nov 14 '21 at 07:06
Don't use `myLayer.pm._layers` for this `myLayer.getLayers()` is existing. But I suggest you following: `map.pm.getGeomanDrawLayers().forEach((layer)=>{console.log(layer.toGeoJOSN())});`. To get the options of each layer you need to create you own code. You can read the options with `layer.options` and then add it to the properties of the geoJosn of the layer `... .properties = layer.options` – Falke Design Nov 14 '21 at 07:09
ok thank's. it works with myLayer.getLayers() and then add properties with layer.option. – GuenLM Nov 14 '21 at 22:26

Drawing different objects on leaflet map with custom controls

1 Answers1