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

Added report text. Geolocaiton tracking enabled on main page

parent 52d19998
No related branches found
No related tags found
No related merge requests found
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
<div id="map" class="map"> <div id="map" class="map">
<div class="geo-location ol-unselectable ol-control"> <div class="geo-location ol-unselectable ol-control">
<button onclick="navToLocation();" title="Finn min posisjon"></button> <button onclick="toggleTracking(this);" title="Vis min posisjon er AV"></button>
</div> </div>
<div id="registerButton" class="ol-unselectable ol-control"> <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> <button type="button" onclick="toggleRegistration(this);" title="Registrering er AV"><i class="fa fa-pencil" aria-hidden="true"></i></button>
......
...@@ -6,7 +6,7 @@ var hardcodedLanguage = "nb"; ...@@ -6,7 +6,7 @@ var hardcodedLanguage = "nb";
// If false, touching map will not create a new item // If false, touching map will not create a new item
var registration = false; var registration = false;
var geolocation;
function initMap() function initMap()
{ {
...@@ -19,7 +19,7 @@ var styles = { ...@@ -19,7 +19,7 @@ var styles = {
'cotoneaster bullatus': [new ol.style.Style({ 'cotoneaster bullatus': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [255,0,0,1] }), fill: new ol.style.Fill({ color: [255,0,0,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})], })],
...@@ -27,7 +27,7 @@ var styles = { ...@@ -27,7 +27,7 @@ var styles = {
'cotoneaster divaricata': [new ol.style.Style({ 'cotoneaster divaricata': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [239,133,19,1] }), fill: new ol.style.Fill({ color: [239,133,19,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})], })],
...@@ -35,7 +35,7 @@ var styles = { ...@@ -35,7 +35,7 @@ var styles = {
'cotoneaster salicifolia': [new ol.style.Style({ 'cotoneaster salicifolia': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [239,236,19,1] }), fill: new ol.style.Fill({ color: [239,236,19,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})], })],
...@@ -43,7 +43,7 @@ var styles = { ...@@ -43,7 +43,7 @@ var styles = {
'malus domestica': [new ol.style.Style({ 'malus domestica': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0,255,0,1] }), fill: new ol.style.Fill({ color: [0,255,0,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({ width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})], })],
...@@ -51,18 +51,19 @@ var styles = { ...@@ -51,18 +51,19 @@ var styles = {
'pyrus communis': [new ol.style.Style({ 'pyrus communis': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [122,175,131,1] }), fill: new ol.style.Fill({ color: [122,175,131,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})], })],
// Planteriket = blå // Planteriket = blå
'plantae': [new ol.style.Style({ 'plantae': [new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0,0,255,1] }), fill: new ol.style.Fill({ color: [0,0,255,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }), stroke: new ol.style.Stroke({ width: 1, color: [0,0,0,1] }),
radius: iconRadius radius: iconRadius
}) })
})] })
]
}; };
featureOverlay = new ol.layer.Vector({ featureOverlay = new ol.layer.Vector({
...@@ -70,14 +71,43 @@ var styles = { ...@@ -70,14 +71,43 @@ var styles = {
features: features features: features
}), }),
style: function(feature, resolution){ style: function(feature, resolution){
// Site that has been cleared is all black
var observationData = JSON.parse(feature.get("observationData"));
if(observationData["tiltak"] == "Ryddet")
{
return [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0,0,0,1] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }),
radius: iconRadius
})
})];
}
var retVal = null;
if(feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != null) if(feature.get("cropOrganism") != null && feature.get("cropOrganism")["latinName"] != null)
{ {
return styles[feature.get("cropOrganism")["latinName"].toLowerCase()]; retVal = styles[feature.get("cropOrganism")["latinName"].toLowerCase()];
} }
else else
{ {
return styles["plantae"]; retVal = styles["plantae"];
} }
//console.info(retVal[0].getImage().getStroke().getWidth());
// If symptom has been registered, mark with inner black dot
if(observationData["symptom"] == "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;
} }
}); });
...@@ -128,6 +158,41 @@ var styles = { ...@@ -128,6 +158,41 @@ var styles = {
}) })
}); });
// 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 // TODO feature properties must be synchronized
var lastYear = new Date().getFullYear() - 1; var lastYear = new Date().getFullYear() - 1;
// Population the season select list, setting last year as default selected // Population the season select list, setting last year as default selected
...@@ -145,7 +210,7 @@ var styles = { ...@@ -145,7 +210,7 @@ var styles = {
// Remove any new features already created // Remove any new features already created
vectorSource.clear(); vectorSource.clear();
if (feature) { if (feature && feature.getProperties()["observationId"] != undefined) {
// Create a fake icon for highlighting // Create a fake icon for highlighting
var fakeFeature = createFeature(feature.getGeometry().getCoordinates()); var fakeFeature = createFeature(feature.getGeometry().getCoordinates());
vectorSource.addFeature(fakeFeature); vectorSource.addFeature(fakeFeature);
...@@ -251,6 +316,13 @@ function toggleRegistration(theButton) ...@@ -251,6 +316,13 @@ function toggleRegistration(theButton)
registration = ! registration; 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 * Creates a new feature
* @param {type} coordinate * @param {type} coordinate
...@@ -578,6 +650,30 @@ var navigateTo = function(center) ...@@ -578,6 +650,30 @@ var navigateTo = function(center)
searchResultsEl.style.display="none"; 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() { function navToLocation() {
if (navigator.geolocation) { if (navigator.geolocation) {
if(window.location.protocol === "https:") if(window.location.protocol === "https:")
......
...@@ -127,6 +127,17 @@ ...@@ -127,6 +127,17 @@
left: 10px; left: 10px;
z-index: 1999; 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 { #legend {
position: absolute; position: absolute;
...@@ -241,32 +252,13 @@ ...@@ -241,32 +252,13 @@
<body> <body>
<div id="map" class="map"> <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>
<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="featureForm"></div>
<div id="seasons"> <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 name="startSeason" id="startSeason" onchange="getAndRenderObservationsForReport(this.options[this.options.selectedIndex].value, document.getElementById('countyId').options[document.getElementById('countyId').options.selectedIndex].value);">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment