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); + }, }; }