From 0b6155f9928fc2cdfa9c1e8443464c4859aa8514 Mon Sep 17 00:00:00 2001 From: Tor-Einar Skog <tor-einar.skog@nibio.no> Date: Fri, 15 Jan 2021 14:47:41 +0100 Subject: [PATCH] Added report text. Geolocaiton tracking enabled on main page --- .../map_applications/fireblight/index.html | 2 +- .../map_applications/fireblight/js/map.js | 126 +++++++++++++++--- .../map_applications/fireblight/report.html | 40 +++--- 3 files changed, 128 insertions(+), 40 deletions(-) diff --git a/src/main/webapp/map_applications/fireblight/index.html b/src/main/webapp/map_applications/fireblight/index.html index 058c86bc..b8563086 100755 --- a/src/main/webapp/map_applications/fireblight/index.html +++ b/src/main/webapp/map_applications/fireblight/index.html @@ -234,7 +234,7 @@ <div id="map" class="map"> <div class="geo-location ol-unselectable ol-control"> - <button onclick="navToLocation();" title="Finn min posisjon"></button> + <button onclick="toggleTracking(this);" title="Vis min posisjon er AV"></button> </div> <div id="registerButton" class="ol-unselectable ol-control"> <button type="button" onclick="toggleRegistration(this);" title="Registrering er AV"><i class="fa fa-pencil" aria-hidden="true"></i></button> diff --git a/src/main/webapp/map_applications/fireblight/js/map.js b/src/main/webapp/map_applications/fireblight/js/map.js index 33bad624..d017125b 100755 --- a/src/main/webapp/map_applications/fireblight/js/map.js +++ b/src/main/webapp/map_applications/fireblight/js/map.js @@ -6,7 +6,7 @@ var hardcodedLanguage = "nb"; // If false, touching map will not create a new item var registration = false; - +var geolocation; function initMap() { @@ -19,7 +19,7 @@ var styles = { 'cotoneaster bullatus': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [255,0,0,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }), radius: iconRadius }) })], @@ -27,7 +27,7 @@ var styles = { 'cotoneaster divaricata': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [239,133,19,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }), radius: iconRadius }) })], @@ -35,7 +35,7 @@ var styles = { 'cotoneaster salicifolia': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [239,236,19,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }), radius: iconRadius }) })], @@ -43,7 +43,7 @@ var styles = { 'malus domestica': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [0,255,0,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({ width: 1, color: [0,0,0,1] }), radius: iconRadius }) })], @@ -51,18 +51,19 @@ var styles = { 'pyrus communis': [new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [122,175,131,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }), radius: iconRadius }) })], // Planteriket = blå 'plantae': [new ol.style.Style({ - image: new ol.style.Circle({ - fill: new ol.style.Fill({ color: [0,0,255,1] }), - stroke: new ol.style.Stroke({ color: [0,0,0,1] }), - radius: iconRadius - }) - })] + image: new ol.style.Circle({ + fill: new ol.style.Fill({ color: [0,0,255,1] }), + stroke: new ol.style.Stroke({ width: 1, color: [0,0,0,1] }), + radius: iconRadius + }) + }) + ] }; featureOverlay = new ol.layer.Vector({ @@ -70,14 +71,43 @@ var styles = { features: features }), style: function(feature, resolution){ + // Site that has been cleared is all black + var observationData = JSON.parse(feature.get("observationData")); + if(observationData["tiltak"] == "Ryddet") + { + return [new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({ color: [0,0,0,1] }), + radius: iconRadius + }) + })]; + } + + var retVal = null; if(feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != null) { - return styles[feature.get("cropOrganism")["latinName"].toLowerCase()]; + retVal = styles[feature.get("cropOrganism")["latinName"].toLowerCase()]; } else { - return styles["plantae"]; + retVal = styles["plantae"]; } + //console.info(retVal[0].getImage().getStroke().getWidth()); + // If symptom has been registered, mark with inner black dot + if(observationData["symptom"] == "Symptom") + { + retVal = [ + new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ color: [0,0,0,1] }), + stroke: new ol.style.Stroke({ width: 8, color: retVal[0].getImage().getFill().getColor() }), + radius: iconRadius + }) + }) + ]; + } + return retVal; } }); @@ -128,6 +158,41 @@ var styles = { }) }); + // Configure geolocation tracker + geolocation = new ol.Geolocation({ + trackingOptions: { + enableHighAccuracy: true + }, + projection: map.getView().getProjection() + }); + var positionFeature = new ol.Feature(); + positionFeature.setStyle( + new ol.style.Style({ + image: new ol.style.Circle({ + radius: 6, + fill: new ol.style.Fill({ + color: '#3399CC', + }), + stroke: new ol.style.Stroke({ + color: '#fff', + width: 2, + }), + }), + }) + ); + + geolocation.on('change:position', function () { + var coordinates = geolocation.getPosition(); + positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null); + }); + + new ol.layer.Vector({ + map: map, + source: new ol.source.Vector({ + features: [positionFeature], + }), + }); + // TODO feature properties must be synchronized var lastYear = new Date().getFullYear() - 1; // Population the season select list, setting last year as default selected @@ -145,7 +210,7 @@ var styles = { // Remove any new features already created vectorSource.clear(); - if (feature) { + if (feature && feature.getProperties()["observationId"] != undefined) { // Create a fake icon for highlighting var fakeFeature = createFeature(feature.getGeometry().getCoordinates()); vectorSource.addFeature(fakeFeature); @@ -251,6 +316,13 @@ function toggleRegistration(theButton) registration = ! registration; } +function toggleTracking(theButton) +{ + geolocation.setTracking(!geolocation.getTracking()); + theButton.style.backgroundColor = geolocation.getTracking() ? "green" : "rgba(0,60,136,.5)"; + theButton.title = geolocation.getTracking() ? "Vis min posisjon er PÅ" : "Vis min posisjon er AV"; +} + /** * Creates a new feature * @param {type} coordinate @@ -578,6 +650,30 @@ var navigateTo = function(center) searchResultsEl.style.display="none"; }; +/** + * Uses the client's geolocation information - displays it on the map + */ +function showLocation() { + if (navigator.geolocation) { + if(window.location.protocol === "http:") + { + navigator.geolocation.getCurrentPosition(function(geopositionObj){ + // TODO: position and display location icon + } + ); + } + else + { + if(confirm("Lokalisering fungerer bare over https (sikker tilkobling mellom nettleser og tjener). Klikk OK for å gå til sikker tilkobling.")) + { + window.location = "https:" + window.location.href.substring(window.location.protocol.length); + } + } + } else { + alert( "Lokaliseringsfunksjonen er ikke tilgjengelig i denne nettleseren."); + } +} + function navToLocation() { if (navigator.geolocation) { if(window.location.protocol === "https:") diff --git a/src/main/webapp/map_applications/fireblight/report.html b/src/main/webapp/map_applications/fireblight/report.html index 249694dc..f9738548 100755 --- a/src/main/webapp/map_applications/fireblight/report.html +++ b/src/main/webapp/map_applications/fireblight/report.html @@ -127,6 +127,17 @@ left: 10px; z-index: 1999; } + + #headingBox { + position: absolute; + bottom: auto; + top: 1em; + left: 10px; + border: 1px solid black; + z-index: 1999; + padding: 10px; + opacity: 0.85; + } #legend { position: absolute; @@ -241,32 +252,13 @@ <body> <div id="map" class="map"> - <div class="geo-location ol-unselectable ol-control"> - <button onclick="navToLocation();" title="Finn min posisjon"></button> - </div> - <div id="registerButton" class="ol-unselectable ol-control"> - <button type="button" onclick="toggleRegistration(this);" title="Registrering er AV"><i class="fa fa-pencil" aria-hidden="true"></i></button> - </div> - </div> - <div id="searchFieldContainer"> - <div id="searchFieldInnerContainer"> - <input id="searchField" type="text" placeholder="Søk etter stedsnavn" onkeyup="showResults(this);"/> - <div id="searchResults"></div> - </div> - <!--div class="text" > - <div style="margin-left: 30px;"> - <div style="float: right; width: 100%;"> - - - </div> - <div class="logo" style="float: left; width: 30px; margin-left: -30px;background-color: #FFA;"> - <img src="/images/logo_vips.png" alt="VIPS Logo" style="height: 20px;"/> - </div> - </div> - </div--> + </div> - + <div id="headingBox"> + <h1>Rapportering pr fylke</h1> + <p>Velg fylke i lista nedenfor. Vær tålmodig, <br/>det tar noen sekunder før utvalget er ferdig generert.</p> + </div> <div id="featureForm"></div> <div id="seasons"> <select name="startSeason" id="startSeason" onchange="getAndRenderObservationsForReport(this.options[this.options.selectedIndex].value, document.getElementById('countyId').options[document.getElementById('countyId').options.selectedIndex].value);"> -- GitLab