all repos — onyx @ c0a33feb7c8955acc019c1336d6992c79c07cd7d

minimal map annotation and location data sharing tool

src/99-onyx-scry.ts (raw)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
function init(): void {
  let overlays: OverlayState = OverlayState.load() ?? 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 © 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 © 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 closeAllModals = (): void => {
    createOverlayModal.setVisible(false);
  }

  const resetMapClick = (): void => {
    try {
      const addPointBtn = document.getElementById("addPoint-btn");
      if (addPointBtn) {
        addPointBtn.classList.remove("activeBtn");
      }
      map.off("click", addMarkerHandler);

    } catch {}
    try {
      const addCircleBtn = document.getElementById("addCircle-btn");
      if (addCircleBtn) {
        addCircleBtn.classList.remove("activeBtn");
      }
      map.off("click", addCircleHandler);
    } catch {}
  }
  
  const addMarkerHandler = (e: any): void => {
    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();