Historic datasource map works as expected

ipmd/static/ipmd/js/ipmdlib.js

@@ -183,8 +183,8 @@ function getPragmaticWeatherParameterList(requestedParameters, availableParamete
     {
         completeList = completeList.concat(requestedParameters[i], fallbackParams[requestedParameters[i]]);
     }
-    console.info(completeList);
-    console.info(availableParameters);
+    //console.info(completeList);
+    //console.info(availableParameters);
 
     return completeList.filter(param => availableParameters.includes(param));
 
@@ -422,6 +422,10 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList, featureC
             layers: [backgroundLayer],
             renderer: 'canvas'
     });
+
+
+ 
+
     maps[containerId] = map;
     // Setting zoom and center for the map (need to do this after creating map. so that we can transform our
 	// center to correct map projection)
@@ -455,14 +459,17 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList, featureC
         });
     }
 
+    let featureOverlay = undefined;
+
     if(drawnFeatures != undefined)
     {
         //console.info(drawnFeatures);
         // Create an empty layer
-        var featureOverlay = new ol.layer.Vector({
+        featureOverlay = new ol.layer.Vector({
             source: new ol.source.Vector({
             features: features
-            })
+            }),
+            style: styleUnselected
         });
         // Add the stations or area
         featureOverlay.getSource().addFeatures(drawnFeatures);
@@ -473,69 +480,102 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList, featureC
         map.getView().fit(extent, map.getSize());
     }
 
+    
+
+    /*
+     * A little bit of this and that with regards to feature selection
+     * to make it work as we want
+     * - Highlight a selected station (but only one station, multiple select is not allowed)
+     * - If user clicks on multiple stations, zoom in to make it easy to pick the right one
+     */ 
+
+    let selectInteraction = new ol.interaction.Select({
+        toggleCondition: ol.events.condition.never // Only one can be selected at a time
+    });
+    map.addInteraction(selectInteraction);
+    selectInteraction.on("select", function(e){
+        // If it's an area (id == undefined), don't mark it as selected
+        if(e.target.getFeatures().getLength() > 0 && e.target.getFeatures().item(0).getId() == undefined)
+        {
+            e.target.getFeatures().clear();
+        }
+        else if(e.target.getFeatures().getLength() == 1)
+        {
+            let feature = e.target.getFeatures().item(0);
+            featureClickedCallback(feature.getId(), undefined);
+        }
+    });
+   
     map.on('singleclick', function(evt) {
     	var pixel = map.getEventPixel(evt.originalEvent);
 		var coordinate = map.getEventCoordinate(evt.originalEvent);
-		displayFeatureDetails(map, pixel, coordinate, featureClickedCallback);
+		handleMapClicked(map, featureOverlay, pixel, coordinate, featureClickedCallback);
     });
 }
 
+const styleUnselected = new ol.style.Style({
+    fill: new ol.style.Fill({
+        color: 'rgba(173, 173, 173, 0.5)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: '#000000',
+        width: 1
+      }),
+      image: new ol.style.Circle({
+        radius: 6,
+        fill: new ol.style.Fill({
+          color: '#adadad'
+        }),
+        stroke: new ol.style.Stroke({
+            color: '#000000',
+            width: 1
+          })
+      })
+});
+
+
 
 /**
  * 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.layer} layer
  * @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) {
+function handleMapClicked(map, layer, pixel, coordinate, featureClickedCallback) {
 	var features = [];
-    map.forEachFeatureAtPixel(pixel, function(feature,layer){
+    map.forEachFeatureAtPixel(pixel, function(feature){
        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
+        // Area
+        if(features[0].getId() === undefined)
         {
             featureClickedCallback(null, getDecimalDegrees(map, coordinate));
-            console.info("Area clicked");
         }	
+        // Click on a station is handled in the select interaction (see initDataSourceMap)
     }
-    // Display popup,so that user can select their station
+    // The select interaction (see initDataSourceMap) highlights one and only one
+    // selected feature. If the clicked pixel has more than one feature, 
+    // zoom in to let the user be able to separate the features
     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());
-            }
-        }
+        map.getView().setCenter(coordinate);
+        map.getView().setZoom(map.getView().getZoom() + 2);
     } 
-    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
+ * @return {ol.Coordinate} 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);
+    return ol.proj.transform(coordinate, map.getView().getProjection().getCode(), 'EPSG:4326');
 }
 
 async function getCountryBoundaries(countryCodeList)

ipmd/templates/ipmd/saddlegallmidgeform.html

@@ -67,9 +67,7 @@
                 </div>
             </fieldset>
         </div>
-        <div class="col-md-4">
-            <div id="forecastDatasourceMap"></div>
-        </div>
+        <div class="col-md-4"></div>
     </div>
     <button class="btn btn-primary" type="button" onclick="submitData();">Submit</button>
     <div style="aspect-ratio: 2;">
@@ -208,16 +206,19 @@
     function handleHistoricDatasourceMapClicked(id, coordinate)
     {
 
-        console.info("Map clicked, station=" + id +", coordinate=" + coordinate + ". TODO: select station and/or populate lat/lon fields");
+        //console.info("Map clicked, station=" + id +", coordinate=" + coordinate + ". TODO: select station and/or populate lat/lon fields");
         // id != null => station. Pull station coordinates from source list to avoid inacurracies in user's map click coordinate
         if(id !== null)
         {
             // Set the selected station
             setSelection(selectList, id);
             handleWeatherStationSelected(selectList);
-            // Call handleWeatherStationSelected()
         }
         // id == null => area. Use the provided coordinate
+        else
+        {
+            setLatLon(coordinate);
+        }
     }
 
     function setSelection(selectList, optionValue)
@@ -258,8 +259,13 @@
         let weatherStationId = selectList.options[selectList.selectedIndex].value;
         let stationCoordinate = getWeatherStationCoordinate(currentWeatherDatasource, weatherStationId);
         //console.info(stationCoordinate);
-        document.getElementById("longitude").value = stationCoordinate[0];
-        document.getElementById("latitude").value = stationCoordinate[1];
+        setLatLon(stationCoordinate);
+    }
+
+    function setLatLon(coordinate)
+    {
+        document.getElementById("longitude").value = coordinate[0];
+        document.getElementById("latitude").value = coordinate[1];
     }
 
     async function submitData(){
@@ -364,7 +370,7 @@
 
             
             inputData["weatherData"] = weatherData;
-            console.info(weatherData);
+            //console.info(weatherData);
         }
         // Ready to call server?
         //console.info(JSON.stringify(inputData));