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
Branches
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)
});
}
/**
*
* @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)
{
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