Added LayersControl, SearchControl, Measuring tool

Author: allen-kim-chi

src/lib/add-marker.ts

@@ -1,11 +1,11 @@
-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";
+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()

src/lib/controls/SearchControl.tsx

@@ -7,7 +7,7 @@ import './SearchControl.css';
 import { addMarker } from '../add-marker';
 import { fromLonLat } from 'ol/proj';
 
-declare var google: any;
+declare let google: any;
 
 class SearchControl extends Control {
 
@@ -26,11 +26,11 @@ class SearchControl extends Control {
       .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 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 latitude = place.geometry.location.lat();
+      const longitude = place.geometry.location.lng();
       const map = this.getMap();
       addMarker(map, [longitude, latitude], 'blue');
       map.getView().setCenter(fromLonLat([longitude, latitude]));

src/lib/interactions/SelectInteraction.tsx

@@ -74,7 +74,9 @@ const defaultStyle = function (feature) {
           })
         );
       }
-    } catch {} // getArea(geometry) may fail
+    } catch(e) { // getArea(geometry) may fail
+      console.error(e);
+    }
   }
   return style;
 }