diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index cf4a4a73..b75c0632 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -12,7 +12,7 @@ class MapMultipoint extends HTMLElement {
this.render();
this._map = null;
- this._markers = null;
+ this._markers = [];
}
// Lifecycle: when element is added to the DOM
@@ -80,9 +80,10 @@ class MapMultipoint extends HTMLElement {
render() {
this.shadowRoot.innerHTML = `
@@ -112,6 +113,18 @@ class MapMultipoint extends HTMLElement {
SetLayoutProperty(layout, property, value) {
return this._map.setLayoutProperty(layout, property, value);
}
+ SetMarkers(markers) {
+ console.log("Setting map markers", markers);
+ this._markers.forEach((marker) => marker.remove());
+ this._markers = markers.map((m) => {
+ return new maplibregl.Marker({
+ color: "#FF0000",
+ draggable: false,
+ })
+ .setLngLat([m.longitude, m.latitude])
+ .addTo(this._map);
+ });
+ }
}
customElements.define("map-multipoint", MapMultipoint);
diff --git a/html/template/sync/intelligence-root.html b/html/template/sync/intelligence-root.html
index 5c8565f2..591d4154 100644
--- a/html/template/sync/intelligence-root.html
+++ b/html/template/sync/intelligence-root.html
@@ -16,6 +16,11 @@
function shortAddress(a) {
return a.number + " " + a.street + ", " + a.locality + ", " + a.region;
}
+ function updateMap(signals) {
+ const map = document.querySelector("map-multipoint");
+ const markers = signals.map((s) => s.location);
+ map.SetMarkers(markers);
+ }
function workbench() {
return {
// API Configuration
@@ -123,18 +128,6 @@
return this.selectedSignals.some((s) => s.id === id);
},
- toggleSignal(signal) {
- const index = this.selectedSignals.findIndex(
- (s) => s.id === signal.id,
- );
-
- if (index > -1) {
- this.selectedSignals.splice(index, 1);
- } else {
- this.selectedSignals.push(signal);
- }
- },
-
clearSelection() {
this.selectedSignals = [];
},
@@ -220,6 +213,18 @@
alert(`Failed to mark signals: ${err.message}`);
}
},
+ toggleSignal(signal) {
+ const index = this.selectedSignals.findIndex(
+ (s) => s.id === signal.id,
+ );
+
+ if (index > -1) {
+ this.selectedSignals.splice(index, 1);
+ } else {
+ this.selectedSignals.push(signal);
+ }
+ updateMap(this.selectedSignals);
+ },
};
}