Add LayersControl

Author: allen-kim-chi

src/lib/controls/style.css renamed to src/lib/controls/DrawControl.css

@@ -10,9 +10,9 @@ import GeoJSON from 'ol/format/GeoJSON';
 import { listen, unlistenByKey } from 'ol/events';
 import { useMap } from '../Map';
 import { drawIcon, lineIcon, pointIcon, polygonIcon, circleIcon, moveIcon} from './icons';
-import './style.css';
+import './DrawControl.css';
 
-class DrawControlClass extends Control {
+class DrawControl extends Control {
   vectorSource: VectorSource;
   modify: Modify; // modifying vectorSource
   drawLayer: VectorLayer; // layer to hold vectorSource
@@ -138,12 +138,12 @@ class DrawControlClass extends Control {
   }
 }
 
-export function DrawControl(props) {
+export default function(props) {
   const map: ol.Map = useMap();
 
   useEffect(() => {
     if (!map) return;
-    map.addControl(new DrawControlClass());
+    map.addControl(new DrawControl());
   }, [map]);
 
   return null;

src/lib/controls/DrawControl.tsx

@@ -0,0 +1,44 @@
+.layers-control {
+  top: 60px;
+  right: 8px;
+
+  #layers {
+    display: none;
+    text-align: left;
+  }
+  
+  &.active {
+    #toggle-btn { 
+      width: 100%;
+      filter: invert(100%); 
+    }
+    #layers { 
+      display: block;
+      padding: 4px;
+      background: #333;
+    }
+  }
+
+  #layers {
+    display: none;
+    text-align: left;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    li {
+      background-color: #FFF;
+      color: #333;
+      padding: 0 8px;
+      &.visible {
+        background-color: #333;
+        color: #FFF;
+      }
+      > ul {
+        margin-left: 20px;
+      }
+    }
+  }
+}

src/lib/controls/LayersControl.css

@@ -0,0 +1,78 @@
+import { Map as OlMap } from 'ol';
+import Control from 'ol/control/Control';
+import LayerGroup from 'ol/layer/Group';
+import { useEffect } from 'react';
+import { useMap } from '../Map';
+import { layersIcon } from './icons';
+import './LayersControl.css';
+
+class LayersControl extends Control {
+
+  constructor(options={}) {
+    const element = document.createElement('div');
+    const {target} = options as any;
+    super({element, target});
+    const map = this.getMap();
+
+    element.className = 'layers-control ol-unselectable ol-control';
+    element.insertAdjacentHTML('beforeend', `
+      <button id="toggle-btn" title="Clik here to switch layers">
+        ${layersIcon}
+      </button>
+      <div id="layers">
+        layers goes here
+      </div>
+    `);
+
+    element.querySelector('.layers-control #toggle-btn')
+      .addEventListener('click', this.onToggleBtnClick.bind(this));
+  }
+  
+  onToggleBtnClick(event) {
+    const controlEl = event.target.closest('.layers-control');
+    controlEl.classList.toggle('active');
+    if (!controlEl.classList.contains('active')) {
+      return;
+    }
+
+    function createUL(layer) {
+      const ul = document.createElement('ul');
+      
+      layer.getLayers().forEach(layer => {
+        const li = document.createElement('li');
+        li.innerHTML = layer.get('name') || layer.constructor.name;
+        layer.getVisible() && li.classList.add('visible');
+        li.addEventListener('click', (event) => {
+          event.stopPropagation();
+          li.classList.toggle('visible');
+          layer.setVisible(li.classList.contains('visible'));
+        });
+        
+        if (layer instanceof LayerGroup) {
+          li.appendChild(createUL(layer));
+        }
+        
+        ul.appendChild(li);
+      });
+      
+      return ul;
+    }
+    
+    const ul = createUL(this.getMap());
+    const layersEl = controlEl.querySelector('#layers');
+    layersEl.innerHTML = '';
+    layersEl.appendChild(ul); 
+  }
+
+}
+
+export default function(props) {
+  const map: OlMap = useMap();
+
+  useEffect(() => {
+    if (!map) return;
+    map.addControl(new LayersControl());
+  }, [map]);
+
+  return null;
+};

src/lib/controls/LayersControl.tsx

