nilix/onyx
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

switch to central MapHandler instead of arrow functions everywhere

Browse source
This commit is contained in:
Iris Lightshard 2022-08-13 23:50:36 -06:00
parent c0a33feb7c
commit b1342fcc0f
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
9 changed files with 517 additions and 440 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/.srcmap
View file

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

8
src/11-tilelayer.ts
View file

@ -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;
}

8
src/20-createOverlayModal.ts
View file

@ -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});

11
src/29-modalCollection.ts Normal file
View file

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

109
src/30-handlers.ts
View file

@ -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);
}
}
}
}

99
src/99-onyx-scry.ts
View file

@ -21,105 +21,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 => {
createOverlayModal.setVisible(false);
}
MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
const resetMapClick = (): void => {
try {
const addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler);
MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
} catch {}
try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
map.off("click", addCircleHandler);
} catch {}
}
MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
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";
}
MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
}
init();

2
src/build.sh
View file

@ -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}

234
src/onyx-scry.ts
View file

@ -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 => {
createOverlayModal.setVisible(false);
}
MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
const resetMapClick = (): void => {
try {
const addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler);
MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
} catch {}
try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
map.off("click", addCircleHandler);
} catch {}
}
MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
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";
}
MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
}
init();

479
static/onyx-scry.js
View file

