Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Require passing actual markers into SetMarkers

Browse source 
And frame locations of images and the report when a report is selected
This commit is contained in:
Eli Ribble 2026-03-10 04:20:55 +00:00
parent 741b60485c
commit cd763efb15
No known key found for this signature in database
3 changed files with 37 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

12
html/static/js/map-multipoint.js
View file

@ -126,14 +126,10 @@ class MapMultipoint extends HTMLElement {
SetMarkers(markers) { SetMarkers(markers) {
console.log("Setting map markers", markers); console.log("Setting map markers", markers);
this._markers.forEach((marker) => marker.remove()); this._markers.forEach((marker) => marker.remove());
this._markers = markers.map((m) => { this._markers = markers;
return new maplibregl.Marker({ for (let m of markers) {
color: "#FF0000", m.addTo(this._map);
draggable: false, }
})
.setLngLat([m.longitude, m.latitude])
.addTo(this._map);
});
} }
} }

36
html/template/sync/communication-root.html
View file

@ -267,16 +267,34 @@
}, },
updateMap() { updateMap() {
const map = document.querySelector("map-multipoint"); const map = document.querySelector("map-multipoint");
const p = { const loc = this.selectedCommunication.public_report.location;
latitude: let markers = [
this.selectedCommunication.public_report.location.latitude, new maplibregl.Marker({
longitude: color: "#FF0000",
this.selectedCommunication.public_report.location.longitude, draggable: false,
}; }).setLngLat([loc.longitude, loc.latitude]),
map.SetMarkers([p]); ];
let min = { lat: loc.latitude, lng: loc.longitude };
let max = { lat: loc.latitude, lng: loc.longitude };
for (const i of this.selectedCommunication.public_report.images) {
if (i.location.latitude != 0 && i.location.longitude != 0) {
markers.push(
new maplibregl.Marker({
color: "#00FF00",
draggable: false,
}).setLngLat([i.location.longitude, i.location.latitude]),
);
min.lat = Math.min(min.lat, i.location.latitude);
min.lng = Math.min(min.lng, i.location.longitude);
max.lat = Math.max(max.lat, i.location.latitude);
max.lng = Math.max(max.lng, i.location.longitude);
}
}
map.SetMarkers(markers);
const bounds = new maplibregl.LngLatBounds( const bounds = new maplibregl.LngLatBounds(
new maplibregl.LngLat(p.longitude - 0.01, p.latitude - 0.01), new maplibregl.LngLat(min.lng - 0.01, min.lat - 0.01),
new maplibregl.LngLat(p.longitude + 0.01, p.latitude + 0.01), new maplibregl.LngLat(max.lng + 0.01, max.lat + 0.01),
); );
map.FitBounds(bounds, { map.FitBounds(bounds, {

7
html/template/sync/planning-root.html
View file

@ -48,7 +48,12 @@
} }
function updateMap(signals) { function updateMap(signals) {
const map = document.querySelector("map-multipoint"); const map = document.querySelector("map-multipoint");
const markers = signals.map((s) => s.location); const markers = signals.map((s) =>
new maplibregl.Marker({
color: "#FF0000",
draggable: false,
}).setLatLng([s.location.longitude, s.location.latitude]),
);
map.SetMarkers(markers); map.SetMarkers(markers);
bounds = getBoundingBox(markers); bounds = getBoundingBox(markers);
map.FitBounds(bounds, { map.FitBounds(bounds, {