switch to central MapHandler instead of arrow functions everywhere

src/.srcmap

@@ -1,5 +1,6 @@
 10-overlay.ts	147
 11-tilelayer.ts	37
-20-createOverlayModal.ts	96
+20-createOverlayModal.ts	98
-30-handlers.ts	11
+29-modalCollection.ts	10
-99-onyx-scry.ts	125
+30-handlers.ts	118
+99-onyx-scry.ts	44

src/11-tilelayer.ts

@@ -14,22 +14,22 @@ class TileLayerWrapper {
     return wrapper;
   }
   
-  static getActiveLayer(): TileLayerWrapper | null {
+  static getActiveLayer(): string | null {
     for (const l of TileLayerWrapper.layers) {
       if (l.visible == true) {
-        return l;
+        return l.name;
       }
     }
     return null;
   }
   static layers: TileLayerWrapper[] = new Array<TileLayerWrapper>();
-  static enableOnly(self: TileLayerWrapper, map: L.Map): void {
+  static enableOnly(self: string, map: L.Map): void {
     for (const l of TileLayerWrapper.layers) {
       if (l.visible) {
         l.self.removeFrom(map);
         l.visible = false;
       }
-      if (l.name == self.name) {
+      if (l.name == self) {
         l.self.addTo(map);
         l.visible = true;
       }

src/20-createOverlayModal.ts

@@ -60,11 +60,16 @@ class CreateOverlayModal {
     const desc = _this.descField();
     const submitBtn = _this.submitBtn();
     
+    if (radiusContainer) {
+      radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
+    }
+    
     switch (state) {
       case OverlayType.POINT:
         if (title) {
           title.innerHTML = "Add Marker";
         }
+
         if (submitBtn) {
           submitBtn.onclick = () => {
             const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
@@ -78,9 +83,6 @@ class CreateOverlayModal {
         if (title) {
           title.innerHTML = "Add Circle";
         }
-        if (radiusContainer) {
-          radiusContainer.style.display = "block";
-        }
         if (submitBtn) {
           submitBtn.onclick = () => {
             const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});

src/29-modalCollection.ts

@@ -0,0 +1,11 @@
+class ModalCollection {
+  createOverlay: CreateOverlayModal;
+  
+  constructor(createOverlay: CreateOverlayModal) {
+    this.createOverlay = createOverlay;
+  }
+  
+  closeAll(): void {
+    this.createOverlay.setVisible(false);
+  }
+}

src/30-handlers.ts

@@ -2,11 +2,118 @@ class MapHandler {
   map: L.Map;
   overlays: OverlayState;
   layers: TileLayerWrapper[];
+  modals: ModalCollection;
   
+  static instance: MapHandler | null = null;
   
-  constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) {
+  private constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection) {
     this.map = map;
     this.overlays = overlays;
     this.layers = layers;
+    this.modals = modals;
+  }
+  
+  static init(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection): void {
+    if (!MapHandler.instance) {
+      MapHandler.instance = new MapHandler(map, overlays, layers, modals);
+    }
+  }
+
+  static setButtonClick(btnId: string, handler: any): void {
+      const button = document.getElementById(btnId);
+      if (button) {
+        button.onclick = handler;
+      }
+  }
+  
+  static resetMapClick(): void {
+    const self = MapHandler.instance;
+    if (self) {
+      try {
+        const addPointBtn = document.getElementById("addPoint-btn");
+        if (addPointBtn) {
+          addPointBtn.classList.remove("activeBtn");
+        }
+        self.map.off("click", this.addMarker);
+      } catch {}
+      try {
+        const addCircleBtn = document.getElementById("addCircle-btn");
+        if (addCircleBtn) {
+          addCircleBtn.classList.remove("activeBtn");
+        }
+        self.map.off("click", this.addCircle);
+      } catch {}
+    }
+  }
+  
+  static addMarker(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.createOverlay.setVisible(true);
+      self.modals.createOverlay.setState(OverlayType.POINT, {
+        latlng: e.latlng,
+        map: self.map,
+        overlays: self.overlays,
+      });    
+      MapHandler.resetMapClick();
+    }
+  }
+  
+  static addCircle(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.createOverlay.setVisible(true);
+      self.modals.createOverlay.setState(OverlayType.CIRCLE, {
+        latlng: e.latlng,
+        map: self.map,
+        overlays: self.overlays,
+      });    
+      MapHandler.resetMapClick();
+    }
+  }
+  
+  static circleCollect(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.map.on("click", MapHandler.addCircle);
+    }
+  }
+  
+  static markerCollect(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.map.on("click", MapHandler.addMarker);
+    }
+  }
+  
+  static overlaySave(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      OverlayState.save(self.overlays);
+    }
+  }
+  
+  static overlayClear(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      OverlayState.clear(self.overlays, self.map);
+    }
+  }
+  
+  static swapTiles(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      if (TileLayerWrapper.getActiveLayer() == "satelliteLayer") {
+        TileLayerWrapper.enableOnly("streetLayer", self.map);
+      } else {
+        TileLayerWrapper.enableOnly("satelliteLayer", self.map);
+      }
+    }
   }
 }

src/99-onyx-scry.ts

@@ -21,105 +21,24 @@ function init(): void {
         attribution: "satellite tiles © Esri"
       }));
       
