Skip to content
Snippets Groups Projects
Commit e958c715 authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

Merge branch 'nye-paerebrannikoner' into develop

parents a5bbb3a1 0dd0d674
Branches
No related tags found
No related merge requests found
src/main/webapp/map_applications/fireblight/icons/circle.png

4.55 KiB

src/main/webapp/map_applications/fireblight/icons/circle_original.png

6.42 KiB

src/main/webapp/map_applications/fireblight/icons/diamond.png

4.44 KiB

src/main/webapp/map_applications/fireblight/icons/diamond_original.png

3.27 KiB

src/main/webapp/map_applications/fireblight/icons/triangle.png

4.47 KiB

src/main/webapp/map_applications/fireblight/icons/triangle_original.png

4.7 KiB

...@@ -119,6 +119,31 @@ ...@@ -119,6 +119,31 @@
left: 10px; left: 10px;
z-index: 1999; 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 { #legend {
position: absolute; position: absolute;
...@@ -140,7 +165,7 @@ ...@@ -140,7 +165,7 @@
margin:0; margin:0;
} }
#legend ul li:before { #legend ul li::before {
content: ""; content: "";
line-height: 2em; line-height: 2em;
width: 0.75em; width: 0.75em;
...@@ -152,22 +177,23 @@ ...@@ -152,22 +177,23 @@
} }
#legend ul li.bulk:before { background-color: rgb(255,0,0); } #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.sprik::before { background-color: rgb(239,133,19); }
#legend ul li.pil:before { background-color: rgb(239,236,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.eple::before { background-color: rgb(0,255,0); }
#legend ul li.paere:before { background-color: rgb(122,175,131); } #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.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 { line-height: 1em; width: .7em; height: .7em; }
#legend ul li.apiary:before { background-color: #ffe05e; } #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.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) */ /* 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.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.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.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.utenforSone::before { background-color: rgb(255,255,0); opacity: 0.65; }
/* Screen size adjustments */ /* Screen size adjustments */
@media (max-width: 500px) and (orientation: portrait) @media (max-width: 500px) and (orientation: portrait)
...@@ -288,6 +314,16 @@ ...@@ -288,6 +314,16 @@
<li class="paere">Pære</li> <li class="paere">Pære</li>
<li class="plante">Annet</li> <li class="plante">Annet</li>
</ul> </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> <h3>Kilder til spredning</h3>
<ul> <ul>
<li class="apiary"><input type="checkbox" checked onclick="apiaryLayer.setVisible(this.checked);"/>Bigårdsplass</li> <li class="apiary"><input type="checkbox" checked onclick="apiaryLayer.setVisible(this.checked);"/>Bigårdsplass</li>
......
...@@ -42,58 +42,80 @@ async function initMap() ...@@ -42,58 +42,80 @@ async function initMap()
// Icon styling for the observations layer // Icon styling for the observations layer
var iconRadius = 10; var iconRadius = 10;
var styles = { var styles = {
// Bulkemispel = rød // Bulkemispel = rød
'cotoneaster bullatus': [new ol.style.Style({ 'cotoneaster bullatus': {
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [255, 0, 0, 1]}), fill: new ol.style.Fill({color: [255, 0, 0, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius radius: iconRadius
}) },
})],
// Sprikemispel = dyp oransje // Sprikemispel = dyp oransje
'cotoneaster divaricata': [new ol.style.Style({ 'cotoneaster divaricata':{
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [239, 133, 19, 1]}), fill: new ol.style.Fill({color: [239, 133, 19, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius radius: iconRadius
}) },
})],
// Pilemispel = gul // Pilemispel = gul
'cotoneaster salicifolia': [new ol.style.Style({ 'cotoneaster salicifolia':{
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [239, 236, 19, 1]}), fill: new ol.style.Fill({color: [239, 236, 19, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius radius: iconRadius
}) },
})],
// Eple = grønn // Eple = grønn
'malus domestica': [new ol.style.Style({ 'malus domestica': {
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [0, 255, 0, 1]}), fill: new ol.style.Fill({color: [0, 255, 0, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius radius: iconRadius
}) },
})],
// Pære = grågrønn // Pære = grågrønn
'pyrus communis': [new ol.style.Style({ 'pyrus communis': {
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [122, 175, 131, 1]}), fill: new ol.style.Fill({color: [122, 175, 131, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius radius: iconRadius
}) },
})],
// Planteriket = blå // Planteriket = blå
'plantae': [new ol.style.Style({ 'plantae': {
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [0, 0, 255, 1]}), fill: new ol.style.Fill({color: [0, 0, 255, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}), stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius 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 // Initialize the layer for observations. Empty features array at first
featureOverlay = new ol.layer.Vector({ featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({ source: new ol.source.Vector({
...@@ -125,10 +147,10 @@ async function initMap() ...@@ -125,10 +147,10 @@ async function initMap()
var retVal = null; var retVal = null;
if (feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != 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 } else
{ {
retVal = styles["plantae"]; retVal = [getShape(observationData,styles["plantae"])];
} }
//console.info(retVal[0].getImage().getStroke().getWidth()); //console.info(retVal[0].getImage().getStroke().getWidth());
// If symptom has been registered, mark with inner black dot // If symptom has been registered, mark with inner black dot
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment