diff --git a/src/main/webapp/map_applications/fireblight/js/map.js b/src/main/webapp/map_applications/fireblight/js/map.js index 8be260f7e1a1ed089b63ecc4c81695f7ab51165e..10f44066602b393218d1c15619d0d98e498c9ba4 100755 --- a/src/main/webapp/map_applications/fireblight/js/map.js +++ b/src/main/webapp/map_applications/fireblight/js/map.js @@ -42,58 +42,80 @@ async function initMap() // Icon styling for the observations layer var iconRadius = 10; + var styles = { // Bulkemispel = rød - 'cotoneaster bullatus': [new ol.style.Style({ - image: new ol.style.Circle({ + 'cotoneaster bullatus': { fill: new ol.style.Fill({color: [255, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), radius: iconRadius - }) - })], + }, // Sprikemispel = dyp oransje - 'cotoneaster divaricata': [new ol.style.Style({ - image: new ol.style.Circle({ + 'cotoneaster divaricata':{ fill: new ol.style.Fill({color: [239, 133, 19, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), radius: iconRadius - }) - })], + }, // Pilemispel = gul - 'cotoneaster salicifolia': [new ol.style.Style({ - image: new ol.style.Circle({ + 'cotoneaster salicifolia':{ fill: new ol.style.Fill({color: [239, 236, 19, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), radius: iconRadius - }) - })], + }, // Eple = grønn - 'malus domestica': [new ol.style.Style({ - image: new ol.style.Circle({ + 'malus domestica': { fill: new ol.style.Fill({color: [0, 255, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), radius: iconRadius - }) - })], + }, // Pære = grågrønn - 'pyrus communis': [new ol.style.Style({ - image: new ol.style.Circle({ + 'pyrus communis': { fill: new ol.style.Fill({color: [122, 175, 131, 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({ + 'plantae': { fill: new ol.style.Fill({color: [0, 0, 255, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), radius: iconRadius - }) - }) - ] + } + }; + // Change icon shape based on the quantity of the observation + const getShape = function(observationData, styleProps){ + if(observationData["forekomststorrelse"] == "100 planter"){ + return new ol.style.Style({ + image: new ol.style.RegularShape({ + points: 4, + fill: styleProps.fill, + stroke: styleProps.stroke, + radius: styleProps.radius + }) + }); + } + if(observationData["forekomststorrelse"] == "Mer enn 100 planter"){ + return new ol.style.Style({ + image: new ol.style.RegularShape({ + points: 3, + fill: styleProps.fill, + stroke: styleProps.stroke, + radius: styleProps.radius + }) + }); + } + return new ol.style.Style({ + image: new ol.style.Circle({ + fill: styleProps.fill, + stroke: styleProps.stroke, + radius: styleProps.radius + }) + }); + } + + + // Initialize the layer for observations. Empty features array at first featureOverlay = new ol.layer.Vector({ source: new ol.source.Vector({ @@ -125,10 +147,10 @@ async function initMap() var retVal = null; if (feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != null) { - retVal = styles[feature.get("cropOrganism")["latinName"].toLowerCase()]; + retVal = [getShape(observationData,styles[feature.get("cropOrganism")["latinName"].toLowerCase()])]; } else { - retVal = styles["plantae"]; + retVal = [getShape(observationData,styles["plantae"])]; } //console.info(retVal[0].getImage().getStroke().getWidth()); // If symptom has been registered, mark with inner black dot