geoman-io / leaflet-geoman

🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers
https://geoman.io
MIT License
2.21k stars 433 forks source link

create two toolbars #1043

Closed AlbertoMCS closed 2 years ago

AlbertoMCS commented 2 years ago

Hi, Is it possible to create 2 set of toolbars which work independently? Many thanks.

Falke-Design commented 2 years ago

Can you please explain what exactly you want to achive?

AlbertoMCS commented 2 years ago

In my application I would need to do these two actions: 1 - When a rectangle/polygon/circle is drawn in my map, ajax is triggered and data from different sources (PostGIS, Geoserver,etc) are loaded inside the rectangle (amenities, roads, green areas, ect ). 2 - I need a editing tool, be able to create polygons, lines, markers, etc. My idea was using an instance of Leaflet-Geomans for the task 1, and another separated one for the task 2.

Falke-Design commented 2 years ago

Like that?

map.pm.addControls({
  position: 'topleft',
  positions: {
    custom: 'topright'
  }
});

map.pm.Toolbar.copyDrawControl('Rectangle', {
  name: 'RectangleCopy',
  block: 'custom',
});

map.pm.Toolbar.copyDrawControl('Line', {
  name: 'LineCopy',
  block: 'custom',
});

map.pm.Toolbar.copyDrawControl('Circle', {
  name: 'CircleCopy',
  block: 'custom',
});

map.pm.Toolbar.copyDrawControl('Marker', {
  name: 'MarkerCopy',
  block: 'custom',
});

https://jsfiddle.net/falkedesign/r51pjokx/

AlbertoMCS commented 2 years ago

@Falke-Design many thanks for this, your answer provides response to the problem of creating another instance of the Toolbar, and actually it was well documented under 'Adding New/Custom control' (sorry about that, I should have read that carefully before asking).

Now when using the following event: mymap.on('pm:create',function(e){//whatever here}),

to which instance is applied, to the original one or to the custom?, if the answer is to the original, how can I applied to the custom one?

Falke-Design commented 2 years ago

pm:create event is fired on the map, so it works for both. You can difference the old and new toolbar with the shape property:

mymap.on('pm:create',function(e){
   if(e.shape === 'RectangleCopy'){
      // second Rectangle
   }
})
AlbertoMCS commented 2 years ago

@Falke-Design many thanks, I have everything I need now!