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

Added report tool for the fireblight map application

parent dd96f332
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/main/webapp/map_applications/fireblight/js/d3.min.js 0 → 100644
+ 2
− 0
View file @ 52d19998
Source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/map_applications/fireblight/js/map.js
+ 51
− 0
View file @ 52d19998
...@@ -185,6 +185,57 @@ function getAndRenderObservations(fromSeason) ...@@ -185,6 +185,57 @@ function getAndRenderObservations(fromSeason)
}); });
} }
/**
*
* @param {type} fromSeason
* @param {type} countyNo
* @returns {undefined}
*/
function getAndRenderObservationsForReport(fromSeason, countyNo = "-1")
{
//console.info("getAndRenderObservations(" + season + ")");
$.getJSON("/rest/observation/filter/1/geoJSON?from=" + fromSeason + "-01-01&pestId=" + paerebrann.organismId, function(geoData){
//console.info(geoData)
// Filter by county
$.getJSON("/corsproxy/https://ws.geonorge.no/kommuneinfo/v1/fylker/" + countyNo + "/omrade")
.always(function(serviceResponse){
//console.info(geoData);
//console.info(serviceResponse);
if(parseInt(countyNo) > 0)
{
var filteredFeatures = [];
for(var i=0;i < geoData.features.length;i++)
{
var featureToBeFiltered = geoData.features[i];
coordinate = proj4("EPSG:4326","EPSG:4258",[featureToBeFiltered.geometry.coordinates[0],featureToBeFiltered.geometry.coordinates[1]]);
// For some weird reason, d3 returns NOT contains in our case
if(!d3.geoContains(serviceResponse.omrade, coordinate))
{
//console.info(featureToBeFiltered);
filteredFeatures.push(featureToBeFiltered);
}
//console.info(featureToBeFiltered);
}
//console.info(filteredFeatures);
geoData.features = filteredFeatures;
}
var format = new ol.format.GeoJSON();
var drawnfeatures = format.readFeatures(geoData, {
//dataProjection: "EPSG:32633",
dataProjection: "EPSG:4326",
featureProjection: map.getView().getProjection().getCode()
});
featureOverlay.getSource().clear();
featureOverlay.getSource().addFeatures(drawnfeatures);
}
);
});
}
function toggleRegistration(theButton) function toggleRegistration(theButton)
{ {
if(registration) if(registration)
......
src/main/webapp/map_applications/fireblight/report.html 0 → 100755
+ 368
− 0
View file @ 52d19998
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>P&aelig;rebrannregistrering - rapporteringsside</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/3rdparty/font-awesome.min.css" media="screen" />
<link rel="stylesheet" href="/css/3rdparty/ol.css?t=20170623" media="screen" />
<style type="text/css">
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
#searchFieldContainer {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 2000;
background-color: transparent;
}
#searchFieldInnerContainer
{
background-color: white;
margin: 5px;
padding: 5px;
/*border: 1px solid #dddddd;*/
}
.ol-zoom {
top: auto;
bottom: 3.5em;
left: auto;
right: .5em
}
#searchResults {
display: none;
}
#searchResults li {
cursor: pointer;
}
.geo-location
{
top: auto;
right: 0.5em;
bottom: 10.0em;
left: auto;
z-index: 1000;
}
#registerButton {
top: auto;
bottom: 12.0em;
right: 0.5em;
left: auto;
z-index: 1000;
}
#registerButton button {
width: 1.375em;
height: 1.375em;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 2px 2px;
background-color: rgba(0,60,136,.5);
border: none;
color: white;
}
.geo-location button {
width: 1.375em;
height: 1.375em;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY3RkRGRkNGQTU2MDExRTU5NzkwREJDNkE0NDk4ODlEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY3RkRGRkQwQTU2MDExRTU5NzkwREJDNkE0NDk4ODlEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjdGREZGQ0RBNTYwMTFFNTk3OTBEQkM2QTQ0OTg4OUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjdGREZGQ0VBNTYwMTFFNTk3OTBEQkM2QTQ0OTg4OUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kZLS4AAAABlBMVEX9/fwAAABwf477AAAAAnRSTlP/AOW3MEoAAAHzSURBVHja7NvBcsJADANQ+f9/misHsmvZkhNgfWwhes10htheEOXCe9Wvosm/H4ADOIADOIBZAD7WEADLcgOQKB8A6bIAQJUcALqkAJRKB0C1NAA0SgFAr7oAtKsHANwC2PM3BAzkLwWYyF8JMJK/EGAm/1qAofxLAabySQAwJUAx/8NDaU1QAlw+FRcEoPPXj+W0AGT+vi/wAlKNCSUAk5/tjHqA7LsJ3EpAAKjeMC1AlN9J/boPoLvj7I2s5gf7gh6gNB/I/S+XO3/2FTkA9Tm2/6DxAjSTFDjzRYAIsWASsL8ivPn3A+KRADCAGAQ4bsD2r3o8IH4T8P5wzXRhnqGqY/p5AAdwAAdwAAdAXlO/jiTS//SB5KnPhPGTgHZj8u2tGdec3t6eDw0oWACcNyA1pBqcEYlvAVSA4qCyMid86qi2BKgNq/MC07heti8oLyzy7zStbDQ7o87SSrC2623NsntH3+Kyubold7f08noHUCyvc1v4zA+r6/ttY3EB0B1g8HR3Nx9ioc6Q3H+KRi8IFhAz+VNnyaICiIn8mfOEUQWICNEAhDt/f6zXPdcyH2xOHFu2jv0yF3dOHkMGCFc88QUH01A1HONPbqiq6Lc77Tzd+0vTo/ZFJ1l4FfBRUb6Oav5zAAdwAH8PiK8FvAQYAObrJPi2gfjAAAAAAElFTkSuQmCC);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 2px 2px;
background-color: rgba(0,60,136,.5);
border: none;
}
#featureForm {
display: none;
width: auto;
max-width: 90%;
height: auto;
position: absolute;
top: 3.0em;
left: 10px;
z-index: 1999;
background-color: white;
border: 1px solid black;
padding: 10px;
opacity: 0.85;
}
#seasons {
position: absolute;
bottom: 1em;
top: auto;
left: 10px;
z-index: 1999;
}
#counties {
position: absolute;
bottom: 3em;
top: auto;
left: 10px;
z-index: 1999;
}
#legend {
position: absolute;
top: 3.0em;
bottom: auto;
right: 10px;
z-index: 1999;
background-color: white;
border: 1px solid black;
padding: 10px;
opacity: 0.85;
}
#legend ul {
list-style: none;
padding:0;
margin:0;
}
#legend ul li:before {
content: "";
line-height: 1em;
width: .7em;
height: .7em;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
border: 1px solid black;
}
#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); }
/* Screen size adjustments */
@media (max-width: 500px)
{
#legend {
display: none;
}
}
@media (pointer: coarse) {
#registerButton button, .geo-location button {
width: 1.8em;
height: 1.8em;
}
#registerButton {
bottom: 13.0em;
}
.geo-location button {
bottom: 8.0em;
background-position: 6px;
}
}
@media (max-height: 500px)
{
#legend {
display: none;
}
}
ul.resultList
{
width: auto;
list-style: none;
padding: 0px;
}
ul.resultList li
{
background-color: #dddddd;
border-bottom: 1px solid white;
cursor: pointer;
padding: 5px;
}
ul.resultList li:hover {
background-color: #aaaaaa;
}
div.logo {
float: left;
}
#searchField {
width: 100%;
}
table {
border-spacing: 5px 15px;
}
select, button
{
font-size: large;
}
button {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="map" class="map">
<div class="geo-location ol-unselectable ol-control">
<button onclick="navToLocation();" title="Finn min posisjon"></button>
</div>
<div id="registerButton" class="ol-unselectable ol-control">
<button type="button" onclick="toggleRegistration(this);" title="Registrering er AV"><i class="fa fa-pencil" aria-hidden="true"></i></button>
</div>
</div>
<div id="searchFieldContainer">
<div id="searchFieldInnerContainer">
<input id="searchField" type="text" placeholder="S&oslash;k etter stedsnavn" onkeyup="showResults(this);"/>
<div id="searchResults"></div>
</div>
<!--div class="text" >
<div style="margin-left: 30px;">
<div style="float: right; width: 100%;">
</div>
<div class="logo" style="float: left; width: 30px; margin-left: -30px;background-color: #FFA;">
<img src="/images/logo_vips.png" alt="VIPS Logo" style="height: 20px;"/>
</div>
</div>
</div-->
</div>
<div id="featureForm"></div>
<div id="seasons">
<select name="startSeason" id="startSeason" onchange="getAndRenderObservationsForReport(this.options[this.options.selectedIndex].value, document.getElementById('countyId').options[document.getElementById('countyId').options.selectedIndex].value);">
</select>
</div>
<div id="counties">
<select name="countyId" onchange="getAndRenderObservationsForReport(document.getElementById('startSeason').options[document.getElementById('startSeason').options.selectedIndex].value,this.options[this.options.selectedIndex].value);">
<option value="-1">-- Velg fylke --</option>
<option value="03">Oslo</option>
<option value="30">Viken</option>
<option value="34">Innlandet</option>
<option value="38">Vestfold og Telemark</option>
<option value="42">Agder</option>
<option value="11">Rogaland</option>
<option value="46">Vestland</option>
<option value="15">Møre og Romsdal</option>
<option value="50">Trøndelag</option>
<option value="18">Nordland</option>
<option value="54">Troms og Finnmark</option>
</select>
</div>
<div id="legend">
<ul>
<li class="bulk">Bulkemispel</li>
<li class="sprik">Sprikemispel</li>
<li class="pil">Pilemispel</li>
<li class="eple">Eple</li>
<li class="paere">Pære</li>
<li class="plante">Annet</li>
</ul>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="/js/environment.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/constants.js"></script>
<script type="text/javascript" src="/js/3rdparty/jquery.min.js"></script>
<script type="text/javascript" src="/js/3rdparty/ol.js?t=20170623"></script>
<script type="text/javascript" src="/js/3rdparty/proj4.js"></script>
<script type="text/javascript" src="/js/3rdparty/moment.min.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/map.js?t=20170713"></script>
<script type="text/javascript">
var stedsnavnProj = "+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs";
proj4.defs("EPSG:32633", "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
proj4.defs("EPSG:4258", "+proj=longlat +ellps=GRS80 +no_defs");
$(document).ready(function() {
initForekomsttyper();
// initMap() kalles i denne funksjonens callback
// Dette fordi vi må finne databaseId til pærebrann dynamisk først
initPaerebrann();
});
function showResults(inputField)
{
var phrase = inputField.value;
if(phrase.trim().length > 2)
{
//console.log(phrase);
$.getJSON( "https://ws.geonorge.no/SKWS3Index/ssr/sok?navn=" + phrase + "*&maxAnt=5&tilSosiKoordSyst=4258&fylkeKommuneListe=&eksakteForst=true", renderResults);
}
else if(phrase.trim().length === 0)
{
var searchResultsEl = document.getElementById("searchResults");
searchResultsEl.innerHTML = "";
searchResultsEl.style.display="none";
}
}
var renderResults = function(data) {
//console.log(data);
var html = "<ul class='resultList'>";
for(var i=0; i<Math.min(data.stedsnavn.length,6); i++)
{
var location = data.stedsnavn[i];
var coordinateOrig = [parseFloat(location.aust), parseFloat(location.nord)];
var coordinateDec = proj4(stedsnavnProj, "EPSG:4326", coordinateOrig);
html += "<li onclick=\"navigateTo([" + coordinateDec + "]);\"><b>" + location.stedsnavn + "</b>, " + location.kommunenavn + " (" + location.navnetype + ")</li>";
}
html += "</ul>"
var searchResultsEl = document.getElementById("searchResults");
searchResultsEl.innerHTML = html;
searchResultsEl.style.display="block";
//console.log(location)
// Get EPSG projection in data, transform to decimal degrees
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment