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
Expand all 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
This diff is collapsed.
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