Added LayersControl, SearchControl, Measuring tool

Author: allen-kim-chi

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwE-ajIJZ9sOohSf-QFOBbVFn9_OqGRAQ&libraries=places"></script>

src/lib/Map.tsx

@@ -51,6 +51,9 @@ export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
       },
       ...props, // Override with props.view if provided
     };
+    if (props.darkMode) {
+      mapRef.current.style.filter = 'invert(1)'
+    }
     const olMap = new OlMap(mapProps);
     setMap(olMap);
     mounted.current = true;

src/lib/add-marker.ts

@@ -0,0 +1,41 @@
+import Feature from "ol/Feature";
+import { Point } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
+import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import Icon from "ol/style/Icon";
+import Style from "ol/style/Style";
+import { getMarkerImage } from "./Marker";
+
+export function addMarker(map, lonLat, color='red', char='') {
+  let markerLayer = map.getLayers().getArray()
+    .find(el => el.get('key') === 'markerLayer') as VectorLayer;
+  
+  if (!markerLayer) {
+    const newMarkerLayer = new VectorLayer({
+      source: new VectorSource({ features: [] }),
+      properties: {key: 'markerLayer'},
+      zIndex: 1,
+    });
+    map.addLayer(newMarkerLayer);
+    markerLayer = newMarkerLayer;
+  }
+
+  // container of markers, this can be set when marker is added, so that I can remove it here.
+  const markerFeature = new Feature({
+    geometry: new Point(fromLonLat(lonLat))
+  });
+
+  markerFeature.setStyle(new Style({
+    image: new Icon({
+      scale: 1,
+      anchor: [0.5,40],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'pixels',
+      src: getMarkerImage(color, char)
+    }),
+  }));
+
+  markerLayer.getSource().addFeature(markerFeature);
+  return markerFeature;
+}

src/lib/controls/DrawControl.css

@@ -1,10 +1,22 @@
 .draw-control {
-  top: 60px;
-  left: 8px;
+  top: .5em;
+  left: .5em;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: transparent;
+
+  [hidden] {
+    display: none !important;
+  }
+
   .shapes {
+    display: flex;
+    flex-wrap: wrap;
+
     > * {
       background: #f0f0f0;
     }
+
     > .active {
       border: 2px inset;
       background: #ddd;

src/lib/controls/DrawControl.tsx

@@ -20,11 +20,14 @@ class DrawControl extends Control {
   snap: Snap;
   keyboardListener;
 
-  constructor(options={}) {
+  constructor(options={} as any) {
     const {target} = options as any;
 
     const element = document.createElement('div');
     element.className = 'draw-control ol-unselectable ol-control';
+    if (options.style) {
+      Object.assign(element.style, options.style);
+    }
     const title = 'Press shift for freehand drawing';
     element.insertAdjacentHTML('beforeend', `
       <button id="toggle-btn" 
@@ -143,7 +146,7 @@ export default function(props) {
 
   useEffect(() => {
     if (!map) return;
-    map.addControl(new DrawControl());
+    map.addControl(new DrawControl(props));
   }, [map]);
 
   return null;

src/lib/controls/LayersControl.css

@@ -1,12 +1,7 @@
 .layers-control {
-  top: 60px;
-  right: 8px;
+  top: .5rem;
+  right: .5rem;
 
-  #layers {
-    display: none;
-    text-align: left;
-  }
-  
   &.active {
     #toggle-btn { 
       width: 100%;
@@ -15,30 +10,20 @@
     #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.tsx

@@ -40,13 +40,18 @@ class LayersControl extends Control {
 
       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) => {
+        const labelEl = document.createElement('label');
+        const chkbox = document.createElement('input');
+        chkbox.setAttribute('type', 'checkbox');
+        chkbox.checked = layer.getVisible();
+        chkbox.addEventListener('click', (e: any) => {
           event.stopPropagation();
-          li.classList.toggle('visible');
-          layer.setVisible(li.classList.contains('visible'));
+          layer.setVisible(e.target.checked);
         });
+        labelEl.appendChild(chkbox);
+        const name = layer.get('name') || layer.constructor.name;
+        labelEl.insertAdjacentText('beforeend', name);
+        li.appendChild(labelEl);
 
         if (layer instanceof LayerGroup) {
           li.appendChild(createUL(layer));

src/lib/controls/SearchControl.css

@@ -0,0 +1,20 @@
+.search-control {
+  top: .5rem;
+  left: .5rem;
+  display: flex;
+
+  &.active {
+    #toggle-btn { 
+      width: 100%;
+      filter: invert(100%); 
+    }
+    #search { 
+      display: block;
+      padding: 4px;
+    }
+  }
+
+  #search {
+    display: none;
+  }
+}

src/lib/controls/SearchControl.tsx

@@ -0,0 +1,57 @@
+import { Map as OlMap } from 'ol';
+import Control from 'ol/control/Control';
+import { useEffect } from 'react';
+import { useMap } from '../Map';
+import { searchIcon } from './icons';
+import './SearchControl.css';
+import { addMarker } from '../add-marker';
+import { fromLonLat } from 'ol/proj';
+
+declare var google: any;
+
+class SearchControl extends Control {
+
+  constructor(options={}) {
+    const element = document.createElement('div');
+    const {target} = options as any;
+    super({element, target});
+
+    element.className = 'search-control ol-unselectable ol-control';
+    element.insertAdjacentHTML('beforeend', `
+      <button id="toggle-btn" title="Clik here to switch layers">${searchIcon}</button>
+      <input id="search" title="Enter address to search" autocomplete="off" size="40" />
+    `);
+    
+    element.querySelector('.search-control #toggle-btn')
+      .addEventListener('click', this.onToggleBtnClick.bind(this));
+    
+    const inputEl = element.querySelector('input#search');
+    var autocomplete = new google.maps.places.Autocomplete(inputEl);
+    autocomplete.addListener("place_changed", () => {
+      const place = autocomplete.getPlace();
+      var latitude = place.geometry.location.lat();
+      var longitude = place.geometry.location.lng();
+      const map = this.getMap();
+      addMarker(map, [longitude, latitude], 'blue');
+      map.getView().setCenter(fromLonLat([longitude, latitude]));
+      map.getView().setZoom(18);
+    });
+  }
+
+  onToggleBtnClick(event) {
+    const controlEl = event.target.closest('.search-control');
+    controlEl.classList.toggle('active');
+  }
+}
+
+
+export default function(props) {
+  const map: OlMap = useMap();
+
+  useEffect(() => {
+    if (!map) return;
+    map.addControl(new SearchControl());
+  }, [map]);
+
+  return null;
+};

src/lib/controls/icons.ts

@@ -35,6 +35,20 @@ export const moveIcon = `
 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>
+    <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>`;
+  </svg>`;
+
+export const searchIcon = `
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-8 6a8 8 0 1 1 14.32 4.906l5.387 5.387a1 1 0 0 1-1.414 1.414l-5.387-5.387A8 8 0 0 1 2 10z" 
+      fill="#0D0D0D"/>
+  </svg>
+ `