feat: Add test page (spatial) with mapserver layer in openlayers map

ipmd/static/ipmd/js/ipmdlib.js

@@ -380,8 +380,10 @@ var maps = {};
  * Requires OpenLayers v. 4
  * @param {String} containerId
  * @param {JSON} geoJson 
+ * @param {Array} countryCodeList
+ * @param {Function} featureClickedCallback Callback function taking parameters ({String} id, {Array<Float>} coordinate)
  */
-async function initDataSourceMap(containerId, geoJson, countryCodeList)
+async function initDataSourceMap(containerId, geoJson, countryCodeList, featureClickedCallback)
 {
     
     let map = maps[containerId];
@@ -470,6 +472,70 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList)
         extent = featureOverlay.getSource().getExtent();
         map.getView().fit(extent, map.getSize());
     }
+
+    map.on('singleclick', function(evt) {
+    	var pixel = map.getEventPixel(evt.originalEvent);
+		var coordinate = map.getEventCoordinate(evt.originalEvent);
+		displayFeatureDetails(map, pixel, coordinate, featureClickedCallback);
+    });
+}
+
+
+/**
+ * When a user clicks on the map, handles whatever was clicked (station, point in area, point outside any feature/area)
+ * @param {ol.map} map 
+ * @param {ol.Pixel} pixel 
+ * @param {ol.coordinate} coordinate 
+ * @param {Function} featureClickedCallback Callback function taking parameters ({String} id, {Array<Float>} coordinate)
+ */
+function displayFeatureDetails(map, pixel, coordinate, featureClickedCallback) {
+	var features = [];
+    map.forEachFeatureAtPixel(pixel, function(feature,layer){
+       features.push(feature); 
+    });
+
+    if (features.length == 1) {
+        // A station? Select station using features[i].getId() in callback
+        if(features[0].getId() !== undefined)
+        {
+            console.info("Station clicked: " + features[0].get("name") + ",id=" + features[0].getId());
+            featureClickedCallback(features[0].getId(), getDecimalDegrees(map, coordinate));
+        }
+        // An area? Return the coordinate of clicked point in callback
+        else
+        {
+            featureClickedCallback(null, getDecimalDegrees(map, coordinate));
+            console.info("Area clicked");
+        }	
+    }
+    // Display popup,so that user can select their station
+    else if(features.length > 1)
+    {
+        console.info("Multiple stations clicked. TODO: Let user select from a popup")
+        for(var i in features)
+        {
+            // A station? Select station using features[i].getId() in callback
+            if(features[i].getId() !== undefined)
+            {
+                console.info("Station clicked: " + features[i].get("name") + ",id=" + features[i].getId());
+            }
+        }
+    } 
+    else
+    {
+        // No feature clicked. Do anything?
+    }
+};
+
+/**
+ * 
+ * @param {ol.Map} map 
+ * @param {Array<Float>} coordinate 
+ * @returns the pixel coordinate from a map converted to WGS84 Decimal degrees
+ */
+function getDecimalDegrees(map, coordinate)
+{
+    return ol.coordinate.toStringXY(ol.proj.transform(coordinate, map.getView().getProjection().getCode(), 'EPSG:4326'),5);
 }
 
 async function getCountryBoundaries(countryCodeList)