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

First commit of phytophthora registration map

parent 21b2ddd1
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/phytophthora/index.html 0 → 100755
+ 334
− 0
View file @ 73bb377a
<!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>Phytophthoraregistrering</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_6_5_0.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: 1em;
left: auto;
right: .5em
}
#searchResults {
display: none;
}
#searchResults li {
cursor: pointer;
}
.geo-location
{
top: auto;
right: 4em;
bottom: 1em;
left: auto;
z-index: 1000;
}
#registerButton {
top: auto;
bottom: 1em;
right: 6em;
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;
}
#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: 2em;
width: 0.75em;
height: 0.75em;
float: left;
margin: .05em .4em 0;
border-radius: 50%;
border: 1px solid black;
}
#legend ul li.bok:before { background-color: rgb(255,0,0); }
#legend ul li.graor:before { background-color: rgb(239,133,19); }
#legend ul li.eik:before { background-color: rgb(239,236,19); }
#legend ul li.lonn:before { background-color: rgb(0,255,0); }
#legend ul li.svartor: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;
}
}
/* For finger pointing aka touch screen */
@media (pointer: coarse) {
#registerButton button, .geo-location button {
width: 1.8em;
height: 1.8em;
}
#registerButton {
right: 8.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="toggleTracking(this);" title="Vis min posisjon er AV"></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>
<div id="featureForm"></div>
<div id="seasons">
<select name="startSeason" id="startSeason" onchange="getAndRenderObservations(this.options[this.options.selectedIndex].value);">
</select>
</div>
<div id="legend">
<h3>Registreringer</h3>
<ul>
<li class="bok">Bøk</li>
<li class="graor">Gråor</li>
<li class="eik">Eik</li>
<li class="lonn">Lønn</li>
<li class="svartor">Svartor</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_6_5_0.js"></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/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");
$(document).ready(function() {
initForekomsttyper();
// initMap() kalles i denne funksjonens callback
// Dette fordi vi må finne databaseId til pærebrann dynamisk først
initPhytophthora();
});
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);
$.getJSON( "https://ws.geonorge.no/stedsnavn/v1/navn?sok=" + phrase + "*&utkoordsys=4326&treffPerSide=6&side=1&filtrer=navn.skrivem%C3%A5te%2Cnavn.navneobjekttype%2Cnavn.kommuner%2Cnavn.representasjonspunkt", 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.navn.length,6); i++)
{
var location = data.navn[i];
var coordinateOrig = [parseFloat(location.representasjonspunkt.øst), parseFloat(location.representasjonspunkt.nord)];
//var coordinateDec = proj4(location.representasjonspunkt.koordsys, "EPSG:4326", coordinateOrig);
html += "<li onclick=\"navigateTo([" + coordinateOrig + "]);\"><b>" + location.skrivemåte + "</b>, " + location.kommuner[0].kommunenavn + " (" + location.navneobjekttype + ")</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>
src/main/webapp/map_applications/phytophthora/js/d3.min.js 0 → 100644
+ 2
− 0
View file @ 73bb377a
Source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/map_applications/phytophthora/js/map.js 0 → 100755
+ 792
− 0
View file @ 73bb377a
/*
* Copyright (c) 2024 NIBIO <http://www.nibio.no/>.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*
*/
/*
*
* @author Tor-Einar Skog <tor-einar.skog@nibio.no>
*/
// The globally available map objects
var map, featureOverlay, newFeatureOverlay;
// Override localization settings for this particular web page
var hardcodedLanguage = "nb";
// If false, touching map will not create a new item
var registration = false;
var geolocation;
/**
* Initializes the map with all its layers
* @returns {undefined}
*/
async function initMap()
{
var features = new ol.Collection();
// Icon styling for the observations layer
var iconRadius = 10;
var styles = {
// Bøk = rød
'fagus sylvatica': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [255, 0, 0, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius
})
})],
// Gråor = dyp oransje
'alnus incana': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [239, 133, 19, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius
})
})],
// Eik = gul
'quercus': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [239, 236, 19, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius
})
})],
// Lønn = grønn
'acer': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [0, 255, 0, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius
})
})],
// Svartor = grågrønn
'svartor': [new ol.style.Style({
image: new ol.style.Circle({
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({
fill: new ol.style.Fill({color: [0, 0, 255, 1]}),
stroke: new ol.style.Stroke({width: 1, color: [0, 0, 0, 1]}),
radius: iconRadius
})
})
]
};
// Initialize the layer for observations. Empty features array at first
featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: function (feature, resolution) {
// Site that has been cleared is all black
var observationData = JSON.parse(feature.get("observationData"));
var retVal = null;
if (feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != null)
{
retVal = styles[feature.get("cropOrganism")["latinName"].toLowerCase()];
} else
{
retVal = styles["plantae"];
}
//console.info(retVal[0].getImage().getStroke().getWidth());
// If symptom has been registered, mark with inner black dot
if (observationData["symptom"] != "Ikke symptom")
{
retVal = [
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [0, 0, 0, 1]}),
stroke: new ol.style.Stroke({width: 8, color: retVal[0].getImage().getFill().getColor()}),
radius: iconRadius
})
})
];
}
return retVal;
}
});
// When user registers a new observation, this layer is used to place the marker
newFeatureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: new ol.Collection()
}),
style: [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: [255, 255, 255, 1]}),
stroke: new ol.style.Stroke({color: [0, 0, 0, 1], width: 3, lineDash: [2, 2]}),
radius: 10
})
})]
});
// Get the background layer for Norway from Statens kartverk
var parser = new ol.format.WMTSCapabilities();
fetch('https://cache.kartverket.no/v1/wmts/1.0.0/WMTSCapabilities.xml').then(function (response) {
return response.text();
}).then(function (text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'topo',
matrixSet: 'webmercator'
});
var topo =
new ol.layer.Tile({
opacity: 1,
source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
});
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attribution: false}), // Hide the attribution
layers: [
topo,
featureOverlay,
newFeatureOverlay
],
view: new ol.View({
center: ol.proj.fromLonLat([8.5, 60.8]),
zoom: 6
})
});
// Configure geolocation tracker
geolocation = new ol.Geolocation({
trackingOptions: {
enableHighAccuracy: true
},
projection: map.getView().getProjection()
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC',
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
}),
})
);
geolocation.on('change:position', function () {
var coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
});
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [positionFeature]
})
});
// TODO feature properties must be synchronized
var lastYear = new Date().getFullYear() - 1;
// Population the season select list, setting last year as default selected
initSeasonSelectList(lastYear);
//getAndRenderDiseaseSpreadingPois();
getAndRenderObservations(lastYear);
// Handle user click on map
map.on('click', function (evt) {
//features = []
var feature = map.forEachFeatureAtPixel(
evt.pixel, function (ft, l) {
return ft;
}
);
var vectorSource = newFeatureOverlay.getSource();
// Remove any new features already created
vectorSource.clear();
if (feature && feature.getProperties()["observationId"] != undefined) {
// Create a fake icon for highlighting
var fakeFeature = createFeature(feature.getGeometry().getCoordinates());
vectorSource.addFeature(fakeFeature);
displayFeature(feature);
} else if (registration)
{
var newFeature = createFeature(map.getCoordinateFromPixel(evt.pixel));
vectorSource.addFeature(newFeature);
editFeature(newFeature.getId());
}
});
}); // END FETCH
}
let openLayersDefaultStyle = undefined;
function getOpenLayersDefaultStyle()
{
if (openLayersDefaultStyle == undefined)
{
var fill = new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
color: '#3399CC',
width: 1.25
});
openLayersDefaultStyle = [
new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: 5
}),
fill: fill,
stroke: stroke
})
];
}
return openLayersDefaultStyle;
}
/**
*
* @param {type} fromSeason
* @returns {undefined}
*/
function getAndRenderObservations(fromSeason)
{
//console.info("getAndRenderObservations(" + season + ")");
$.getJSON("/rest/observation/filter/1/geoJSON?from=" + fromSeason + "-01-01&pestId=" + phytophthora.organismId, function (geoData) {
//console.info(geoData)
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);
});
}
/**
*
* @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=" + phytophthora.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)
{
theButton.title = "Registrering er AV";
theButton.style.color = "white";
} else
{
theButton.title = "Registrering er PÅ";
theButton.style.color = "red";
}
registration = !registration;
}
function toggleTracking(theButton)
{
geolocation.setTracking(!geolocation.getTracking());
theButton.style.backgroundColor = geolocation.getTracking() ? "green" : "rgba(0,60,136,.5)";
theButton.title = geolocation.getTracking() ? "Vis min posisjon er PÅ" : "Vis min posisjon er AV";
}
/**
* Creates a new feature
* @param {type} coordinate
* @returns {createFeature.newFeature|ol.Feature}
*/
var createFeature = function (coordinate)
{
if (coordinate.length == 2)
{
coordinate = [coordinate[0], coordinate[1], 0];
}
var point = new ol.geom.Point(coordinate);
var newFeature = new ol.Feature({
name: "Ny observasjon",
geometry: point
});
newFeature.setId(-1);
newFeature.setProperties({
"observationId": -1,
"observationData": "{\"symptom\":\"\"}",
"cropOrganism": {},
"observationText": "",
"timeOfObservation": moment().valueOf()
});
return newFeature;
}
var displayFeature = function (feature)
{
var featureForm = document.getElementById("featureForm");
var observationData = JSON.parse(feature.get("observationData"));
var timeOfObservation = new moment(feature.get("timeOfObservation"));
var html = [
'<button type="button" onclick="unFocusForm()">X</button>',
'<button type="button" onclick="editFeature(\'', feature.getId(), '\');">Rediger</button>',
'<button type="button" onclick="deleteFeature(' + feature.getId() + ')">Slett</button>',
'<h3>Registrering</h3>',
'<table>',
'<tr><td>Type</td><td>', getLocalizedOrganismName(feature.get("cropOrganism"), hardcodedLanguage), '</td></tr>',
'<tr><td>Symptom</td><td>', observationData["symptom"], '</td></tr>',
'<tr><td>Funn</td><td>', observationData["funn"], '</td></tr>',
'<tr><td>Prøvetype</td><td>', observationData["provetype"], '</td></tr>',
'<tr><td>Prøvenummer</td><td>', observationData["provenummer"], '</td></tr>',
'<tr><td>Beskrivelse</td><td>', feature.get("observationText"), '</td></tr>',
'<tr><td>Dato</td><td>', timeOfObservation.format("DD.MM.YYYY"), '</td></tr>',
'</table>'
];
featureForm.innerHTML = html.join("");
focusForm();
}
var forekomsttypeLatinskeNavn = [
"Fagus sylvatica", //"Bøk",
"Alnus incana", //"Gråor",
"Quercus", //"Eik",
"Acer", //"Lønn",
"Alnus glutinosa", // "Svartor"
"Plantae" // Planteriket (Annet)
];
var forekomsttyper = [];
var phytophthora = {};
function initForekomsttyper()
{
$.getJSON("/rest/organism/search/latinnames?keywords=" + forekomsttypeLatinskeNavn.join(","), function (data) {
forekomsttyper = data;
});
}
function initPhytophthora() {
$.getJSON("/rest/organism/search/latinnames?keywords=Phytophthora sp", function (data) {
if (data.length == 1)
{
phytophthora = data[0];
initMap();
}
});
}
var getCropOrganism = function (organismId)
{
for (var i = 0; i < forekomsttyper.length; i++)
{
if (forekomsttyper[i].organismId == organismId)
{
return forekomsttyper[i];
}
}
}
var symptoms = ["Flekker", "Glisne kroner","Andre symptom","Andre skader","Ikke symptom"];
var funns = ["[Ukjent]", "Phytophthora gonapodyides", "Phytophthora lacustris", "Phytophthora plurivora", "Phytophthora cambivora", "Phytophthora cactorum", "Phytophthora sp"]
var provetypes = ["[Ikke prøve]","Jord","Vev","Vann"];
var editFeature = function (featureId)
{
var feature = featureId > 0 ? featureOverlay.getSource().getFeatureById(featureId)
: newFeatureOverlay.getSource().getFeatureById(featureId);
var observationData = JSON.parse(feature.get("observationData"));
var timeOfObservation = new moment(feature.get("timeOfObservation"));
var featureForm = document.getElementById("featureForm");
var html =
'<button type="button" onclick="unFocusForm()" title="Avbryt">X</button>' +
(featureId > 0 ? '<button type="button" onclick="deleteFeature(' + featureId + ')">Delete</button>' : '') +
'<h3>' + (featureId > 0 ? "R" : "Ny r") + 'egistrering</h3>' +
'<table>' +
'<tr><td>Type</td><td>' +
generateCropSelect("forekomsttype", forekomsttyper, feature.get("cropOrganism")["organismId"]) +
'</td></tr>' +
'<tr><td>Symptom</td><td>' +
generateSelect("symptom", symptoms, observationData["symptom"]) +
'</td></tr>' +
'<tr><td>Funn</td><td>' +
generateSelect("funn", funns, observationData["funn"]) +
'</td></tr>' +
'<tr><td>Prøvetype</td><td>' +
generateSelect("provetype", provetypes, observationData["provetype"]) +
'</td></tr>' +
'<tr><td>Prøvenummer</td><td>' +
'<input type="text" id="provenummer" name="provenummer" size="15" value="' + (observationData["provenummer"] != null ? observationData["provenummer"] : "") + '"/></td></tr>' +
'<tr><td></td><td>' +
'<tr><td>Beskrivelse</td><td>' +
'<textarea id="beskrivelse" name="beskrivelse">' + (feature.get("observationText") != null ? feature.get("observationText") : "") + '</textarea>' +
'</td></tr>' +
'<tr><td>Dato</td><td>' +
'<input type="text" id="dato" name="dato" size="10" value="' + timeOfObservation.format("DD.MM.YYYY") + '"/></td></tr>' +
'<tr><td></td><td>' +
'<input type="submit" value="Lagre" onclick="storeFeature(' + feature.getId() + ');"/></td></tr>' +
'</table>';
featureForm.innerHTML = html;
focusForm();
//console.info(feature);
};
var storeFeature = function (featureId)
{
var feature = featureId > 0 ? featureOverlay.getSource().getFeatureById(featureId)
: newFeatureOverlay.getSource().getFeatureById(featureId);
// Store, clear newFeature layer
// Need to add feature as payload
var format = new ol.format.GeoJSON();
// Add the form data
var cropOrganism = getCropOrganism(document.getElementById("forekomsttype").options[document.getElementById("forekomsttype").options.selectedIndex].value);
//console.info(cropOrganism);
var symptom = document.getElementById("symptom").options[document.getElementById("symptom").options.selectedIndex].value;
var funn = document.getElementById("funn").options[document.getElementById("funn").options.selectedIndex].value;
var provetype = document.getElementById("provetype").options[document.getElementById("provetype").options.selectedIndex].value;
var provenummer = document.getElementById("provenummer").value;
var observationText = document.getElementById("beskrivelse").value;
var observationHeading = "Registrering av phytophthora";
var timeOfObservation = moment(document.getElementById("dato").value + "+0200", "DD.MM.YYYYZ");
if (timeOfObservation.year() < 2000)
{
alert("Feil dato (før år 2000). Datoformat er DD.MM.ÅÅÅÅ");
return;
}
feature.setProperties({
timeOfObservation: timeOfObservation.valueOf(),
cropOrganism: cropOrganism,
organism: phytophthora,
observationHeading: observationHeading,
observationText: observationText,
observationData: "{\"symptom\":\"" + symptom + "\",\"funn\":\"" + funn + "\",\"provetype\":\"" + provetype + "\",\"provenummer\":\"" + provenummer + "\"}",
statusTypeId: 3,
statusRemarks: "Registrert via phytophthora-overvåkningskartet",
isQuantified: true,
broadcastMessage: false
});
var result = format.writeFeatures([feature], {
dataProjection: 'EPSG:4326',
featureProjection: map.getView().getProjection().getCode()
});
//console.log(feature);
$.ajax({
type: "POST",
url: "/rest/observation/gisobservation",
// The key needs to match your method's input parameter (case-sensitive).
data: result,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (geoData) {
//console.info(geoData)
var format = new ol.format.GeoJSON();
var drawnfeatures = format.readFeatures(geoData, {
dataProjection: "EPSG:4326",
featureProjection: map.getView().getProjection().getCode()
});
newFeatureOverlay.getSource().clear(true);
// If storing an existing feature, remove the one
// that was there before storing, since the returned
// one has a new gisId (featureId)
if (featureId > 0)
{
featureOverlay.getSource().removeFeature(feature);
}
featureOverlay.getSource().addFeatures(drawnfeatures);
unFocusForm();
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 401)
{
if (confirm("Kan ikke lagre fordi du er logget ut av applikasjonen. Klikk OK for å logge inn."))
{
window.location.reload();
}
} else
{
alert("Beklager, en feil oppsto. Status = " + jqXHR.status + ", eventuell feilmelding: " + textStatus);
}
}
});
}
/**
* Delete an existing feature
* @param {type} featureId
* @returns {undefined}
*/
var deleteFeature = function (featureId)
{
if (!confirm("Er du sikker på at du vil slette?"))
{
return;
}
var feature = featureOverlay.getSource().getFeatureById(featureId);
$.ajax({
type: "DELETE",
url: "/rest/observation/gisobservation/" + feature.getId(),
success: function (response) {
//console.info(response);
// If storing an existing feature, remove the one
// that was there before storing, since the returned
// one has a new gisId (featureId)
if (featureId > 0)
{
featureOverlay.getSource().removeFeature(feature);
}
unFocusForm();
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 401)
{
if (confirm("Kan ikke slette fordi du er logget ut av applikasjonen. Klikk OK for å logge inn."))
{
window.location.reload();
}
} else
{
alert("Beklager, en feil oppsto. Status = " + jqXHR.status + ", eventuell feilmelding: " + textStatus);
}
}
});
}
var generateSelect = function (selectName, options, preselect)
{
var retVal = '<select id="' + selectName + '" name="' + selectName + '">';
for (var i = 0; i < options.length; i++)
{
retVal += '<option value="' + options[i] + '"' + (options[i] == preselect ? " selected=\"selected\"" : "") + '">' + options[i] + '</option>';
}
retVal += '</select>';
return retVal;
}
var generateCropSelect = function (selectName, cropOrganisms, preselect)
{
var retVal = '<select id="' + selectName + '" name="' + selectName + '">';
for (var c = 0; c < forekomsttypeLatinskeNavn.length; c++)
{
currentLatinName = forekomsttypeLatinskeNavn[c];
for (var i = 0; i < cropOrganisms.length; i++)
{
if (cropOrganisms[i].latinName == currentLatinName)
{
retVal += '<option value="' + cropOrganisms[i].organismId + '"' + (cropOrganisms[i].organismId == preselect ? " selected=\"selected\"" : "") + '">' +
(currentLatinName == "Plantae" ? "Annet" : getLocalizedOrganismName(cropOrganisms[i], hardcodedLanguage))
+ '</option>';
}
}
}
retVal += '</select>';
return retVal;
}
var focusForm = function ()
{
var featureForm = document.getElementById("featureForm");
featureForm.style.display = "block";
}
var unFocusForm = function ()
{
var featureForm = document.getElementById("featureForm");
featureForm.style.display = "none";
// Also remove feature (if one) on the New feature overlay
newFeatureOverlay.getSource().clear();
}
var navigateTo = function (center)
{
var centerPosition = ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857');
view = new ol.View({
center: centerPosition,
zoom: 16
});
map.setView(view);
var searchResultsEl = document.getElementById("searchResults");
searchResultsEl.innerHTML = "";
searchResultsEl.style.display = "none";
};
/**
* Uses the client's geolocation information - displays it on the map
*/
function showLocation() {
if (navigator.geolocation) {
if (window.location.protocol === "http:")
{
navigator.geolocation.getCurrentPosition(function (geopositionObj) {
// TODO: position and display location icon
}
);
} else
{
if (confirm("Lokalisering fungerer bare over https (sikker tilkobling mellom nettleser og tjener). Klikk OK for å gå til sikker tilkobling."))
{
window.location = "https:" + window.location.href.substring(window.location.protocol.length);
}
}
} else {
alert("Lokaliseringsfunksjonen er ikke tilgjengelig i denne nettleseren.");
}
}
function navToLocation() {
if (navigator.geolocation) {
if (window.location.protocol === "https:")
{
navigator.geolocation.getCurrentPosition(function (geopositionObj) {
navigateTo([geopositionObj.coords.longitude, geopositionObj.coords.latitude]);
}
);
} else
{
if (confirm("Lokalisering fungerer bare over https (sikker tilkobling mellom nettleser og tjener). Klikk OK for å gå til sikker tilkobling."))
{
window.location = "https:" + window.location.href.substring(window.location.protocol.length);
}
}
} else {
alert("Lokaliseringsfunksjonen er ikke tilgjengelig i denne nettleseren.");
}
}
/**
*
* @param {type} selectedSeason
* @returns {undefined}
*/
function initSeasonSelectList(selectedSeason)
{
// What's the current year?
var thisYear = new Date().getFullYear();
// How many years do we go back?
$.ajax({
url: "/rest/observation/first/" + phytophthora.organismId
})
.done(function (data) {
var time = moment(data);
var firstYear = time.toDate().getFullYear();
// Loop gjennom år, lag valgliste :-)
var startSeasonList = document.getElementById("startSeason");
for (var i = firstYear; i <= thisYear; i++)
{
var yearOpt = new Option("", i);
yearOpt.innerHTML = i + " &rarr;"
if (i == selectedSeason)
{
yearOpt.selected = true;
}
startSeasonList.options[startSeasonList.options.length] = yearOpt;
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
if(jqXHR.status==404)
{
alert("Could not find any observations of organism with id=" + phytophthora.organismId);
document.getElementById("startSeason").options[0] = new Option("" + thisYear, thisYear);
}
else
{
alert(textStatus + ": " + errorThrown);
}
});
}
src/main/webapp/map_applications/phytophthora/report.html 0 → 100755
+ 360
− 0
View file @ 73bb377a
<!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;
}
#headingBox {
position: absolute;
bottom: auto;
top: 1em;
left: 10px;
border: 1px solid black;
z-index: 1999;
padding: 10px;
opacity: 0.85;
}
#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>
<div id="headingBox">
<h1>Rapportering pr fylke</h1>
<p>Velg fylke i lista nedenfor. Vær tålmodig, <br/>det tar noen sekunder før utvalget er ferdig generert.</p>
</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