rename Polygons to Paths - add option to close polyline or not on creation; bump to v0.2.0

This commit is contained in:
Iris Lightshard 2022-08-23 20:52:12 -06:00
parent 4247dd822b
commit 82b55554e7
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
9 changed files with 151 additions and 50 deletions

View file

@ -2,7 +2,7 @@
## about ## about
`onyx/scry` is a lightweight map annotation and location data management and sharing tool built using [leaflet](https://leafletjs.com) and [typescript](https://typescriptlang.org). It is intended as a standalone tool to generate, manage, and share simple location data in the form of points, circles, and polygons. All of these have associated titles and descriptions and can be easily imported from or exported to JSON format for easy sharing. All data is saved locally via the `localStorage` API, and the only network calls are those to retrieve either the streetmap or satellite tile data (and of course geolocation if you opt in). `onyx/scry` is a lightweight map annotation and location data management and sharing tool built using [leaflet](https://leafletjs.com) and [typescript](https://typescriptlang.org). It is intended as a standalone tool to generate, manage, and share simple location data in the form of points, circles, and paths (polylines and polygons). All of these have associated titles and descriptions and can be easily imported from or exported to JSON format for easy sharing. All data is saved locally via the `localStorage` API, and the only network calls are those to retrieve either the streetmap or satellite tile data (and of course geolocation if you opt in).
## usage ## usage
@ -15,7 +15,7 @@ Along the bottom is the control bar, containing the following buttons:
- `Home`: If the `home` point has been set, center the map view on it. - `Home`: If the `home` point has been set, center the map view on it.
- `Marker`: Enter marker creation mode. - `Marker`: Enter marker creation mode.
- `Circle`: Enter circle creation mode. - `Circle`: Enter circle creation mode.
- `Polygon`: Enter polygon creation mode. - `Path`: Enter path creation mode.
- `Tileset`: Swap the map tiles between the streetmap and satellite imagery. - `Tileset`: Swap the map tiles between the streetmap and satellite imagery.
- `Save`: Saves your current overlays to local storage. - `Save`: Saves your current overlays to local storage.
- `Clear`: Clears all overlays from the map. - `Clear`: Clears all overlays from the map.
@ -30,9 +30,9 @@ Clicking the `Marker`, `Circle`, or `Polygon` buttons, you enter overlay creatio
For Markers and Circles, you just click anywhere on the map to bring up the Overlay Creation window. For Markers and Circles, you just click anywhere on the map to bring up the Overlay Creation window.
For Polygons, you click points on the map to add them to the polygon — you will see the outline once you have added at least two points. Once you have added at least three points, an OK button appears on the window at bottom, and clicking it opens the Overlay Creation window. For Paths, you click points on the map to add them to the polyline — you will see it once you have added at least two points. Once you have added at least three points, an OK button appears on the window at bottom, and clicking it opens the Overlay Creation window.
In the Overlay Creation window, you can set a name and optionally a description for the overlay. For circles, you also set the radius in meters, which defaults to 500. Pressing the `OK` button saves the overlay to the map. In the Overlay Creation window, you can set a name and optionally a description for the overlay. For circles, you also set the radius in meters, which defaults to 500. For paths, there is a checkbox for whether to close the polyline (creating a polygon), or leave it as-is. Pressing the `OK` button saves the overlay to the map.
### Overlay Management ### Overlay Management

View file

@ -168,7 +168,11 @@ class Polygon extends OverlayBase {
constructor(name: string, desc: string, points: Point[], options: any) { constructor(name: string, desc: string, points: Point[], options: any) {
super(name, desc, points, options); super(name, desc, points, options);
if (options.closed) {
this.self = L.polygon(points, options); this.self = L.polygon(points, options);
} else {
this.self = L.polyline(points, options);
}
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`); this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
} }
@ -225,13 +229,13 @@ class Polyline extends OverlayBase {
class OverlayState { class OverlayState {
markers: Marker[]; markers: Marker[];
circles: Circle[]; circles: Circle[];
polygons: Polygon[]; paths: Polygon[];
polyline: Polyline; polyline: Polyline;
constructor() { constructor() {
this.markers = []; this.markers = [];
this.circles = []; this.circles = [];
this.polygons = []; this.paths = [];
this.polyline = new Polyline(); this.polyline = new Polyline();
} }
@ -245,7 +249,7 @@ class OverlayState {
return { return {
markers: model.markers.map((m: OverlayData) => OverlayState.fromData(m)), markers: model.markers.map((m: OverlayData) => OverlayState.fromData(m)),
circles: model.circles.map((c: OverlayData) => OverlayState.fromData(c)), circles: model.circles.map((c: OverlayData) => OverlayState.fromData(c)),
polygons: model.polygons.map((p: OverlayData) => OverlayState.fromData(p)), paths: model.paths.map((p: OverlayData) => OverlayState.fromData(p)),
polyline: new Polyline(), polyline: new Polyline(),
} as OverlayState } as OverlayState
} }
@ -258,7 +262,7 @@ class OverlayState {
return JSON.stringify({ return JSON.stringify({
markers: overlayState.markers.map((m: OverlayBase) => OverlayState.toData(m)), markers: overlayState.markers.map((m: OverlayBase) => OverlayState.toData(m)),
circles: overlayState.circles.map((c: OverlayBase) => OverlayState.toData(c)), circles: overlayState.circles.map((c: OverlayBase) => OverlayState.toData(c)),
polygons: overlayState.polygons.map((p: OverlayBase) => OverlayState.toData(p)), paths: overlayState.paths.map((p: OverlayBase) => OverlayState.toData(p)),
}, null, 2); }, null, 2);
} }
@ -269,7 +273,7 @@ class OverlayState {
static clear(overlayState: OverlayState, map: L.Map): OverlayState { static clear(overlayState: OverlayState, map: L.Map): OverlayState {
overlayState.markers.forEach((m: Marker) => m.remove(map)); overlayState.markers.forEach((m: Marker) => m.remove(map));
overlayState.circles.forEach((c: Circle) => c.remove(map)); overlayState.circles.forEach((c: Circle) => c.remove(map));
overlayState.polygons.forEach((p: Polygon) => p.remove(map)); overlayState.paths.forEach((p: Polygon) => p.remove(map));
const self = new OverlayState(); const self = new OverlayState();
self.polyline.add(map); self.polyline.add(map);
@ -279,7 +283,11 @@ class OverlayState {
private static toData(source: OverlayBase): OverlayData { private static toData(source: OverlayBase): OverlayData {
let type = OverlayType.POINT; let type = OverlayType.POINT;
if (source.points.length > 1) { if (source.points.length > 1) {
if (source.options.closed) {
type = OverlayType.POLYGON; type = OverlayType.POLYGON;
} else {
type = OverlayType.POLYLINE;
}
} else if (source.options.radius) { } else if (source.options.radius) {
type = OverlayType.CIRCLE; type = OverlayType.CIRCLE;
} }
@ -294,6 +302,7 @@ class OverlayState {
case OverlayType.CIRCLE: case OverlayType.CIRCLE:
return new Circle(data.name, data.desc, data.points[0], data.options); return new Circle(data.name, data.desc, data.points[0], data.options);
case OverlayType.POLYGON: case OverlayType.POLYGON:
case OverlayType.POLYLINE:
return new Polygon(data.name, data.desc, data.points, data.options); return new Polygon(data.name, data.desc, data.points, data.options);
} }
} }
@ -310,7 +319,8 @@ class OverlayState {
overlayState.circles.push(overlay); overlayState.circles.push(overlay);
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
overlayState.polygons.push(overlay); case OverlayType.POLYLINE:
overlayState.paths.push(overlay);
break; break;
} }
overlay.add(map); overlay.add(map);
@ -326,8 +336,8 @@ class OverlayState {
overlayState.circles.push(c); overlayState.circles.push(c);
c.add(map); c.add(map);
}); });
self.polygons.forEach((p: Polygon) => { self.paths.forEach((p: Polygon) => {
overlayState.polygons.push(p); overlayState.paths.push(p);
p.add(map); p.add(map);
}); });
return true; return true;

View file

@ -34,6 +34,21 @@ class CreateOverlayModal implements Modal {
return document.getElementById("radius-container"); return document.getElementById("radius-container");
} }
closePolyContainer(): HTMLElement | null {
return document.getElementById("close-poly-container");
}
closePolyCheckbox(): HTMLInputElement | null {
return document.getElementById("close-poly-checkbox") as HTMLInputElement;
}
setClosePoly(v: boolean): void {
const checkbox = this.closePolyCheckbox();
if (checkbox) {
checkbox.checked = v;
}
}
setName(name: string): void { setName(name: string): void {
const self = document.getElementById("createOverlay-name") as HTMLInputElement; const self = document.getElementById("createOverlay-name") as HTMLInputElement;
if (self) { if (self) {
@ -111,19 +126,26 @@ class CreateOverlayModal implements Modal {
if (Number(radius?.value) != 500) { if (Number(radius?.value) != 500) {
radius.value = "500"; radius.value = "500";
} }
this.setClosePoly(false);
} }
setState(state: OverlayType, args: any): void { setState(state: OverlayType, args: any): void {
const _this = this; const _this = this;
const title = this.title() const title = this.title()
const radiusContainer = _this.radiusContainer(); const radiusContainer = _this.radiusContainer();
const closePolyContainer = _this.closePolyContainer();
const closePoly = _this.closePolyCheckbox();
const submitBtn = _this.submitBtn(); const submitBtn = _this.submitBtn();
const editing = args.self ? true : false;
_this.clearInputs(); _this.clearInputs();
if (radiusContainer) { if (radiusContainer) {
radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none"; radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
} }
const editing = args.self ? true : false; if (closePolyContainer) {
closePolyContainer.style.display = (state == OverlayType.POLYGON && !editing) ? "block" : "none";
}
this.setExtraButtonsVisible(editing); this.setExtraButtonsVisible(editing);
if (editing) { if (editing) {
const gotoBtn = this.gotoBtn(); const gotoBtn = this.gotoBtn();
@ -139,7 +161,7 @@ class CreateOverlayModal implements Modal {
title.innerHTML = "Edit Circle "; title.innerHTML = "Edit Circle ";
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
title.innerHTML = "Edit Polygon "; title.innerHTML = "Edit Path ";
break; break;
} }
} }
@ -226,7 +248,7 @@ class CreateOverlayModal implements Modal {
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
if (title) { if (title) {
title.innerHTML = "Add Polygon "; title.innerHTML = "Add Path ";
} }
if (submitBtn) { if (submitBtn) {
submitBtn.onclick = () => { submitBtn.onclick = () => {
@ -235,9 +257,9 @@ class CreateOverlayModal implements Modal {
if (name.trim().length < 1) { if (name.trim().length < 1) {
return; return;
} }
const polygon = new Polygon(name, desc, args.points, {}); const polygon = new Polygon(name, desc, args.points, { closed: closePoly?.checked ?? false, weight: 5 });
polygon.add(args.map); polygon.add(args.map);
args.overlays.polygons.push(polygon); args.overlays.paths.push(polygon);
_this.setVisible(false); _this.setVisible(false);
} }
} }

View file

@ -187,7 +187,7 @@ class MapHandler {
if (cancelBtn) { if (cancelBtn) {
cancelBtn.onclick = MapHandler.polygonClearPoints; cancelBtn.onclick = MapHandler.polygonClearPoints;
} }
self.modals.cancel.setMsg("Creating polygon"); self.modals.cancel.setMsg("Creating path");
self.modals.cancel.setVisible(true); self.modals.cancel.setVisible(true);
self.map.on("click", MapHandler.polygonAddPoint); self.map.on("click", MapHandler.polygonAddPoint);
@ -218,7 +218,7 @@ class MapHandler {
if (cancelBtn) { if (cancelBtn) {
cancelBtn.onclick = MapHandler.polygonClearPoints; cancelBtn.onclick = MapHandler.polygonClearPoints;
} }
self.modals.okCancel.setMsg("Creating polygon"); self.modals.okCancel.setMsg("Creating path");
self.modals.okCancel.setVisible(true); self.modals.okCancel.setVisible(true);
} }
} }
@ -268,7 +268,7 @@ class MapHandler {
self.overlays = OverlayState.load(); self.overlays = OverlayState.load();
self.overlays.markers.forEach(m=>m.add(self.map)); self.overlays.markers.forEach(m=>m.add(self.map));
self.overlays.circles.forEach(m=>m.add(self.map)); self.overlays.circles.forEach(m=>m.add(self.map));
self.overlays.polygons.forEach(m=>m.add(self.map)); self.overlays.paths.forEach(m=>m.add(self.map));
self.overlays.polyline.add(self.map); self.overlays.polyline.add(self.map);
self.modals.okCancel.setVisible(false); self.modals.okCancel.setVisible(false);
MapHandler.resetMapClick(); MapHandler.resetMapClick();

View file

@ -1,8 +1,13 @@
const helpLink = "<br>ONYX/scry v0.1.0 [ <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about/LICENSE'>license</a> | <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about'>manual</a> ]"; const helpLink = "<br>ONYX/scry v0.2.0 [ <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about/LICENSE'>license</a> | <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about'>manual</a> ]";
function init(): void { function init(): void {
let overlays: OverlayState = OverlayState.load() ?? new OverlayState(); let overlays: OverlayState = new OverlayState();
try {
overlays = OverlayState.load();
} catch {
alert("Error reading saved data; initializing with empty data.");
}
const map = L.map('map').fitWorld(); const map = L.map('map').fitWorld();
const streetLayer = TileLayerWrapper.constructLayer( const streetLayer = TileLayerWrapper.constructLayer(
@ -27,7 +32,7 @@ function init(): void {
overlays.markers.forEach(m=>m.add(map)); overlays.markers.forEach(m=>m.add(map));
overlays.circles.forEach(m=>m.add(map)); overlays.circles.forEach(m=>m.add(map));
overlays.polygons.forEach(m=>m.add(map)); overlays.paths.forEach(m=>m.add(map));
overlays.polyline.add(map); overlays.polyline.add(map);
const modals = new ModalCollection( const modals = new ModalCollection(

View file

@ -38,5 +38,5 @@ tsc --strict --target ES2015 --outFile ../static/${progname}.js ${progname}.ts |
# delete the temporary files # delete the temporary files
rm ${errorOut} rm ${errorOut}
rm ${progname}.ts rm ${progname}.ts
rm ${srcmap} rm ${srcmap}

View file

@ -5,7 +5,7 @@
<meta name='description' content='map annotation tool'/> <meta name='description' content='map annotation tool'/>
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel='stylesheet' type="text/css" href="./leaflet.css"> <link rel='stylesheet' type="text/css" href="./leaflet.css">
<link rel='stylesheet' type='text/css' href='./style.css'> <link rel='stylesheet' type='text/css' href='./style.css?v=0.2.0'>
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<link rel='shortcut icon' href='/favicon.png'> <link rel='shortcut icon' href='/favicon.png'>
@ -49,6 +49,10 @@
<label for="createOverlay-radius">Radius (meters)</label><br/> <label for="createOverlay-radius">Radius (meters)</label><br/>
<input type="number" step="1" id="createOverlay-radius" value="500" required><br/> <input type="number" step="1" id="createOverlay-radius" value="500" required><br/>
</div> </div>
<div id="close-poly-container">
<input type="checkbox" id="close-poly-checkbox">
<label for="close-poly-checkbox">Close polyline</label><br/>
</div>
<div class="multiBtn-container" id="edit-extra-btns"> <div class="multiBtn-container" id="edit-extra-btns">
<button id="goto-btn">Go Here</button> <button id="goto-btn">Go Here</button>
<button id="export-btn">Export</button> <button id="export-btn">Export</button>
@ -97,7 +101,7 @@
<div id="overlays-list"> <div id="overlays-list">
<details id="markers-wrapper" open><summary>Markers</summary><ul id="markers-list"></ul></details> <details id="markers-wrapper" open><summary>Markers</summary><ul id="markers-list"></ul></details>
<details id="circles-wrapper" open><summary>Circles</summary><ul id="circles-list"></ul></details> <details id="circles-wrapper" open><summary>Circles</summary><ul id="circles-list"></ul></details>
<details id="polygons-wrapper" open><summary>Polygons</summary><ul id="polygons-list"></ul></details> <details id="polygons-wrapper" open><summary>Paths</summary><ul id="polygons-list"></ul></details>
</div> </div>
<div class="multiBtn-container"> <div class="multiBtn-container">
<button id="set-home-btn">Set Home</button> <button id="set-home-btn">Set Home</button>

View file

@ -121,7 +121,12 @@ class Polygon extends OverlayBase {
constructor(name, desc, points, options) { constructor(name, desc, points, options) {
super(name, desc, points, options); super(name, desc, points, options);
this.menuItem = null; this.menuItem = null;
if (options.closed) {
this.self = L.polygon(points, options); this.self = L.polygon(points, options);
}
else {
this.self = L.polyline(points, options);
}
this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`); this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
} }
center() { center() {
@ -167,7 +172,7 @@ class OverlayState {
constructor() { constructor() {
this.markers = []; this.markers = [];
this.circles = []; this.circles = [];
this.polygons = []; this.paths = [];
this.polyline = new Polyline(); this.polyline = new Polyline();
} }
static load() { static load() {
@ -179,7 +184,7 @@ class OverlayState {
return { return {
markers: model.markers.map((m) => OverlayState.fromData(m)), markers: model.markers.map((m) => OverlayState.fromData(m)),
circles: model.circles.map((c) => OverlayState.fromData(c)), circles: model.circles.map((c) => OverlayState.fromData(c)),
polygons: model.polygons.map((p) => OverlayState.fromData(p)), paths: model.paths.map((p) => OverlayState.fromData(p)),
polyline: new Polyline(), polyline: new Polyline(),
}; };
} }
@ -190,7 +195,7 @@ class OverlayState {
return JSON.stringify({ return JSON.stringify({
markers: overlayState.markers.map((m) => OverlayState.toData(m)), markers: overlayState.markers.map((m) => OverlayState.toData(m)),
circles: overlayState.circles.map((c) => OverlayState.toData(c)), circles: overlayState.circles.map((c) => OverlayState.toData(c)),
polygons: overlayState.polygons.map((p) => OverlayState.toData(p)), paths: overlayState.paths.map((p) => OverlayState.toData(p)),
}, null, 2); }, null, 2);
} }
static save(overlayState) { static save(overlayState) {
@ -199,7 +204,7 @@ class OverlayState {
static clear(overlayState, map) { static clear(overlayState, map) {
overlayState.markers.forEach((m) => m.remove(map)); overlayState.markers.forEach((m) => m.remove(map));
overlayState.circles.forEach((c) => c.remove(map)); overlayState.circles.forEach((c) => c.remove(map));
overlayState.polygons.forEach((p) => p.remove(map)); overlayState.paths.forEach((p) => p.remove(map));
const self = new OverlayState(); const self = new OverlayState();
self.polyline.add(map); self.polyline.add(map);
return self; return self;
@ -207,8 +212,13 @@ class OverlayState {
static toData(source) { static toData(source) {
let type = OverlayType.POINT; let type = OverlayType.POINT;
if (source.points.length > 1) { if (source.points.length > 1) {
if (source.options.closed) {
type = OverlayType.POLYGON; type = OverlayType.POLYGON;
} }
else {
type = OverlayType.POLYLINE;
}
}
else if (source.options.radius) { else if (source.options.radius) {
type = OverlayType.CIRCLE; type = OverlayType.CIRCLE;
} }
@ -222,6 +232,7 @@ class OverlayState {
case OverlayType.CIRCLE: case OverlayType.CIRCLE:
return new Circle(data.name, data.desc, data.points[0], data.options); return new Circle(data.name, data.desc, data.points[0], data.options);
case OverlayType.POLYGON: case OverlayType.POLYGON:
case OverlayType.POLYLINE:
return new Polygon(data.name, data.desc, data.points, data.options); return new Polygon(data.name, data.desc, data.points, data.options);
} }
} }
@ -237,7 +248,8 @@ class OverlayState {
overlayState.circles.push(overlay); overlayState.circles.push(overlay);
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
overlayState.polygons.push(overlay); case OverlayType.POLYLINE:
overlayState.paths.push(overlay);
break; break;
} }
overlay.add(map); overlay.add(map);
@ -254,8 +266,8 @@ class OverlayState {
overlayState.circles.push(c); overlayState.circles.push(c);
c.add(map); c.add(map);
}); });
self.polygons.forEach((p) => { self.paths.forEach((p) => {
overlayState.polygons.push(p); overlayState.paths.push(p);
p.add(map); p.add(map);
}); });
return true; return true;
@ -340,6 +352,18 @@ class CreateOverlayModal {
radiusContainer() { radiusContainer() {
return document.getElementById("radius-container"); return document.getElementById("radius-container");
} }
closePolyContainer() {
return document.getElementById("close-poly-container");
}
closePolyCheckbox() {
return document.getElementById("close-poly-checkbox");
}
setClosePoly(v) {
const checkbox = this.closePolyCheckbox();
if (checkbox) {
checkbox.checked = v;
}
}
setName(name) { setName(name) {
const self = document.getElementById("createOverlay-name"); const self = document.getElementById("createOverlay-name");
if (self) { if (self) {
@ -408,17 +432,23 @@ class CreateOverlayModal {
if (Number(radius === null || radius === void 0 ? void 0 : radius.value) != 500) { if (Number(radius === null || radius === void 0 ? void 0 : radius.value) != 500) {
radius.value = "500"; radius.value = "500";
} }
this.setClosePoly(false);
} }
setState(state, args) { setState(state, args) {
const _this = this; const _this = this;
const title = this.title(); const title = this.title();
const radiusContainer = _this.radiusContainer(); const radiusContainer = _this.radiusContainer();
const closePolyContainer = _this.closePolyContainer();
const closePoly = _this.closePolyCheckbox();
const submitBtn = _this.submitBtn(); const submitBtn = _this.submitBtn();
const editing = args.self ? true : false;
_this.clearInputs(); _this.clearInputs();
if (radiusContainer) { if (radiusContainer) {
radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none"; radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
} }
const editing = args.self ? true : false; if (closePolyContainer) {
closePolyContainer.style.display = (state == OverlayType.POLYGON && !editing) ? "block" : "none";
}
this.setExtraButtonsVisible(editing); this.setExtraButtonsVisible(editing);
if (editing) { if (editing) {
const gotoBtn = this.gotoBtn(); const gotoBtn = this.gotoBtn();
@ -433,7 +463,7 @@ class CreateOverlayModal {
title.innerHTML = "Edit Circle "; title.innerHTML = "Edit Circle ";
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
title.innerHTML = "Edit Polygon "; title.innerHTML = "Edit Path ";
break; break;
} }
} }
@ -513,18 +543,19 @@ class CreateOverlayModal {
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
if (title) { if (title) {
title.innerHTML = "Add Polygon "; title.innerHTML = "Add Path ";
} }
if (submitBtn) { if (submitBtn) {
submitBtn.onclick = () => { submitBtn.onclick = () => {
var _a;
const name = TextUtils.encodeHTML(_this.nameField()); const name = TextUtils.encodeHTML(_this.nameField());
const desc = TextUtils.encodeHTML(_this.descField()); const desc = TextUtils.encodeHTML(_this.descField());
if (name.trim().length < 1) { if (name.trim().length < 1) {
return; return;
} }
const polygon = new Polygon(name, desc, args.points, {}); const polygon = new Polygon(name, desc, args.points, { closed: (_a = closePoly === null || closePoly === void 0 ? void 0 : closePoly.checked) !== null && _a !== void 0 ? _a : false, weight: 5 });
polygon.add(args.map); polygon.add(args.map);
args.overlays.polygons.push(polygon); args.overlays.paths.push(polygon);
_this.setVisible(false); _this.setVisible(false);
}; };
} }
@ -892,7 +923,7 @@ class MapHandler {
if (cancelBtn) { if (cancelBtn) {
cancelBtn.onclick = MapHandler.polygonClearPoints; cancelBtn.onclick = MapHandler.polygonClearPoints;
} }
self.modals.cancel.setMsg("Creating polygon"); self.modals.cancel.setMsg("Creating path");
self.modals.cancel.setVisible(true); self.modals.cancel.setVisible(true);
self.map.on("click", MapHandler.polygonAddPoint); self.map.on("click", MapHandler.polygonAddPoint);
} }
@ -919,7 +950,7 @@ class MapHandler {
if (cancelBtn) { if (cancelBtn) {
cancelBtn.onclick = MapHandler.polygonClearPoints; cancelBtn.onclick = MapHandler.polygonClearPoints;
} }
self.modals.okCancel.setMsg("Creating polygon"); self.modals.okCancel.setMsg("Creating path");
self.modals.okCancel.setVisible(true); self.modals.okCancel.setVisible(true);
} }
} }
@ -965,7 +996,7 @@ class MapHandler {
self.overlays = OverlayState.load(); self.overlays = OverlayState.load();
self.overlays.markers.forEach(m => m.add(self.map)); self.overlays.markers.forEach(m => m.add(self.map));
self.overlays.circles.forEach(m => m.add(self.map)); self.overlays.circles.forEach(m => m.add(self.map));
self.overlays.polygons.forEach(m => m.add(self.map)); self.overlays.paths.forEach(m => m.add(self.map));
self.overlays.polyline.add(self.map); self.overlays.polyline.add(self.map);
self.modals.okCancel.setVisible(false); self.modals.okCancel.setVisible(false);
MapHandler.resetMapClick(); MapHandler.resetMapClick();
@ -1169,10 +1200,15 @@ class MapHandler {
} }
} }
MapHandler.instance = null; MapHandler.instance = null;
const helpLink = "<br>ONYX/scry v0.1 [ <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about/LICENSE'>license</a> | <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about'>manual</a> ]"; const helpLink = "<br>ONYX/scry v0.2.0 [ <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about/LICENSE'>license</a> | <a target='_blank' href='https://nilfm.cc/git/onyx-scry/about'>manual</a> ]";
function init() { function init() {
var _a; let overlays = new OverlayState();
let overlays = (_a = OverlayState.load()) !== null && _a !== void 0 ? _a : new OverlayState(); try {
overlays = OverlayState.load();
}
catch (_a) {
alert("Error reading saved data; initializing with empty data.");
}
const map = L.map('map').fitWorld(); const map = L.map('map').fitWorld();
const streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { const streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
@ -1185,7 +1221,7 @@ function init() {
TileLayerWrapper.enableOnly("streetLayer", map); TileLayerWrapper.enableOnly("streetLayer", map);
overlays.markers.forEach(m => m.add(map)); overlays.markers.forEach(m => m.add(map));
overlays.circles.forEach(m => m.add(map)); overlays.circles.forEach(m => m.add(map));
overlays.polygons.forEach(m => m.add(map)); overlays.paths.forEach(m => m.add(map));
overlays.polyline.add(map); overlays.polyline.add(map);
const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal(), new OverlayManagementModal(), new ImportExportModal()); const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal(), new OverlayManagementModal(), new ImportExportModal());
MapHandler.init(map, overlays, TileLayerWrapper.layers, modals); MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);

View file

@ -195,6 +195,30 @@ body {
color: crimson; color: crimson;
} }
#close-poly-container {
text-align: left;
display: none;
}
#close-poly-container label {
float: none;
display: inline;
}
#close-poly-checkbox {
width: 1em;
height: 1em;
color: white;
background: transparent;
border: solid 2px dimgray;
box-sizing: border-box;
}
#close-poly-checkbox:checked {
background: white;
border: solid 2px black;
}
#createOverlay-container .multiBtn-container button, #createOverlay-container .multiBtn-container button,
#createOverlay-submitBtn, #createOverlay-submitBtn,
.positive-btn, .positive-btn,