Add pools with condition popup to review map

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) {

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) {

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();