diff --git a/src/main/webapp/map_applications/fireblight/icons/circle.png b/src/main/webapp/map_applications/fireblight/icons/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..38c84e371d07011402e721378c3d5d495ad5eeed Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/circle.png differ diff --git a/src/main/webapp/map_applications/fireblight/icons/circle_original.png b/src/main/webapp/map_applications/fireblight/icons/circle_original.png new file mode 100644 index 0000000000000000000000000000000000000000..81838ffbc95678398c328d7b4ae4e993fe453506 Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/circle_original.png differ diff --git a/src/main/webapp/map_applications/fireblight/icons/diamond.png b/src/main/webapp/map_applications/fireblight/icons/diamond.png new file mode 100644 index 0000000000000000000000000000000000000000..d68848a291264bf7732d64264c878dfae384a6fa Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/diamond.png differ diff --git a/src/main/webapp/map_applications/fireblight/icons/diamond_original.png b/src/main/webapp/map_applications/fireblight/icons/diamond_original.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc1828462611920ec2fadb61335fcb6af382937 Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/diamond_original.png differ diff --git a/src/main/webapp/map_applications/fireblight/icons/triangle.png b/src/main/webapp/map_applications/fireblight/icons/triangle.png new file mode 100644 index 0000000000000000000000000000000000000000..764b29566d6847b0cb71ce09fea965b9a5613bea Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/triangle.png differ diff --git a/src/main/webapp/map_applications/fireblight/icons/triangle_original.png b/src/main/webapp/map_applications/fireblight/icons/triangle_original.png new file mode 100644 index 0000000000000000000000000000000000000000..3b433c50377a604d10e9ac07aefabb9b860c5f92 Binary files /dev/null and b/src/main/webapp/map_applications/fireblight/icons/triangle_original.png differ diff --git a/src/main/webapp/map_applications/fireblight/index.html b/src/main/webapp/map_applications/fireblight/index.html index 882da76e0c87c0ca77ed166929a053b638315f28..5675e90043022fb6479d9b290faf457c70774013 100755 --- a/src/main/webapp/map_applications/fireblight/index.html +++ b/src/main/webapp/map_applications/fireblight/index.html @@ -119,6 +119,31 @@ left: 10px; z-index: 1999; } + + #quantity100minus li, #quantity100 li, #quantity100plus li{ + margin-left: 28px; + } + + #quantity100minus { + list-style-image: url('icons/circle.png') !important; + } + + #quantity100 { + list-style-image: url('icons/diamond.png') !important; + } + + #quantity100plus { + list-style-image: url('icons/triangle.png') !important; + } + + #quantity100minus li::before, #quantity100 li::before, #quantity100plus li::before { + content: none !important; /* Removes any generated content */ + display: inline !important; /* Resets display if it was changed */ + margin: 0 !important; + padding: 0 !important; + background: none !important; + color: inherit !important; + } #legend { position: absolute; @@ -140,7 +165,7 @@ margin:0; } - #legend ul li:before { + #legend ul li::before { content: ""; line-height: 2em; width: 0.75em; @@ -152,22 +177,23 @@ } - #legend ul li.bulk:before { background-color: rgb(255,0,0); } - #legend ul li.sprik:before { background-color: rgb(239,133,19); } - #legend ul li.pil:before { background-color: rgb(239,236,19); } - #legend ul li.eple:before { background-color: rgb(0,255,0); } - #legend ul li.paere:before { background-color: rgb(122,175,131); } - #legend ul li.plante:before { background-color: rgb(0,0,255); } + #legend ul li.bulk::before { background-color: rgb(255,0,0); } + #legend ul li.sprik::before { background-color: rgb(239,133,19); } + #legend ul li.pil::before { background-color: rgb(239,236,19); } + #legend ul li.eple::before { background-color: rgb(0,255,0); } + #legend ul li.paere::before { background-color: rgb(122,175,131); } + #legend ul li.plante::before { background-color: rgb(0,0,255); } - #legend ul li.apiary:before { line-height: 1em; width: .7em; height: .7em; } - #legend ul li.apiary:before { background-color: #ffe05e; } - #legend ul li.nursery:before { line-height: 1em; width: .5em; height: .5em;border: 3px dotted black; background-color: rgb(255, 127,127);} + #legend ul li.apiary::before { line-height: 1em; width: .7em; height: .7em; } + #legend ul li.apiary::before { background-color: #ffe05e; } + #legend ul li.nursery::before { line-height: 1em; width: .5em; height: .5em;border: 3px dotted black; background-color: rgb(255, 127,127);} /* The opacity of these background colors must equal that of the zoneLayer in OpenLayers (see map.js) */ - #legend ul li.bekjempelsesSone:before { background-color: rgb(255,120,0); opacity: 0.65; } - #legend ul li.paerebrannSone:before { background-color: rgb(255,0,0); opacity: 0.65; } - #legend ul li.forebyggendeSone:before { background-color: rgb(0,225,0); opacity: 0.65; } - #legend ul li.utenforSone:before { background-color: rgb(255,255,0); opacity: 0.65; } + #legend ul li.bekjempelsesSone::before { background-color: rgb(255,120,0); opacity: 0.65; } + #legend ul li.paerebrannSone::before { background-color: rgb(255,0,0); opacity: 0.65; } + #legend ul li.forebyggendeSone::before { background-color: rgb(0,225,0); opacity: 0.65; } + #legend ul li.utenforSone::before { background-color: rgb(255,255,0); opacity: 0.65; } + /* Screen size adjustments */ @media (max-width: 500px) and (orientation: portrait) @@ -288,6 +314,16 @@ <li class="paere">Pære</li> <li class="plante">Annet</li> </ul> + <h5>Forekomststørrelse</h3> + <ul id="quantity100minus"> + <li>Mindre enn 100 planter</li> + </ul> + <ul id="quantity100"> + <li>100 planter</li> + </ul> + <ul id="quantity100plus"> + <li>Mer enn 100 planter</li> + </ul> <h3>Kilder til spredning</h3> <ul> <li class="apiary"><input type="checkbox" checked onclick="apiaryLayer.setVisible(this.checked);"/>Bigårdsplass</li> 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