option to further customize panes

README.md

@@ -852,12 +852,12 @@ map.pm.setGlobalOptions({ pinning: true, snappable: false });
 
 The following options are additionally to the [Draw](#draw-mode) and [Edit Mode](#edit-mode) options.
 
-| Option        | Default  | Description                                                                                                                                                                                                      |
-| :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| snappingOrder | `Array`  | Prioritize the order of snapping. Default: `['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']`.                                                                                                    |
-| layerGroup    | `map`    | add the created layers to a layergroup instead to the map.                                                                                                                                                       |
-| panes         | `Object` | Defines in which [panes](https://leafletjs.com/reference.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane' }`. |
-| cutAsCircle   | `false`  | Enable cutting in shape form of a Circle.                                                                                                                                                                        |
+| Option        | Default  | Description                                                                                                                                                                                                            |
+| :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| snappingOrder | `Array`  | Prioritize the order of snapping. Default: `['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']`.                                                                                                          |
+| layerGroup    | `map`    | add the created layers to a layergroup instead to the map.                                                                                                                                                             |
+| panes         | `Object` | Defines in which [panes](https://leafletjs.com/reference.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane', circlePane: 'overlayPane', polylinePane: 'overlayPane', polygonPane: 'overlayPane', circleMarkerPane: 'overlayPane', rectanglePane: 'overlayPane', textPane: 'markerPane' }`. |
+| cutAsCircle   | `false`  | Enable cutting in shape form of a Circle.                                                                                                                                                                              |
 
 The following events are available on a map instance:
 

demo/demo.js

@@ -30,6 +30,10 @@ const map3 = L.map('example3').setView([51.505, -0.09], 13).addLayer(tiles2);
 const map4 = L.map('example4').setView([51.505, -0.09], 13).addLayer(tiles3);
 // map2.dragging.disable();
 
+map2.createPane('polygonPane');
+map2.createPane('circlePane');
+map2.createPane('polylinePane');
+
 // map2.on('pm:create', function(e) {
 //     // alert('pm:create event fired. See console for details');
 //     console.log(e);
@@ -341,6 +345,7 @@ map2.pm.disableDraw('Polygon');
 map2.pm.enableDraw('Line', { allowSelfIntersection: false });
 map2.pm.disableDraw('Line');
 
+map2.pm.setGlobalOptions({ panes: { polygonPane: 'polygonPane', circlePane: 'circlePane', polylinePane: 'polylinePane' }})
 map2.on('pm:create', function (e) {
   // e.layer.pm.enable({ allowSelfIntersection: false });
   // e.layer.pm.disable();

leaflet-geoman.d.ts

@@ -770,8 +770,8 @@ declare module 'leaflet' {
       /** Prioritize the order of snapping. Default: ['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']. */
       snappingOrder?: SUPPORTED_SHAPES[];
 
-      /** Defines in which panes the layers and helper vertices are created. Default: { vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane' } */
-      panes?: { vertexPane?: PANE; layerPane?: PANE; markerPane?: PANE };
+      /** Defines in which panes the layers and helper vertices are created. Default: { vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane', circlePane: 'overlayPane', polygonPane: 'overlayPane', polylinePane: 'overlayPane' } */
+      panes?: { vertexPane?: PANE; layerPane?: PANE; markerPane?: PANE, circlePane?: PANE, polygonPane?: PANE, polylinePane?: PANE, circleMarkerPane?: PANE, rectanglePane?: PANE, textPane?: PANE };
     }
 
     interface PMDrawMap {

src/js/Draw/L.PM.Draw.Circle.js

@@ -27,7 +27,7 @@ Draw.Circle = Draw.extend({
       ...this.options.templineStyle,
       radius: 0,
     });
-    this._setPane(this._layer, 'layerPane');
+    this._setPane(this._layer, 'circlePane');
     this._layer._pmTempLayer = true;
 
     // this is the marker in the center of the circle
@@ -67,7 +67,7 @@ Draw.Circle = Draw.extend({
 
     // this is the hintline from the hint marker to the center marker
     this._hintline = L.polyline([], this.options.hintlineStyle);
-    this._setPane(this._hintline, 'layerPane');
+    this._setPane(this._hintline, 'circlePane');
     this._hintline._pmTempLayer = true;
     this._layerGroup.addLayer(this._hintline);
 
@@ -265,7 +265,7 @@ Draw.Circle = Draw.extend({
 
     // create the final circle layer
     const circleLayer = L.circle(center, options);
-    this._setPane(circleLayer, 'layerPane');
+    this._setPane(circleLayer, 'circlePane');
     this._finishLayer(circleLayer);
     circleLayer.addTo(this._map.pm._getContainingLayer());
 

src/js/Draw/L.PM.Draw.CircleMarker.js

@@ -34,7 +34,7 @@ Draw.CircleMarker = Draw.Marker.extend({
 
       // this is the circle we want to draw
       this._layer = L.circleMarker(this._map.getCenter(), templineStyle);
-      this._setPane(this._layer, 'layerPane');
+      this._setPane(this._layer, 'circleMarkerPane');
       this._layer._pmTempLayer = true;
 
       // this is the marker in the center of the circle
@@ -75,7 +75,7 @@ Draw.CircleMarker = Draw.Marker.extend({
 
       // this is the hintline from the hint marker to the center marker
       this._hintline = L.polyline([], this.options.hintlineStyle);
-      this._setPane(this._hintline, 'layerPane');
+      this._setPane(this._hintline, 'circleMarkerPane');
       this._hintline._pmTempLayer = true;
       this._layerGroup.addLayer(this._hintline);
       // create a polygon-point on click
@@ -91,7 +91,7 @@ Draw.CircleMarker = Draw.Marker.extend({
         this._map.getCenter(),
         this.options.templineStyle
       );
-      this._setPane(this._hintMarker, 'layerPane');
+      this._setPane(this._hintMarker, 'circleMarkerPane');
       this._hintMarker._pmTempLayer = true;
       this._hintMarker.addTo(this._map);
       // this is just to keep the snappable mixin happy
@@ -297,7 +297,7 @@ Draw.CircleMarker = Draw.Marker.extend({
 
     // create marker
     const marker = L.circleMarker(latlng, this.options.pathOptions);
-    this._setPane(marker, 'layerPane');
+    this._setPane(marker, 'circleMarkerPane');
     this._finishLayer(marker);
     // add marker to the map
     marker.addTo(this._map.pm._getContainingLayer());
@@ -357,7 +357,7 @@ Draw.CircleMarker = Draw.Marker.extend({
 
     // create the final circle layer
     const circleLayer = L.circleMarker(center, options);
-    this._setPane(circleLayer, 'layerPane');
+    this._setPane(circleLayer, 'circleMarkerPane');
     this._finishLayer(circleLayer);
     circleLayer.addTo(this._map.pm._getContainingLayer());
 

src/js/Draw/L.PM.Draw.Cut.js

@@ -184,7 +184,7 @@ Draw.Cut = Draw.Polygon.extend({
       if (resultLayer.getLayers().length === 1) {
         [resultLayer] = resultLayer.getLayers(); // prevent that a unnecessary layergroup is created
       }
-      this._setPane(resultLayer, 'layerPane');
+      this._setPane(resultLayer, 'polygonPane');
       const resultingLayer = resultLayer.addTo(
         this._map.pm._getContainingLayer()
       );

src/js/Draw/L.PM.Draw.Line.js

@@ -28,13 +28,13 @@ Draw.Line = Draw.extend({
       ...this.options.templineStyle,
       pmIgnore: false,
     });
-    this._setPane(this._layer, 'layerPane');
+    this._setPane(this._layer, 'polylinePane');
     this._layer._pmTempLayer = true;
     this._layerGroup.addLayer(this._layer);
 
     // this is the hintline from the mouse cursor to the last marker
     this._hintline = L.polyline([], this.options.hintlineStyle);
-    this._setPane(this._hintline, 'layerPane');
+    this._setPane(this._hintline, 'polylinePane');
     this._hintline._pmTempLayer = true;
     this._layerGroup.addLayer(this._hintline);
 
@@ -357,7 +357,7 @@ Draw.Line = Draw.extend({
 
     // create the leaflet shape and add it to the map
     const polylineLayer = L.polyline(coords, this.options.pathOptions);
-    this._setPane(polylineLayer, 'layerPane');
+    this._setPane(polylineLayer, 'polylinePane');
     this._finishLayer(polylineLayer);
     polylineLayer.addTo(this._map.pm._getContainingLayer());
 

src/js/Draw/L.PM.Draw.Polygon.js

@@ -87,7 +87,7 @@ Draw.Polygon = Draw.Line.extend({
     }
 
     const polygonLayer = L.polygon(coords, this.options.pathOptions);
-    this._setPane(polygonLayer, 'layerPane');
+    this._setPane(polygonLayer, 'polygonPane');
     this._finishLayer(polygonLayer);
     polygonLayer.addTo(this._map.pm._getContainingLayer());
 

src/js/Draw/L.PM.Draw.Rectangle.js

@@ -28,7 +28,7 @@ Draw.Rectangle = Draw.extend({
       ],
       this.options.pathOptions
     );
-    this._setPane(this._layer, 'layerPane');
+    this._setPane(this._layer, 'rectanglePane');
     this._layer._pmTempLayer = true;
 
     // this is the marker at the origin of the rectangle
@@ -293,7 +293,7 @@ Draw.Rectangle = Draw.extend({
       }
     }
 
-    this._setPane(rectangleLayer, 'layerPane');
+    this._setPane(rectangleLayer, 'rectanglePane');
     this._finishLayer(rectangleLayer);
     rectangleLayer.addTo(this._map.pm._getContainingLayer());
 

src/js/Draw/L.PM.Draw.Text.js

@@ -147,7 +147,7 @@ Draw.Text = Draw.extend({
       _textMarkerOverPM: true, // we need to put this into the options, else we can't catch this in the init method
       icon: textAreaIcon,
     });
-    this._setPane(marker, 'markerPane');
+    this._setPane(marker, 'textPane');
     this._finishLayer(marker);
 
     if (!marker.pm) {

src/js/Draw/L.PM.Draw.js

@@ -219,6 +219,42 @@ const Draw = L.Class.extend({
         (this._map.pm.globalOptions.panes &&
           this._map.pm.globalOptions.panes.markerPane) ||
         'markerPane';
+    } else if (type === 'polygonPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polygonPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circlePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circlePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circleMarkerPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circleMarkerPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'polylinePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polylinePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'rectanglePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.rectanglePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'textPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.textPane ||
+            this._map.pm.globalOptions.panes.markerPane)) ||
+        'markerPane';
     }
   },
   _isFirstLayer() {

src/js/Edit/L.PM.Edit.Circle.js

@@ -127,7 +127,7 @@ Edit.Circle = Edit.extend({
     const A = markerA.getLatLng();
     const B = markerB.getLatLng();
     this._hintline = L.polyline([A, B], this.options.hintlineStyle);
-    this._setPane(this._hintline, 'layerPane');
+    this._setPane(this._hintline, 'circlePane');
     this._hintline._pmTempLayer = true;
     this._helperLayers.addLayer(this._hintline);
   },

src/js/Edit/L.PM.Edit.CircleMarker.js

@@ -177,7 +177,7 @@ Edit.CircleMarker = Edit.extend({
     const A = markerA.getLatLng();
     const B = markerB.getLatLng();
     this._hintline = L.polyline([A, B], this.options.hintlineStyle);
-    this._setPane(this._hintline, 'layerPane');
+    this._setPane(this._hintline, 'circleMarkerPane');
     this._hintline._pmTempLayer = true;
     this._helperLayers.addLayer(this._hintline);
   },

src/js/Edit/L.PM.Edit.js

@@ -57,6 +57,42 @@ const Edit = L.Class.extend({
         (this._map.pm.globalOptions.panes &&
           this._map.pm.globalOptions.panes.markerPane) ||
         'markerPane';
+    } else if (type === 'polygonPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polygonPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circlePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circlePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circleMarkerPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circleMarkerPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'polylinePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polylinePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'rectanglePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.rectanglePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'textPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.textPane ||
+            this._map.pm.globalOptions.panes.markerPane)) ||
+        'markerPane';
     }
   },
   remove() {

src/js/L.PM.Map.js

@@ -37,6 +37,12 @@ const Map = L.Class.extend({
         vertexPane: 'markerPane',
         layerPane: 'overlayPane',
         markerPane: 'markerPane',
+        circlePane: 'overlayPane',
+        polygonPane: 'overlayPane',
+        polylinePane: 'overlayPane',
+        circleMarkerPane: 'overlayPane',
+        rectanglePane: 'overlayPane',
+        textPane: 'markerPane',
       },
       draggable: true,
     };
@@ -125,6 +131,25 @@ const Map = L.Class.extend({
       layer.pm.setOptions(options);
     });
 
+    if (o.panes && o.panes.layerPane && !o.panes.polygonPane) {
+      options.panes.polygonPane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.polylinePane) {
+      options.panes.polylinePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.circlePane) {
+      options.panes.circlePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {
+      options.panes.polygonPane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {
+      options.panes.polylinePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.textPane) {
+      options.panes.circlePane = o.panes.markerPane;
+    }
+
     this.map.fire('pm:globaloptionschanged');
 
     // store options