@ -1,119 +1,94 @@
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
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() {
class Point {
constructor() {
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 () {
function OverlayData(type, name, desc, points, options) {
class OverlayData {
constructor(type, name, desc, points, options) {
this.type = type;
this.name = name;
this.desc = desc;
this.points = points;
this.options = options;
}
return OverlayData;
}());
var OverlayBase = /** @class */ (function () {
function OverlayBase(name, desc, points, options) {
}
class OverlayBase {
constructor(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));
var Circle = /** @class */ (function (_super) {
__extends(Circle, _super);
function Circle(name, desc, point, options) {
var _this_1 = _super.call(this, name, desc, [point], options) || this;
_this_1.self = L.circle(point, options);
_this_1.self.bindPopup("<h3>" + name + "</h3><p>" + desc + "</p>");
return _this_1;
}
class Marker extends OverlayBase {
constructor(name, desc, point, options) {
super(name, desc, [point], options);
this.self = L.marker(point);
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
}
return Circle;
}(OverlayBase));
var Polygon = /** @class */ (function (_super) {
__extends(Polygon, _super);
function Polygon(name, desc, points, options) {
var _this_1 = _super.call(this, name, desc, points, options) || this;
_this_1.self = L.polygon(points, options);
return _this_1;
}
class Circle extends OverlayBase {
constructor(name, desc, point, options) {
super(name, desc, [point], options);
this.self = L.circle(point, options);
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
}
return Polygon;
}(OverlayBase));
var OverlayState = /** @class */ (function () {
function OverlayState() {
}
class Polygon extends OverlayBase {
constructor(name, desc, points, options) {
super(name, desc, points, options);
this.self = L.polygon(points, options);
}
}
class OverlayState {
constructor() {
this.markers = [];
this.circles = [];
this.polygons = [];
}
OverlayState.load = function () {
var store = localStorage.getItem("overlay_state");
static load() {
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); }),
circles: model.circles.map(function (c) { return OverlayState.fromData(c); }),
polygons: model.polygons.map(function (p) { return OverlayState.fromData(p); })
markers: model.markers.map((m) => OverlayState.fromData(m)),
circles: model.circles.map((c) => OverlayState.fromData(c)),
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); }),
circles: overlayState.circles.map(function (c) { return OverlayState.toData(c); }),
polygons: overlayState.polygons.map(function (p) { return OverlayState.toData(p); })
markers: overlayState.markers.map((m) => OverlayState.toData(m)),
circles: overlayState.circles.map((c) => OverlayState.toData(c)),
polygons: overlayState.polygons.map((p) => OverlayState.toData(p)),
}));
};
OverlayState.clear = function (overlayState, map) {
overlayState.markers.forEach(function (m) { return m.remove(map); });
overlayState.circles.forEach(function (c) { return c.remove(map); });
overlayState.polygons.forEach(function (p) { return p.remove(map); });
}
static clear(overlayState, map) {
overlayState.markers.forEach((m) => m.remove(map));
overlayState.circles.forEach((c) => c.remove(map));
overlayState.polygons.forEach((p) => p.remove(map));
return new OverlayState();
};
OverlayState.toData = function (source) {
var type = OverlayType.POINT;
}
static toData(source) {
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;
}());
var TileLayerWrapper = /** @class */ (function () {
function TileLayerWrapper(name, self) {
}
}
class TileLayerWrapper {
constructor(name, self) {
this.visible = false;
this.self = self;
this.name = name;
}
TileLayerWrapper.constructLayer = function (name, self) {
var wrapper = new TileLayerWrapper(name, self);
static constructLayer(name, self) {
const wrapper = new TileLayerWrapper(name, self);
TileLayerWrapper.layers.push(wrapper);
return wrapper;
};
TileLayerWrapper.getActiveLayer = function () {
for (var _i = 0, _a = TileLayerWrapper.layers; _i < _a.length; _i++) {
var l = _a[_i];
}
static getActiveLayer() {
for (const l of TileLayerWrapper.layers) {
if (l.visible == true) {
return l;
return l.name;
}
}
return null;
};
TileLayerWrapper.enableOnly = function (self, map) {
for (var _i = 0, _a = TileLayerWrapper.layers; _i < _a.length; _i++) {
var l = _a[_i];
}
static enableOnly(self, map) {
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;
}
}
};
TileLayerWrapper.layers = new Array();
return TileLayerWrapper;
}());
var CreateOverlayModal = /** @class */ (function () {
function CreateOverlayModal() {
var _this = this;
var closeBtn = document.getElementById("createOverlay-closeBtn");
}
}
TileLayerWrapper.layers = new Array();
class CreateOverlayModal {
constructor() {
const _this = this;
const 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) {
var modal = this.self();
}
setVisible(v) {
const modal = this.self();
if (modal) {
modal.style.display = v ? "block" : "none";
}
};
CreateOverlayModal.prototype.setState = function (state, args) {
var _this = this;
var title = this.title();
var radiusContainer = _this.radiusContainer();
var radius = _this.radiusField();
var name = _this.nameField();
var desc = _this.descField();
var submitBtn = _this.submitBtn();
}
setState(state, args) {
const _this = this;
const title = this.title();
const radiusContainer = _this.radiusContainer();
const radius = _this.radiusField();
const name = _this.nameField();
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 = function () {
var point = new Marker(name, desc, args.latlng, { title: name, alt: name });
submitBtn.onclick = () => {
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 () {
var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 });
submitBtn.onclick = () => {
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;
}());
var MapHandler = /** @class */ (function () {
function MapHandler(map, overlays, layers) {
}
}
class ModalCollection {
constructor(createOverlay) {
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) {
MapHandler.instance = new MapHandler(map, overlays, layers, modals);
}
}
static setButtonClick(btnId, handler) {
const button = document.getElementById(btnId);
if (button) {
button.onclick = handler;
}
}
static resetMapClick() {
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 (_a) { }
try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
self.map.off("click", this.addCircle);
}
catch (_b) { }
}
}
static addMarker(e) {
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) {
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) {
const self = MapHandler.instance;
if (self) {
self.modals.closeAll();
MapHandler.resetMapClick();
e.target.classList.add("activeBtn");
self.map.on("click", MapHandler.addCircle);
}
}
static markerCollect(e) {
const self = MapHandler.instance;
if (self) {
self.modals.closeAll();
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", self.map);
}
}
}
}
MapHandler.instance = null;
function init() {
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);
var streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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"
}));
var satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
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(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");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler);
}
catch (_a) { }
try {
var addCircleBtn_1 = document.getElementById("addCircle-btn");
if (addCircleBtn_1) {
addCircleBtn_1.classList.remove("activeBtn");
}
map.off("click", addCircleHandler);
}
catch (_b) { }
};
var addMarkerHandler = function (e) {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng,
map: map,
overlays: overlays
});
resetMapClick();
};
var addCircleHandler = function (e) {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng,
map: map,
overlays: overlays
});
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");
if (saveBtn) {
saveBtn.onclick = function (e) {
OverlayState.save(overlays);
};
}
var clearBtn = document.getElementById("clear-btn");
if (clearBtn) {
clearBtn.onclick = function (e) {
overlays = OverlayState.clear(overlays, map);
};
}
var tilesBtn = document.getElementById("tiles-btn");
if (tilesBtn) {
tilesBtn.onclick = function (e) {
if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
TileLayerWrapper.enableOnly(streetLayer, map);
}
else {
TileLayerWrapper.enableOnly(satelliteLayer, map);
}
};
}
var main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
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();