-  TileLayerWrapper.enableOnly(streetLayer, map);
+  TileLayerWrapper.enableOnly("streetLayer", map);
   
   overlays.markers.forEach(m=>m.add(map));
   overlays.circles.forEach(m=>m.add(map));
   overlays.polygons.forEach(m=>m.add(map));
-  
   const createOverlayModal = new CreateOverlayModal();
+  const modals = new ModalCollection(
+    createOverlayModal);
 
-  const closeAllModals = (): void => {
+  MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
-    createOverlayModal.setVisible(false);
-  }
   
-  const resetMapClick = (): void => {
+  MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
-    try {
+  MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
-      const addPointBtn = document.getElementById("addPoint-btn");
-      if (addPointBtn) {
-        addPointBtn.classList.remove("activeBtn");
-      }
-      map.off("click", addMarkerHandler);
   
-    } catch {}
+  MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
-    try {
+  MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
-      const addCircleBtn = document.getElementById("addCircle-btn");
-      if (addCircleBtn) {
-        addCircleBtn.classList.remove("activeBtn");
-      }
-      map.off("click", addCircleHandler);
-    } catch {}
-  }
   
-  const addMarkerHandler = (e: any): void => {
+  MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
-    createOverlayModal.setVisible(true);
-    createOverlayModal.setState(OverlayType.POINT, {
-      latlng: e.latlng,
-      map: map,
-      overlays: overlays,
-    });    
-    resetMapClick();
-  }
-  
-  const addCircleHandler = (e: any): void => {
-    createOverlayModal.setVisible(true);
-    createOverlayModal.setState(OverlayType.CIRCLE, {
-      latlng: e.latlng,
-      map: map,
-      overlays: overlays,
-    });    
-    resetMapClick();
-  }
-  
-  const addMarkerBtn = document.getElementById("addPoint-btn");
-  if (addMarkerBtn) {
-    addMarkerBtn.onclick = (e: any): void => {
-      closeAllModals();
-      resetMapClick()
-      addMarkerBtn.classList.add("activeBtn");
-      map.on("click", addMarkerHandler);
-    };
-  }  
-  
-  const addCircleBtn = document.getElementById("addCircle-btn");
-  if (addCircleBtn) {
-    addCircleBtn.onclick = (e: any): void => {
-      closeAllModals();
-      resetMapClick();
-      addCircleBtn.classList.add("activeBtn");
-      map.on("click", addCircleHandler);
-    }
-  }
-  
-  const saveBtn = document.getElementById("save-btn");
-  if (saveBtn) {
-    saveBtn.onclick = (e: any): void => {
-      OverlayState.save(overlays);
-    };
-  }
-  
-  const clearBtn = document.getElementById("clear-btn");
-  if (clearBtn) {
-    clearBtn.onclick = (e: any): void => {
-      overlays = OverlayState.clear(overlays, map);
-    }
-  }
-  
-  const tilesBtn = document.getElementById("tiles-btn");
-  if (tilesBtn) {
-    tilesBtn.onclick = (e: any): void => {
-      if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
-        TileLayerWrapper.enableOnly(streetLayer, map);
-      } else {
-        TileLayerWrapper.enableOnly(satelliteLayer, map);
-      }
-    };
-  }
-  
-  const main = document.getElementById("app-container");
-  if (main) {
-    main.style.display = "initial";
-  }
 }
 
 init();

src/build.sh

@@ -31,7 +31,7 @@ done
 errorOut=$(mktemp)
 
 # compile and write output to temporary file
-tsc --strict --outFile ../static/${progname}.js ${progname}.ts | sed -e s/\(/:/ -e s/,/:/ -e s/\):// | nobs >> ${errorOut}
+tsc --strict --target ES2015 --outFile ../static/${progname}.js ${progname}.ts | sed -e s/\(/:/ -e s/,/:/ -e s/\):// | nobs >> ${errorOut}
 
 # translate lines into original source with the source map and output to stdout
 ../buildtools/sourcemapper ${errorOut}

