WIP: Example integrating ol-side-panel

package.json

@@ -23,15 +23,18 @@
     "eslint-plugin-react": "^7.23.1",
     "mini-css-extract-plugin": "^1.6.0",
     "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.2",
     "webpack": "^5.36.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.0.0-beta.2"
   },
   "dependencies": {
+    "bootstrap-icons": "^1.5.0",
     "ol": "^6.5.0",
     "ol-geocoder": "^4.1.2",
     "ol-grid": "^1.1.4",
     "ol-layerswitcher": "^3.7.0",
-    "ol-popup": "^4.0.0"
+    "ol-popup": "^4.0.0",
+    "ol-side-panel": "^1.0.4"
   }
 }

src/MapInstanceManager.js

@@ -24,6 +24,7 @@ class MapInstanceManager {
     // instances.
     this.behaviors = {
       rememberLayer: namedBehaviors.rememberLayer,
+      layerSwitcherInSidePanel: namedBehaviors.layerSwitcherInSidePanel,
     };
 
   }

src/behavior/index.js

@@ -11,6 +11,7 @@ function lazyLoadedBehavior(name) {
 
 export default {
   edit: lazyLoadedBehavior('edit'),
+  layerSwitcherInSidePanel: lazyLoadedBehavior('layerSwitcherInSidePanel'),
   measure: lazyLoadedBehavior('measure'),
   rememberLayer: lazyLoadedBehavior('rememberLayer'),
   snappingGrid: lazyLoadedBehavior('snappingGrid'),

src/behavior/layerSwitcherInSidePanel.js

@@ -0,0 +1,46 @@
+import LayerSwitcher from 'ol-layerswitcher';
+
+import layersHalfIcon from 'bootstrap-icons/icons/layers-half.svg';
+
+// layer switcher in side panel behavior.
+export default {
+  attach(instance) {
+    const existingLayerSwitcherControl = instance.map.getControls().getArray()
+      .find(control => typeof control.renderPanel === 'function');
+
+    const sidePanel = instance.map.getControls().getArray()
+      .find(control => typeof control.definePane === 'function');
+
+    if (!sidePanel) {
+      return;
+    }
+
+    const layersPane = sidePanel.definePane({
+      paneId: 'layers',
+      name: 'Layers',
+      icon: layersHalfIcon,
+    });
+
+    const layersDiv = document.createElement('div');
+    layersDiv.classList = 'layer-switcher';
+
+    layersPane.addWidgetElement(layersDiv);
+
+    const renderLayerSwitcher = () => LayerSwitcher.renderPanel(
+      instance.map,
+      layersDiv,
+      { reverse: true },
+    );
+
+    renderLayerSwitcher();
+
+    // When new layers are added, refresh the layer layer switcher
+    instance.map.on('farmOS-map.layer', () => {
+      renderLayerSwitcher();
+    });
+
+    instance.map.removeControl(existingLayerSwitcherControl);
+
+  },
+
+};

src/instance/defaults.js

@@ -28,6 +28,10 @@ import {
   PinchRotate,
 } from 'ol/interaction';
 
+// Import ol-side-panel control.
+import 'ol-side-panel/dist/ol-side-panel.css';
+import { SidePanel } from 'ol-side-panel';
+
 // Import Geolocate control.
 import Geolocate from '../control/Geolocate/Geolocate';
 
@@ -68,6 +72,7 @@ const defaults = {
         limit: 5,
         autoComplete: true,
       }),
+      new SidePanel(),
     ];
 
     // If controls were set to 'false', don't attach any controls.

src/styles.css

@@ -71,3 +71,21 @@
 .layer-switcher.shown {
   max-height: 300px;
 }
+
+.ol-side-panel-pane .layer-switcher {
+  left: 0px;
+}
+
+.ol-side-panel-pane .layer-switcher > ul {
+  margin-top: 0px;
+}
+
+.ol-side-panel-tabs button svg {
+  margin: 5px;
+  width: 28px;
+}
+
+.ol-side-panel-tabs button.active {
+  background-color: #ffcc33;
+  background-color: rgba(255,204,51,0.7);
+}

webpack.config.js

@@ -24,6 +24,10 @@ module.exports = {
           { loader: 'css-loader' },
         ],
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
+      },
     ],
   },
   plugins: [