diff --git a/README.md b/README.md index e1df035e..36bbe38c 100644 --- a/README.md +++ b/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: diff --git a/demo/demo.js b/demo/demo.js index 37854a9c..b7abde70 100644 --- a/demo/demo.js +++ b/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(); diff --git a/leaflet-geoman.d.ts b/leaflet-geoman.d.ts index 9adfc90d..c686486c 100644 --- a/leaflet-geoman.d.ts +++ b/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 { diff --git a/src/js/Draw/L.PM.Draw.Circle.js b/src/js/Draw/L.PM.Draw.Circle.js index 2df71226..798b4b5d 100644 --- a/src/js/Draw/L.PM.Draw.Circle.js +++ b/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()); diff --git a/src/js/Draw/L.PM.Draw.CircleMarker.js b/src/js/Draw/L.PM.Draw.CircleMarker.js index 0d9529c8..7f4fee76 100644 --- a/src/js/Draw/L.PM.Draw.CircleMarker.js +++ b/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()); diff --git a/src/js/Draw/L.PM.Draw.Cut.js b/src/js/Draw/L.PM.Draw.Cut.js index 0b224b49..d39c8691 100644 --- a/src/js/Draw/L.PM.Draw.Cut.js +++ b/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() ); diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js index 89e1a45d..c20aef4f 100644 --- a/src/js/Draw/L.PM.Draw.Line.js +++ b/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()); diff --git a/src/js/Draw/L.PM.Draw.Polygon.js b/src/js/Draw/L.PM.Draw.Polygon.js index f42c1458..a6e0ce65 100644 --- a/src/js/Draw/L.PM.Draw.Polygon.js +++ b/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()); diff --git a/src/js/Draw/L.PM.Draw.Rectangle.js b/src/js/Draw/L.PM.Draw.Rectangle.js index e85df516..3554172b 100644 --- a/src/js/Draw/L.PM.Draw.Rectangle.js +++ b/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()); diff --git a/src/js/Draw/L.PM.Draw.Text.js b/src/js/Draw/L.PM.Draw.Text.js index de8a4d3f..ed7a0f5d 100644 --- a/src/js/Draw/L.PM.Draw.Text.js +++ b/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) { diff --git a/src/js/Draw/L.PM.Draw.js b/src/js/Draw/L.PM.Draw.js index 0679d5a5..021861c2 100644 --- a/src/js/Draw/L.PM.Draw.js +++ b/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() { diff --git a/src/js/Edit/L.PM.Edit.Circle.js b/src/js/Edit/L.PM.Edit.Circle.js index 9aa8c97c..9a5679d3 100644 --- a/src/js/Edit/L.PM.Edit.Circle.js +++ b/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); }, diff --git a/src/js/Edit/L.PM.Edit.CircleMarker.js b/src/js/Edit/L.PM.Edit.CircleMarker.js index 0eed52a4..eeccc599 100644 --- a/src/js/Edit/L.PM.Edit.CircleMarker.js +++ b/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); }, diff --git a/src/js/Edit/L.PM.Edit.js b/src/js/Edit/L.PM.Edit.js index 2e0cd7f4..f3e688e7 100644 --- a/src/js/Edit/L.PM.Edit.js +++ b/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() { diff --git a/src/js/L.PM.Map.js b/src/js/L.PM.Map.js index eaf71ef1..ba921aa2 100644 --- a/src/js/L.PM.Map.js +++ b/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