src/onyx-scry.ts

@@ -161,22 +161,22 @@ class OverlayState {
     return wrapper;
   }
   
-  static getActiveLayer(): TileLayerWrapper | null {
+  static getActiveLayer(): string | null {
     for (const l of TileLayerWrapper.layers) {
       if (l.visible == true) {
-        return l;
+        return l.name;
       }
     }
     return null;
   }
   static layers: TileLayerWrapper[] = new Array<TileLayerWrapper>();
-  static enableOnly(self: TileLayerWrapper, map: L.Map): void {
+  static enableOnly(self: string, map: L.Map): void {
     for (const l of TileLayerWrapper.layers) {
       if (l.visible) {
         l.self.removeFrom(map);
         l.visible = false;
       }
-      if (l.name == self.name) {
+      if (l.name == self) {
         l.self.addTo(map);
         l.visible = true;
       }
@@ -244,11 +244,16 @@ class OverlayState {
     const desc = _this.descField();
     const submitBtn = _this.submitBtn();
     
+    if (radiusContainer) {
+      radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
+    }
+    
     switch (state) {
       case OverlayType.POINT:
         if (title) {
           title.innerHTML = "Add Marker";
         }
+
         if (submitBtn) {
           submitBtn.onclick = () => {
             const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
@@ -262,9 +267,6 @@ class OverlayState {
         if (title) {
           title.innerHTML = "Add Circle";
         }
-        if (radiusContainer) {
-          radiusContainer.style.display = "block";
-        }
         if (submitBtn) {
           submitBtn.onclick = () => {
             const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
@@ -278,16 +280,133 @@ class OverlayState {
         break;
     }
   }
+}class ModalCollection {
+  createOverlay: CreateOverlayModal;
+  
+  constructor(createOverlay: CreateOverlayModal) {
+    this.createOverlay = createOverlay;
+  }
+  
+  closeAll(): void {
+    this.createOverlay.setVisible(false);
+  }
 }class MapHandler {
   map: L.Map;
   overlays: OverlayState;
   layers: TileLayerWrapper[];
+  modals: ModalCollection;
   
+  static instance: MapHandler | null = null;
   
-  constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) {
+  private constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection) {
     this.map = map;
     this.overlays = overlays;
     this.layers = layers;
+    this.modals = modals;
+  }
+  
+  static init(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[], modals: ModalCollection): void {
+    if (!MapHandler.instance) {
+      MapHandler.instance = new MapHandler(map, overlays, layers, modals);
+    }
+  }
+
+  static setButtonClick(btnId: string, handler: any): void {
+      const button = document.getElementById(btnId);
+      if (button) {
+        button.onclick = handler;
+      }
+  }
+  
+  static resetMapClick(): void {
+    const self = MapHandler.instance;
+    if (self) {
+      try {
+        const addPointBtn = document.getElementById("addPoint-btn");
+        if (addPointBtn) {
+          addPointBtn.classList.remove("activeBtn");
+        }
+        self.map.off("click", this.addMarker);
+      } catch {}
+      try {
+        const addCircleBtn = document.getElementById("addCircle-btn");
+        if (addCircleBtn) {
+          addCircleBtn.classList.remove("activeBtn");
+        }
+        self.map.off("click", this.addCircle);
+      } catch {}
+    }
+  }
+  
+  static addMarker(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.createOverlay.setVisible(true);
+      self.modals.createOverlay.setState(OverlayType.POINT, {
+        latlng: e.latlng,
+        map: self.map,
+        overlays: self.overlays,
+      });    
+      MapHandler.resetMapClick();
+    }
+  }
+  
+  static addCircle(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.createOverlay.setVisible(true);
+      self.modals.createOverlay.setState(OverlayType.CIRCLE, {
+        latlng: e.latlng,
+        map: self.map,
+        overlays: self.overlays,
+      });    
+      MapHandler.resetMapClick();
+    }
+  }
+  
+  static circleCollect(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.map.on("click", MapHandler.addCircle);
+    }
+  }
+  
+  static markerCollect(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.map.on("click", MapHandler.addMarker);
+    }
+  }
+  
+  static overlaySave(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      OverlayState.save(self.overlays);
+    }
+  }
+  
+  static overlayClear(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      OverlayState.clear(self.overlays, self.map);
+    }
+  }
+  
+  static swapTiles(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      if (TileLayerWrapper.getActiveLayer() == "satelliteLayer") {
+        TileLayerWrapper.enableOnly("streetLayer", self.map);
+      } else {
+        TileLayerWrapper.enableOnly("satelliteLayer", self.map);
+      }
+    }
   }
 }
 function init(): void {
@@ -312,105 +431,24 @@ function init(): void {
         attribution: "satellite tiles &copy; Esri"
       }));
       
-  TileLayerWrapper.enableOnly(streetLayer, map);
+  TileLayerWrapper.enableOnly("streetLayer", map);
   
   overlays.markers.forEach(m=>m.add(map));
   overlays.circles.forEach(m=>m.add(map));
   overlays.polygons.forEach(m=>m.add(map));
-  
   const createOverlayModal = new CreateOverlayModal();
+  const modals = new ModalCollection(
+    createOverlayModal);
 
-  const closeAllModals = (): void => {
+  MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
-    createOverlayModal.setVisible(false);
-  }
   
-  const resetMapClick = (): void => {
+  MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
-    try {
+  MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
-      const addPointBtn = document.getElementById("addPoint-btn");
-      if (addPointBtn) {
-        addPointBtn.classList.remove("activeBtn");
-      }
-      map.off("click", addMarkerHandler);
   
-    } catch {}
+  MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
-    try {
+  MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
-      const addCircleBtn = document.getElementById("addCircle-btn");
-      if (addCircleBtn) {
-        addCircleBtn.classList.remove("activeBtn");
-      }
-      map.off("click", addCircleHandler);
-    } catch {}
-  }
   
-  const addMarkerHandler = (e: any): void => {
+  MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
-    createOverlayModal.setVisible(true);
-    createOverlayModal.setState(OverlayType.POINT, {
-      latlng: e.latlng,
-      map: map,
-      overlays: overlays,
-    });    
-    resetMapClick();
-  }
-  
-  const addCircleHandler = (e: any): void => {
-    createOverlayModal.setVisible(true);
-    createOverlayModal.setState(OverlayType.CIRCLE, {
-      latlng: e.latlng,
-      map: map,
-      overlays: overlays,
-    });    
-    resetMapClick();
-  }
-  
-  const addMarkerBtn = document.getElementById("addPoint-btn");
-  if (addMarkerBtn) {
-    addMarkerBtn.onclick = (e: any): void => {
-      closeAllModals();
-      resetMapClick()
-      addMarkerBtn.classList.add("activeBtn");
-      map.on("click", addMarkerHandler);
-    };
-  }  
-  
-  const addCircleBtn = document.getElementById("addCircle-btn");
-  if (addCircleBtn) {
-    addCircleBtn.onclick = (e: any): void => {
-      closeAllModals();
-      resetMapClick();
-      addCircleBtn.classList.add("activeBtn");
-      map.on("click", addCircleHandler);
-    }
-  }
-  
-  const saveBtn = document.getElementById("save-btn");
-  if (saveBtn) {
-    saveBtn.onclick = (e: any): void => {
-      OverlayState.save(overlays);
-    };
-  }
-  
-  const clearBtn = document.getElementById("clear-btn");
-  if (clearBtn) {
-    clearBtn.onclick = (e: any): void => {
-      overlays = OverlayState.clear(overlays, map);
-    }
-  }
-  
-  const tilesBtn = document.getElementById("tiles-btn");
-  if (tilesBtn) {
-    tilesBtn.onclick = (e: any): void => {
-      if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
-        TileLayerWrapper.enableOnly(streetLayer, map);
-      } else {
-        TileLayerWrapper.enableOnly(satelliteLayer, map);
-      }
-    };
-  }
-  
-  const main = document.getElementById("app-container");
-  if (main) {
-    main.style.display = "initial";
-  }
 }
 
 init();

