diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js
index d976190f..3f8764e8 100644
--- a/html/static/js/map-multipoint.js
+++ b/html/static/js/map-multipoint.js
@@ -83,7 +83,7 @@ class MapMultipoint extends HTMLElement {
});
});
for (const on of this._preOns) {
- this._map.on(on.a, on.b);
+ this._map.on(...on);
}
}
@@ -111,14 +111,20 @@ class MapMultipoint extends HTMLElement {
flyTo(a, b) {
return this._map.flyTo(a, b);
}
+ getCanvas(...args) {
+ return this._map.getCanvas(...args);
+ }
+ getContainer(...args) {
+ return this._map.getContainer(...args);
+ }
jumpTo(args) {
return this._map.jumpTo(args);
}
- on(a, b) {
+ on(...args) {
if (this._map != null) {
- return this._map.on(a, b);
+ return this._map.on(...args);
} else {
- this._preOns.push({ a: a, b: b });
+ this._preOns.push(args);
}
}
once(a, b) {
diff --git a/html/template/rmo/status.html b/html/template/rmo/status.html
index dec1bfa3..71f6f791 100644
--- a/html/template/rmo/status.html
+++ b/html/template/rmo/status.html
@@ -88,15 +88,15 @@ function onLoad() {
});
map.addLayer({
'id': 'rmo_water',
- 'source': 'tegola',
- 'source-layer': 'water_location',
- 'type': 'circle',
'paint': {
'circle-color': "#0D6EfD",
'circle-radius': 7,
'circle-stroke-width': 2,
- 'circle-stroke-color': "#024AB6"
+ 'circle-stroke-color': "#024AB6",
}
+ 'source': 'tegola',
+ 'source-layer': 'water_location',
+ 'type': 'circle',
});
map.on("idle", () => {
function _addCheckboxClick(checkbox, layer_id) {
diff --git a/html/template/sync/review/pool.html b/html/template/sync/review/pool.html
index 03791472..738e69fc 100644
--- a/html/template/sync/review/pool.html
+++ b/html/template/sync/review/pool.html
@@ -84,6 +84,58 @@
"source-layer": "parcel",
type: "line",
});
+ map.addLayer({
+ id: "pools",
+ paint: {
+ "circle-color": "#0D6EfD",
+ "circle-radius": 7,
+ "circle-stroke-width": 2,
+ "circle-stroke-color": "#024AB6",
+ },
+ source: "tegola",
+ "source-layer": "feature-pool",
+ type: "circle",
+ });
+ // Create a popup, but don't add it to the map yet.
+ const popup = new maplibregl.Popup({
+ closeButton: false,
+ closeOnClick: false,
+ });
+ // Make sure to detect marker change for overlapping markers
+ // and use mousemove instead of mouseenter event
+ let current_feature_coordinates = undefined;
+ map.on("mousemove", "pools", (e) => {
+ const feature_coordinates =
+ e.features[0].geometry.coordinates.toString();
+ if (current_feature_coordinates !== feature_coordinates) {
+ current_feature_coordinates = feature_coordinates;
+
+ // change the cursor style as a UI indicator
+ map.getCanvas().style.cursor = "pointer";
+
+ const coordinates =
+ e.features[0].geometry.coordinates.slice();
+ const condition = e.features[0].properties.condition;
+
+ // Ensure that if the map is zoomed way out so we have multiple
+ // copies from the globe wrapping that the popup appears over
+ // they copy we are actually hovering over
+ while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+ coordinates[0] +=
+ e.lngLat.lng > coordinates[0] ? 360 : -360;
+ }
+ // Populate the popup, set its coordinates
+ popup
+ .setLngLat(coordinates)
+ .setHTML(condition)
+ .addTo(map._map);
+ }
+ });
+ map.on("mouseleave", "pools", () => {
+ current_feature_coordinates = undefined;
+ map.getCanvas().style.cursor = "";
+ popup.remove();
+ });
});
});
await this.fetchTasks();