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