diff --git a/ipmd/static/ipmd/js/ipmdlib.js b/ipmd/static/ipmd/js/ipmdlib.js index 2d58da10a8f31eb42ae7ac2a3700b0249a320357..a27adba0d5d8412d21548739972c3dd8012f0d81 100644 --- a/ipmd/static/ipmd/js/ipmdlib.js +++ b/ipmd/static/ipmd/js/ipmdlib.js @@ -609,6 +609,7 @@ async function initDataSourceMap(containerId, geoJson, countryCodeList, featureC extent = featureOverlay.getSource().getExtent(); map.getView().fit(extent, map.getSize()); } + /* * A little bit of this and that to make feature selection work the way we want @@ -679,6 +680,10 @@ const styleUnselected = new ol.style.Style({ }) }); +/* + * Singleton pattern works. Used in function below + */ + /** @@ -699,6 +704,31 @@ function handleMapClicked(map, layer, pixel, coordinate, featureClickedCallback) // Area if(features[0].getId() === undefined) { + // We must place a marker where the user clicked + let marker = map.getOverlayById("marker"); + // If first time click, create a new marker + if(marker == undefined) + { + map.addOverlay(new ol.Overlay({ + id: "marker", + element: function() { + let markerElement = document.createElement("div"); + markerElement.setAttribute( + "style", + "width: 20px; height: 20px; border: 1px solid #088; border-radius: 10px; background-color: #0FF; opacity: 0.5;" + ); + return markerElement + }(), + position: coordinate, + positioning: "center-center" + }) + ); + } + // Otherwise, just move the current marker + else + { + marker.setPosition(coordinate); + } featureClickedCallback(null, getDecimalDegrees(map, coordinate)); } // Click on a station is handled in the select interaction (see initDataSourceMap) @@ -713,6 +743,11 @@ function handleMapClicked(map, layer, pixel, coordinate, featureClickedCallback) } }; +function createMarkerOverlay(coordinate) +{ + +} + /** * * @param {ol.Map} map diff --git a/ipmd/templates/ipmd/saddlegallmidgeform.html b/ipmd/templates/ipmd/saddlegallmidgeform.html index bb256703ff09ef2857048584351075343b218c38..97a3a7e2b340aa6fdacece5af2c5c0018c8b3e11 100644 --- a/ipmd/templates/ipmd/saddlegallmidgeform.html +++ b/ipmd/templates/ipmd/saddlegallmidgeform.html @@ -70,10 +70,9 @@ </div> <button class="btn btn-primary" type="button" onclick="submitData();">Submit</button> <div style="aspect-ratio: 2;"> - <canvas id="resultChart""></canvas> - </div> - <div id="weatherData" class="table-responsive"> + <canvas id="resultChart"></canvas> </div> + <div id="weatherData" class="table-responsive"></div> <pre id="modelDescription"></pre> </div> {% endblock %} @@ -435,7 +434,7 @@ if(currentForecastWeatherDatasource != undefined) { // Need to check that the selected datasource covers the requested location - if(! await isPointCoveredByDatasource(coordinate, currentForecastWeatherDatasource)) + if(! await isPointCoveredByDatasource(getLatLon(), currentForecastWeatherDatasource)) { alert("ERROR: The selected forecast datasource does not cover your selected location. Please select an appropriate location or datasource."); return;