diff --git a/src/main/webapp/map_applications/fireblight/index.html b/src/main/webapp/map_applications/fireblight/index.html index aff7cbe1e21ce7fb8f8d50a76993bd98eb14351e..9901e1eb8fc8f8acd9ac2e9788bbdc79b8848158 100755 --- a/src/main/webapp/map_applications/fireblight/index.html +++ b/src/main/webapp/map_applications/fireblight/index.html @@ -142,9 +142,9 @@ #legend ul li:before { content: ""; - line-height: 1em; - width: .7em; - height: .7em; + line-height: 2em; + width: 0.81em; + height: 0.81em; float: left; margin: .25em .25em 0; border-radius: 50%; @@ -158,6 +158,10 @@ #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);} + /* Screen size adjustments */ @media (max-width: 500px) { @@ -267,6 +271,7 @@ </div> <div id="legend"> + <h3>Registreringer</h3> <ul> <li class="bulk">Bulkemispel</li> <li class="sprik">Sprikemispel</li> @@ -275,6 +280,11 @@ <li class="paere">Pære</li> <li class="plante">Annet</li> </ul> + <h3>Kilder til spredning</h3> + <ul> + <li class="apiary"><input type="checkbox" checked onclick="apiaryLayer.setVisible(this.checked);"/>Bigårdsplass</li> + <li class="nursery"><input type="checkbox" checked onclick="nurseryPoisOverlay.setVisible(this.checked);"/>Planteskole</li> + </ul> </div> diff --git a/src/main/webapp/map_applications/fireblight/js/map.js b/src/main/webapp/map_applications/fireblight/js/map.js index 67388e54f1c5fe9c36b09de19d7da8bb47c47c0c..bd7bbe66c001e7011a16650f173cf1588640c135 100755 --- a/src/main/webapp/map_applications/fireblight/js/map.js +++ b/src/main/webapp/map_applications/fireblight/js/map.js @@ -1,5 +1,5 @@ // The globally available map objects -var map, featureOverlay, newFeatureOverlay, diseaseSpreadingPoisOverlay; +var map, featureOverlay, newFeatureOverlay, nurseryPoisOverlay, apiaryLayer;//, apiaryPoisOverlay; // Override localization settings for this particular web page var hardcodedLanguage = "nb"; @@ -171,12 +171,32 @@ async function initMap() }); - diseaseSpreadingPoisOverlay = new ol.layer.Vector({ + nurseryPoisOverlay = new ol.layer.Vector({ source: new ol.source.Vector({ features: new ol.Collection() }), style: diseaseSpreadingPoiStyle }); + + /*apiaryPoisOverlay = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: new ol.Collection() + }), + style: diseaseSpreadingPoiStyle + });*/ + + let apiarySource = new ol.source.ImageWMS({ + url: 'https://kart.mattilsynet.no/wmscache/service', + params: {"LAYERS":"Mattilsynet_Bigaardsplasser"}, + ratio: 1, + projection: ol.proj.get("EPSG:25833") + }); + + apiaryLayer = new ol.layer.Image({ + source: apiarySource, + visible: true, + opacity: 1.0 + }); map = new ol.Map({ target: 'map', @@ -184,7 +204,9 @@ async function initMap() //topo2graatone, topo4, //osm, - diseaseSpreadingPoisOverlay, + nurseryPoisOverlay, + //apiaryPoisOverlay, + apiaryLayer, featureOverlay, newFeatureOverlay ], @@ -359,7 +381,8 @@ function diseaseSpreadingPoiStyle(feature, resolution) function getAndRenderDiseaseSpreadingPois() { - fetch("/rest/poi/organization/1/type/geojson?poiTypes=6,7") + // Nurseries + fetch("/rest/poi/organization/1/type/geojson?poiTypes=7") .then(response => response.json()) .then(data => { let olFeatures = (new ol.format.GeoJSON()).readFeatures( @@ -372,12 +395,31 @@ function getAndRenderDiseaseSpreadingPois() //sconsole.info(olFeatures); //console.info(diseaseSpreadingPoisOverlay.getSource()); - diseaseSpreadingPoisOverlay.getSource().clear(); - diseaseSpreadingPoisOverlay.getSource().addFeatures(olFeatures); + nurseryPoisOverlay.getSource().clear(); + nurseryPoisOverlay.getSource().addFeatures(olFeatures); }); - + /* + // Apiary sites + // 2023-10-04: Reading WMS layer directly from Mattilsynet + fetch("/rest/poi/organization/1/type/geojson?poiTypes=6") + .then(response => response.json()) + .then(data => { + let olFeatures = (new ol.format.GeoJSON()).readFeatures( + data, + { + dataProjection: "EPSG:4326", + featureProjection: map.getView().getProjection().getCode() + } + ); + //sconsole.info(olFeatures); + //console.info(diseaseSpreadingPoisOverlay.getSource()); + apiaryPoisOverlay.getSource().clear(); + apiaryPoisOverlay.getSource().addFeatures(olFeatures); + + }); + */ } /**