static/onyx-scry.js

@@ -1,119 +1,94 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
+class Point {
-    var extendStatics = function (d, b) {
+    constructor() {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var Point = /** @class */ (function () {
-    function Point() {
         this.lat = 0.00;
         this.lng = 0.00;
     }
-    return Point;
+}
-}());
 var OverlayType;
 (function (OverlayType) {
     OverlayType[OverlayType["POINT"] = 0] = "POINT";
     OverlayType[OverlayType["CIRCLE"] = 1] = "CIRCLE";
     OverlayType[OverlayType["POLYGON"] = 2] = "POLYGON";
 })(OverlayType || (OverlayType = {}));
-var OverlayData = /** @class */ (function () {
+class OverlayData {
-    function OverlayData(type, name, desc, points, options) {
+    constructor(type, name, desc, points, options) {
         this.type = type;
         this.name = name;
         this.desc = desc;
         this.points = points;
         this.options = options;
     }
-    return OverlayData;
+}
-}());
+class OverlayBase {
-var OverlayBase = /** @class */ (function () {
+    constructor(name, desc, points, options) {
-    function OverlayBase(name, desc, points, options) {
         this.name = name;
         this.desc = desc;
         this.points = points;
         this.options = options;
     }
-    OverlayBase.prototype.add = function (map) {
+    add(map) {
         this.self.addTo(map);
-    };
+    }
-    OverlayBase.prototype.remove = function (map) {
+    remove(map) {
         this.self.removeFrom(map);
-    };
-    return OverlayBase;
-}());
-var Marker = /** @class */ (function (_super) {
-    __extends(Marker, _super);
-    function Marker(name, desc, point, options) {
-        var _this_1 = _super.call(this, name, desc, [point], options) || this;
-        _this_1.self = L.marker(point);
-        _this_1.self.bindPopup("<h3>" + name + "</h3><p>" + desc + "</p>");
-        return _this_1;
     }
-    return Marker;
+}
-}(OverlayBase));
+class Marker extends OverlayBase {
-var Circle = /** @class */ (function (_super) {
+    constructor(name, desc, point, options) {
-    __extends(Circle, _super);
+        super(name, desc, [point], options);
-    function Circle(name, desc, point, options) {
+        this.self = L.marker(point);
-        var _this_1 = _super.call(this, name, desc, [point], options) || this;
+        this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
-        _this_1.self = L.circle(point, options);
-        _this_1.self.bindPopup("<h3>" + name + "</h3><p>" + desc + "</p>");
-        return _this_1;
     }
-    return Circle;
+}
-}(OverlayBase));
+class Circle extends OverlayBase {
-var Polygon = /** @class */ (function (_super) {
+    constructor(name, desc, point, options) {
-    __extends(Polygon, _super);
+        super(name, desc, [point], options);
-    function Polygon(name, desc, points, options) {
+        this.self = L.circle(point, options);
-        var _this_1 = _super.call(this, name, desc, points, options) || this;
+        this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
-        _this_1.self = L.polygon(points, options);
-        return _this_1;
     }
-    return Polygon;
+}
-}(OverlayBase));
+class Polygon extends OverlayBase {
-var OverlayState = /** @class */ (function () {
+    constructor(name, desc, points, options) {
-    function OverlayState() {
+        super(name, desc, points, options);
+        this.self = L.polygon(points, options);
+    }
+}
+class OverlayState {
+    constructor() {
         this.markers = [];
         this.circles = [];
         this.polygons = [];
     }
-    OverlayState.load = function () {
+    static load() {
-        var store = localStorage.getItem("overlay_state");
+        const store = localStorage.getItem("overlay_state");
         if (store) {
-            var model = JSON.parse(store);
+            const model = JSON.parse(store);
             return {
-                markers: model.markers.map(function (m) { return OverlayState.fromData(m); }),
+                markers: model.markers.map((m) => OverlayState.fromData(m)),
-                circles: model.circles.map(function (c) { return OverlayState.fromData(c); }),
+                circles: model.circles.map((c) => OverlayState.fromData(c)),
-                polygons: model.polygons.map(function (p) { return OverlayState.fromData(p); })
+                polygons: model.polygons.map((p) => OverlayState.fromData(p)),
             };
         }
         else {
             return new OverlayState();
         }
-    };
+    }
-    OverlayState.save = function (overlayState) {
+    static save(overlayState) {
         localStorage.setItem("overlay_state", JSON.stringify({
-            markers: overlayState.markers.map(function (m) { return OverlayState.toData(m); }),
+            markers: overlayState.markers.map((m) => OverlayState.toData(m)),
-            circles: overlayState.circles.map(function (c) { return OverlayState.toData(c); }),
+            circles: overlayState.circles.map((c) => OverlayState.toData(c)),
-            polygons: overlayState.polygons.map(function (p) { return OverlayState.toData(p); })
+            polygons: overlayState.polygons.map((p) => OverlayState.toData(p)),
         }));
-    };
+    }
-    OverlayState.clear = function (overlayState, map) {
+    static clear(overlayState, map) {
-        overlayState.markers.forEach(function (m) { return m.remove(map); });
+        overlayState.markers.forEach((m) => m.remove(map));
-        overlayState.circles.forEach(function (c) { return c.remove(map); });
+        overlayState.circles.forEach((c) => c.remove(map));
-        overlayState.polygons.forEach(function (p) { return p.remove(map); });
+        overlayState.polygons.forEach((p) => p.remove(map));
         return new OverlayState();
-    };
+    }
-    OverlayState.toData = function (source) {
+    static toData(source) {
-        var type = OverlayType.POINT;
+        let type = OverlayType.POINT;
         if (source.points.length > 1) {
             type = OverlayType.POLYGON;
         }
@@ -121,8 +96,8 @@ var OverlayState = /** @class */ (function () {
             type = OverlayType.CIRCLE;
         }
         return new OverlayData(type, source.name, source.desc, source.points, source.options);
-    };
+    }
-    OverlayState.fromData = function (data) {
+    static fromData(data) {
         switch (data.type) {
             case OverlayType.POINT:
                 return new Marker(data.name, data.desc, data.points[0], data.options);
@@ -131,106 +106,105 @@ var OverlayState = /** @class */ (function () {
             case OverlayType.POLYGON:
                 return new Polygon(data.name, data.desc, data.points, data.options);
         }
-    };
+    }
-    return OverlayState;
+}
-}());
+class TileLayerWrapper {
-var TileLayerWrapper = /** @class */ (function () {
+    constructor(name, self) {
-    function TileLayerWrapper(name, self) {
         this.visible = false;
         this.self = self;
         this.name = name;
     }
-    TileLayerWrapper.constructLayer = function (name, self) {
+    static constructLayer(name, self) {
-        var wrapper = new TileLayerWrapper(name, self);
+        const wrapper = new TileLayerWrapper(name, self);
         TileLayerWrapper.layers.push(wrapper);
         return wrapper;
-    };
+    }
-    TileLayerWrapper.getActiveLayer = function () {
+    static getActiveLayer() {
-        for (var _i = 0, _a = TileLayerWrapper.layers; _i < _a.length; _i++) {
+        for (const l of TileLayerWrapper.layers) {
-            var l = _a[_i];
             if (l.visible == true) {
-                return l;
+                return l.name;
             }
         }
         return null;
-    };
+    }
-    TileLayerWrapper.enableOnly = function (self, map) {
+    static enableOnly(self, map) {
-        for (var _i = 0, _a = TileLayerWrapper.layers; _i < _a.length; _i++) {
+        for (const l of TileLayerWrapper.layers) {
-            var l = _a[_i];
             if (l.visible) {
                 l.self.removeFrom(map);
                 l.visible = false;
             }
-            if (l.name == self.name) {
+            if (l.name == self) {
                 l.self.addTo(map);
                 l.visible = true;
             }
         }
-    };
+    }
-    TileLayerWrapper.layers = new Array();
+}
-    return TileLayerWrapper;
+TileLayerWrapper.layers = new Array();
-}());
+class CreateOverlayModal {
-var CreateOverlayModal = /** @class */ (function () {
+    constructor() {
-    function CreateOverlayModal() {
+        const _this = this;
-        var _this = this;
+        const closeBtn = document.getElementById("createOverlay-closeBtn");
-        var closeBtn = document.getElementById("createOverlay-closeBtn");
         if (closeBtn) {
-            closeBtn.onclick = function () { _this.setVisible(false); };
+            closeBtn.onclick = () => { _this.setVisible(false); };
         }
     }
-    CreateOverlayModal.prototype.self = function () {
+    self() {
         return document.getElementById("createOverlay-container");
-    };
+    }
-    CreateOverlayModal.prototype.title = function () {
+    title() {
         return document.getElementById("createOverlay-title");
-    };
+    }
-    CreateOverlayModal.prototype.content = function () {
+    content() {
         return document.getElementById("createOverlay-content");
-    };
+    }
-    CreateOverlayModal.prototype.submitBtn = function () {
+    submitBtn() {
         return document.getElementById("createOverlay-submitBtn");
-    };
+    }
-    CreateOverlayModal.prototype.radiusContainer = function () {
+    radiusContainer() {
         return document.getElementById("radius-container");
-    };
+    }
-    CreateOverlayModal.prototype.nameField = function () {
+    nameField() {
         var _a, _b;
         return (_b = (_a = document.getElementById("createOverlay-name")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-    };
+    }
-    CreateOverlayModal.prototype.descField = function () {
+    descField() {
         var _a, _b;
         return (_b = (_a = document.getElementById("createOverlay-desc")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-    };
+    }
-    CreateOverlayModal.prototype.radiusField = function () {
+    radiusField() {
         var _a, _b;
         return (_b = (_a = document.getElementById("createOverlay-radius")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-    };
+    }
-    CreateOverlayModal.prototype.visible = function () {
+    visible() {
         var _a;
         return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none";
-    };
+    }
-    CreateOverlayModal.prototype.setVisible = function (v) {
+    setVisible(v) {
-        var modal = this.self();
+        const modal = this.self();
         if (modal) {
             modal.style.display = v ? "block" : "none";
         }
-    };
+    }
-    CreateOverlayModal.prototype.setState = function (state, args) {
+    setState(state, args) {
-        var _this = this;
+        const _this = this;
-        var title = this.title();
+        const title = this.title();
-        var radiusContainer = _this.radiusContainer();
+        const radiusContainer = _this.radiusContainer();
-        var radius = _this.radiusField();
+        const radius = _this.radiusField();
-        var name = _this.nameField();
+        const name = _this.nameField();
-        var desc = _this.descField();
+        const desc = _this.descField();
-        var submitBtn = _this.submitBtn();
+        const submitBtn = _this.submitBtn();
+        if (radiusContainer) {
+            radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
+        }
         switch (state) {
             case OverlayType.POINT:
                 if (title) {
                     title.innerHTML = "Add Marker";
                 }
                 if (submitBtn) {
-                    submitBtn.onclick = function () {
+                    submitBtn.onclick = () => {
-                        var point = new Marker(name, desc, args.latlng, { title: name, alt: name });
+                        const point = new Marker(name, desc, args.latlng, { title: name, alt: name });
                         point.add(args.map);
                         args.overlays.markers.push(point);
                         _this.setVisible(false);
@@ -241,12 +215,9 @@ var CreateOverlayModal = /** @class */ (function () {
                 if (title) {
                     title.innerHTML = "Add Circle";
                 }
-                if (radiusContainer) {
-                    radiusContainer.style.display = "block";
-                }
                 if (submitBtn) {
-                    submitBtn.onclick = function () {
+                    submitBtn.onclick = () => {
-                        var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 });
+                        const circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 });
                         circle.add(args.map);
                         args.overlays.circles.push(circle);
                         _this.setVisible(false);
@@ -256,117 +227,145 @@ var CreateOverlayModal = /** @class */ (function () {
             case OverlayType.POLYGON:
                 break;
         }
-    };
+    }
-    return CreateOverlayModal;
+}
-}());
+class ModalCollection {
-var MapHandler = /** @class */ (function () {
+    constructor(createOverlay) {
-    function MapHandler(map, overlays, layers) {
+        this.createOverlay = createOverlay;
+    }
+    closeAll() {
+        this.createOverlay.setVisible(false);
+    }
+}
+class MapHandler {
+    constructor(map, overlays, layers, modals) {
         this.map = map;
         this.overlays = overlays;
         this.layers = layers;
+        this.modals = modals;
     }
-    return MapHandler;
+    static init(map, overlays, layers, modals) {
-}());
+        if (!MapHandler.instance) {
-function init() {
+            MapHandler.instance = new MapHandler(map, overlays, layers, modals);
-    var _a;
+        }
-    var overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState();
+    }
-    var map = L.map('map').setView([35.6653, -105.9507], 13);
+    static setButtonClick(btnId, handler) {
-    var streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        const button = document.getElementById(btnId);
-        maxZoom: 19,
+        if (button) {
-        attribution: "street map tiles &copy; OpenStreetMap"
+            button.onclick = handler;
-    }));
+        }
-    var satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    }
-        maxZoom: 19,
+    static resetMapClick() {
-        attribution: "satellite tiles &copy; Esri"
+        const self = MapHandler.instance;
-    }));
+        if (self) {
-    TileLayerWrapper.enableOnly(streetLayer, map);
-    overlays.markers.forEach(function (m) { return m.add(map); });
-    overlays.circles.forEach(function (m) { return m.add(map); });
-    overlays.polygons.forEach(function (m) { return m.add(map); });
-    var createOverlayModal = new CreateOverlayModal();
-    var closeAllModals = function () {
-        createOverlayModal.setVisible(false);
-    };
-    var resetMapClick = function () {
             try {
-            var addPointBtn = document.getElementById("addPoint-btn");
+                const addPointBtn = document.getElementById("addPoint-btn");
                 if (addPointBtn) {
                     addPointBtn.classList.remove("activeBtn");
                 }
-            map.off("click", addMarkerHandler);
+                self.map.off("click", this.addMarker);
             }
             catch (_a) { }
             try {
-            var addCircleBtn_1 = document.getElementById("addCircle-btn");
+                const addCircleBtn = document.getElementById("addCircle-btn");
-            if (addCircleBtn_1) {
+                if (addCircleBtn) {
-                addCircleBtn_1.classList.remove("activeBtn");
+                    addCircleBtn.classList.remove("activeBtn");
                 }
-            map.off("click", addCircleHandler);
+                self.map.off("click", this.addCircle);
             }
             catch (_b) { }
-    };
+        }
-    var addMarkerHandler = function (e) {
+    }
-        createOverlayModal.setVisible(true);
+    static addMarker(e) {
-        createOverlayModal.setState(OverlayType.POINT, {
+        const self = MapHandler.instance;
+        if (self) {
+            self.modals.createOverlay.setVisible(true);
+            self.modals.createOverlay.setState(OverlayType.POINT, {
                 latlng: e.latlng,
-            map: map,
+                map: self.map,
-            overlays: overlays
+                overlays: self.overlays,
             });
-        resetMapClick();
+            MapHandler.resetMapClick();
-    };
+        }
-    var addCircleHandler = function (e) {
+    }
-        createOverlayModal.setVisible(true);
+    static addCircle(e) {
-        createOverlayModal.setState(OverlayType.CIRCLE, {
+        const self = MapHandler.instance;
+        if (self) {
+            self.modals.createOverlay.setVisible(true);
+            self.modals.createOverlay.setState(OverlayType.CIRCLE, {
                 latlng: e.latlng,
-            map: map,
+                map: self.map,
-            overlays: overlays
+                overlays: self.overlays,
             });
-        resetMapClick();
+            MapHandler.resetMapClick();
-    };
-    var addMarkerBtn = document.getElementById("addPoint-btn");
-    if (addMarkerBtn) {
-        addMarkerBtn.onclick = function (e) {
-            closeAllModals();
-            resetMapClick();
-            addMarkerBtn.classList.add("activeBtn");
-            map.on("click", addMarkerHandler);
-        };
         }
-    var addCircleBtn = document.getElementById("addCircle-btn");
-    if (addCircleBtn) {
-        addCircleBtn.onclick = function (e) {
-            closeAllModals();
-            resetMapClick();
-            addCircleBtn.classList.add("activeBtn");
-            map.on("click", addCircleHandler);
-        };
     }
-    var saveBtn = document.getElementById("save-btn");
+    static circleCollect(e) {
-    if (saveBtn) {
+        const self = MapHandler.instance;
-        saveBtn.onclick = function (e) {
+        if (self) {
-            OverlayState.save(overlays);
+            self.modals.closeAll();
-        };
+            MapHandler.resetMapClick();
+            e.target.classList.add("activeBtn");
+            self.map.on("click", MapHandler.addCircle);
         }
-    var clearBtn = document.getElementById("clear-btn");
-    if (clearBtn) {
-        clearBtn.onclick = function (e) {
-            overlays = OverlayState.clear(overlays, map);
-        };
     }
-    var tilesBtn = document.getElementById("tiles-btn");
+    static markerCollect(e) {
-    if (tilesBtn) {
+        const self = MapHandler.instance;
-        tilesBtn.onclick = function (e) {
+        if (self) {
-            if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
+            self.modals.closeAll();
-                TileLayerWrapper.enableOnly(streetLayer, map);
+            MapHandler.resetMapClick();
+            e.target.classList.add("activeBtn");
+            self.map.on("click", MapHandler.addMarker);
+        }
+    }
+    static overlaySave(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            OverlayState.save(self.overlays);
+        }
+    }
+    static overlayClear(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            OverlayState.clear(self.overlays, self.map);
+        }
+    }
+    static swapTiles(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            if (TileLayerWrapper.getActiveLayer() == "satelliteLayer") {
+                TileLayerWrapper.enableOnly("streetLayer", self.map);
             }
             else {
-                TileLayerWrapper.enableOnly(satelliteLayer, map);
+                TileLayerWrapper.enableOnly("satelliteLayer", self.map);
             }
-        };
         }
-    var main = document.getElementById("app-container");
-    if (main) {
-        main.style.display = "initial";
     }
 }
+MapHandler.instance = null;
+function init() {
+    var _a;
+    let overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState();
+    const map = L.map('map').setView([35.6653, -105.9507], 13);
+    const streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: "street map tiles &copy; OpenStreetMap"
+    }));
+    const satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        maxZoom: 19,
+        attribution: "satellite tiles &copy; Esri"
+    }));
+    TileLayerWrapper.enableOnly("streetLayer", map);
+    overlays.markers.forEach(m => m.add(map));
+    overlays.circles.forEach(m => m.add(map));
+    overlays.polygons.forEach(m => m.add(map));
+    const createOverlayModal = new CreateOverlayModal();
+    const modals = new ModalCollection(createOverlayModal);
+    MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
+    MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
+    MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
+    MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
+    MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
+    MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
+}
 init();