@@ -30,4 +30,11 @@ export const moveIcon = `
     <polyline points="19 9 22 12 19 15" />
     <line x1="2" y1="12" x2="22" y2="12" />
     <line x1="12" y1="2" x2="12" y2="22" />
-  </svg>`
+  </svg>`
+
+export const layersIcon = `
+  <svg fill="#000000" width="100%" height="100%" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>layers-solid</title>
+    <path class="clr-i-solid clr-i-solid-path-1" d="M18,20.25a1,1,0,0,1-.43-.1l-15-7.09a1,1,0,0,1,0-1.81l15-7.09a1,1,0,0,1,.85,0l15,7.09a1,1,0,0,1,0,1.81l-15,7.09A1,1,0,0,1,18,20.25Z"></path><path class="clr-i-solid clr-i-solid-path-2" d="M18,26.16a1,1,0,0,1-.43-.1L2.57,19a1,1,0,1,1,.85-1.81L18,24.06l14.57-6.89A1,1,0,1,1,33.43,19l-15,7.09A1,1,0,0,1,18,26.16Z"></path><path class="clr-i-solid clr-i-solid-path-3" d="M18,32.07a1,1,0,0,1-.43-.1l-15-7.09a1,1,0,0,1,.85-1.81L18,30l14.57-6.89a1,1,0,1,1,.85,1.81L18.43,32A1,1,0,0,1,18,32.07Z"></path>
+    <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
+  </svg>`;

src/lib/controls/icons.ts

@@ -5,18 +5,20 @@ export { View } from './View';
 export { Marker, getMarkerImage } from './Marker';
 export { Overlay } from './Overlay';
 
+export { LayerGroup } from './layers/LayerGroup';
 export { TileLayer } from './layers/TileLayer';
 export { VectorLayer } from './layers/VectorLayer';
 export { GraticuleLayer } from './layers/GraticuleLayer';
 export { HeatmapLayer } from './layers/HeatmapLayer';
 export { WebGLTileLayer } from './layers/WebGLTileLayer';
 
-export { DrawControl } from './controls/DrawControl';
 export { FullScreenControl } from './controls/FullScreenControl';
 export { ScaleLineControl } from './controls/ScaleLineControl';
 export { AttributionControl } from './controls/AttributionControl';
 export { MousePositionControl } from './controls/MousePositionControl';
 export { OverviewMapControl } from './controls/OverviewMapControl';
+export { default as DrawControl } from './controls/DrawControl';
+export { default as LayersControl } from './controls/LayersControl';
 
 export { DragRotateAndZoomInteraction } from './interactions/DragRotateAndZoom';
 export { TranslateInteraction } from './interactions/TranslateInteraction';

src/lib/index.ts

@@ -1,15 +1,38 @@
-import { useEffect } from 'react';
+import { Map as OlMap } from 'ol';
+import { useEffect, useRef } from 'react';
 import OlGraticuleLayer from 'ol/layer/Graticule';
 import { useMap } from '../Map';
+import { useGroup } from './LayerGroup';
 
 export function GraticuleLayer(props) {
   const map = useMap();
+  const group = useGroup();
+  const layerRef = useRef(new OlGraticuleLayer(props)); // single instance
 
   useEffect(() => {
-    if (!map) return;
-    const layer = new OlGraticuleLayer(props);
-    map.addLayer(layer);
-  }, [map]);
+    if (!map && !group) return;
+
+    const layer = layerRef.current; // same instance every time
+    const target = group || map;
+
+    if (target) {
+      if (target instanceof OlMap) {
+        target.addLayer(layer);
+      } else {
+        target.getLayers().push(layer);
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof OlMap) {
+          target.removeLayer(layer);
+        } else {
+          target.getLayers().remove(layer);
+        }
+      }
+    };
+  }, [map, group]);
 
   return null;
-};
+}

src/lib/layers/GraticuleLayer.tsx

@@ -1,15 +1,38 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { Map as OlMap } from 'ol';
 import OlHeatmapLayer from 'ol/layer/Heatmap';
 import { useMap } from '../Map';
+import { useGroup } from './LayerGroup';
 
 export function HeatmapLayer(props) {
   const map = useMap();
+  const group = useGroup();
+  const layerRef = useRef(new OlHeatmapLayer(props)); // single instance
 
   useEffect(() => {
-    if (!map) return;
-    const layer = new OlHeatmapLayer(props);
-    map.addLayer(layer);
-  }, [map]);
+    if (!map && !group) return;
+
+    const layer = layerRef.current; // same instance every time
+    const target = group || map;
+
+    if (target) {
+      if (target instanceof OlMap) {
+        target.addLayer(layer);
+      } else {
+        target.getLayers().push(layer);
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof OlMap) {
+          target.removeLayer(layer);
+        } else {
+          target.getLayers().remove(layer);
+        }
+      }
+    };
+  }, [map, group]);
 
   return null;
-};
+}

src/lib/layers/HeatmapLayer.tsx

@@ -1,4 +1,4 @@
-import * as ol from 'ol';
+import { Map as OlMap} from 'ol';
 import { useEffect, useRef } from 'react';
 import OlTileLayer from 'ol/layer/Tile';
 import { useMap } from '../Map';
@@ -16,7 +16,7 @@ export function TileLayer(props: any) {
     const target = group || map;
 
     if (target) {
-      if (target instanceof ol.Map) {
+      if (target instanceof OlMap) {
         target.addLayer(layer);
       } else {
         target.getLayers().push(layer);
@@ -25,7 +25,7 @@ export function TileLayer(props: any) {
 
     return () => {
       if (target) {
-        if (target instanceof ol.Map) {
+        if (target instanceof OlMap) {
           target.removeLayer(layer);
         } else {
           target.getLayers().remove(layer);

src/lib/layers/TileLayer.tsx

@@ -1,15 +1,38 @@
-import { useEffect } from 'react';
+import { Map as OlMap } from 'ol';
+import { useEffect, useRef } from 'react';
 import OlVectorLayer from 'ol/layer/Vector';
 import { useMap } from '../Map';
+import { useGroup } from './LayerGroup';
 
 export function VectorLayer(props) {
   const map = useMap();
+  const group = useGroup();
+  const layerRef = useRef(new OlVectorLayer(props)); // single instance
 
   useEffect(() => {
-    if (!map) return;
-    const layer = new OlVectorLayer(props);
-    map.addLayer(layer);
-  }, [map]);
+    if (!map && !group) return;
+
+    const layer = layerRef.current; // same instance every time
+    const target = group || map;
+
+    if (target) {
+      if (target instanceof OlMap) {
+        target.addLayer(layer);
+      } else {
+        target.getLayers().push(layer);
+      }
+    }
+
+    return () => {
+      if (target) {
+        if (target instanceof OlMap) {
+          target.removeLayer(layer);
+        } else {
+          target.getLayers().remove(layer);
+        }
+      }
+    };
+  }, [map, group]);
 
   return null;
-};
+}