Skip to content
Snippets Groups Projects
Commit 8781f9d3 authored by vil's avatar vil
Browse files

Changed geolocation functionality and added clear-one button

parent b6dbb2b6
No related branches found
No related tags found
No related merge requests found
......@@ -35,7 +35,6 @@
rgba(255, 255, 255, 0.4);
z-index:100;
}
#layerswitcher {
margin:0;
padding:10px;
......@@ -43,4 +42,44 @@
background:rgba(0, 60, 136, 0.5);
list-style-type:none;
}
.geo-location {
position: absolute;
top: 4.5em;
left: 0.5em;
text-align: left;
}
.geo-location .panel {
padding-right: 50px;
border: 1px solid #cccccc;
background-color: white;
margin: 0;
display: none;
}
.geo-location.shown .panel {
display: block;
}
.geo-location button {
float: right;
width: 38px;
height: 38px;
background-image: url('../images/geoloc3.png');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 1px;
background-color: white;
border: none;
}
.geo-location button:focus, .geo-location button:hover {
background-color: white;
}
.clearOneActive {
background-color: #009933 !important;
color: white;
}
src/main/webapp/images/geoloc2.png

1.23 KiB

src/main/webapp/images/geoloc3.png

1.41 KiB

......@@ -70,14 +70,17 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
}
})
});
//-----------------Get maplayers you can choose from-----------------------------
//########################Get maplayers you can choose from########################
//var layersObj = eval ("(" + chooseLayersObj + ")");
var allLayers = [osm, bingArial, topo2graatone] ;
var chooseLayers = [];
var choosenLayer;
var hoverAttribute = '';
var deleteObj = false;
var typeSelect = document.getElementById('type');
......@@ -104,11 +107,70 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
}
allLayers.push.apply(allLayers, chooseLayers);
window.app = {};
var app = window.app;
//
// Define rotate to north control.
//
/**
* @constructor
* @extends {ol.control.Control}
* @param {Object=} opt_options Control options.
*/
app.geoLocationControl = function(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
//button.innerHTML = 'O';
button.title = 'Show me where I am'
var this_ = this;
var handleGeoLocation = function(e) {
/*if (geolocation.getTracking()){
geolocation.setTracking(false);
geoOverlay.getSource().clear(true);
} else {*/
removeMouseOver();
geolocation.setTracking(true);
//}
};
button.addEventListener('click', handleGeoLocation, false);
button.addEventListener('touchstart', handleGeoLocation, false);
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control geo-location';
element.appendChild(button);
ol.control.Control.call(this, {
element: element,
target: options.target
});
};
ol.inherits(app.geoLocationControl, ol.control.Control);
// Creating the map
map = new ol.Map({
target: 'observationFormMap',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: true
})
}).extend([
new app.geoLocationControl()
]),
layers: allLayers,
renderer: 'canvas'
});
......@@ -179,9 +241,16 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
})
});
function computeFeatureStyle(feature, resolution) {
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.5)'
})
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.2)'
}),
......@@ -213,7 +282,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
style: computeFeatureStyle
});
mouseOverlay.setMap(map);
if (drawnObjs) { // Get drawn objs param from initMap
var format = new ol.format.GeoJSON();
......@@ -226,6 +295,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
}
featureOverlay.setMap(map);
mouseOverlay.setMap(map);
var modify = new ol.interaction.Modify({
features: features,
......@@ -248,15 +318,31 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
map.addInteraction(draw);
}
var pointerMoveId;
function removeMouseOver(){
map.unByKey(pointerMoveId);
mouseOverlay.getSource().clear(true);
}
function chooseFromLayer(chooseLayer) {
map.removeInteraction(draw);
chooseLayer.setVisible(true);
//map.addInteraction(selectInteraction);
map.removeInteraction(draw);
map.removeInteraction(modify);
chooseLayer.setVisible(true);
var clickInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
featureOverlay.getSource().addFeature(feature);
map.forEachFeatureAtPixel(pixel, function(feature) {
if (deleteObj){
featureOverlay.getSource().removeFeature(feature);
setTimeout(function() { //wait until feature is removed
mouseOverlay.getSource().clear(true);
}, 100);
}else {
featureOverlay.getSource().addFeature(feature);
}
});
};
......@@ -267,13 +353,13 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
var mouseInfo = function(pixel) {
var features = [];
mouseOverlay.getSource().clear(true);
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
mouseOverlay.getSource().clear(true);
mouseOverlay.getSource().addFeature(feature);
});
};
map.on('pointermove', function(evt) {
pointerMoveId = map.on('pointermove', function(evt) {
var pixel = evt.pixel;
mouseInfo(pixel);
});
......@@ -287,6 +373,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
deleteObj = false;
for (i = 0; i < chooseLayers.length; i++) {
if (parseInt(e.target.value) === chooseLayers[i].getProperties().id) {
......@@ -300,7 +387,8 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
}
if (e.target.value === 'Point' || e.target.value === 'Polygon'){
map.addInteraction(modify);
addDrawInteraction();
addDrawInteraction();
removeMouseOver();
}
};
......@@ -308,9 +396,10 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
$('#save-button').click(function() {
/* $('#save-button').click(function() {
// get the features drawn on the map
var features = featureOverlay.getSource().getFeatures();
var features = null;
features = featureOverlay.getSource().getFeatures();
var format = new ol.format.GeoJSON();
// write features to GeoJSON format using projection EPSG:4326
......@@ -320,7 +409,9 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
});
alert(result);
});
});*/
......@@ -334,8 +425,41 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
// clears the map and the output of the data
function clearMap() {
featureOverlay.getSource().clear(true);
geoOverlay.getSource().clear(true);
//geolocation.setTracking(false);
}
$('#deleteOne').click(function() {
deleteObj = !deleteObj; // toggle
if (deleteObj){
$('#deleteOne').addClass('clearOneActive');
chooseFromLayer(featureOverlay);
//map.removeInteraction(modify);
//map.removeInteraction(draw);
} else {
$('#deleteOne').removeClass('clearOneActive');
removeMouseOver();
mouseOverlay.getSource().clear(true);
addDrawInteraction();
}
});
function removeFeature(featureID) {
var features = featureOverlay.getSource().getFeatures();
if (features != null && features.length > 0) {
for (x in features) {
var id = features[x].getProperties().id;
if (id == featureID) {
featureOverlay.getSource().removeFeature(features[x]);
geoOverlay.getSource().clear(true);
break;
}
}
}
}
// creates unique id's
function uid() {
var id = 0;
......@@ -350,6 +474,45 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
//######################## GEOLOCATION #############
var geoPosStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 0.5)',
width: 2
}),
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [13, 13],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 1,
src: 'images/geoloc2.png'
}))
});
var geoFeatures = new ol.Collection();
geoOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: geoFeatures
}),
style: geoPosStyle
});
geoOverlay.setMap(map);
/* var element = document.createElement('div');
element.className = 'ol-unselectable ol-control geo-location';
var button = document.createElement('button');
button.setAttribute('title', tipLabel);
element.appendChild(button);
*/
var geolocation = new ol.Geolocation({
projection: view.getProjection()
});
......@@ -358,35 +521,62 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
return document.getElementById(id);
}
el('track').addEventListener('change', function() {
geolocation.setTracking(this.checked);
$('#type').val('Point');
for (i = 0; i < chooseLayers.length; i++) {
chooseLayers[i].setVisible(false);
}
});
// handle geolocation error.
geolocation.on('error', function(error) {
alert(error.message);
});
function showalert(message,alerttype) {
$('#alert_placeholder').append('<div id="alertdiv" class="alert alert-danger fade in"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
setTimeout(function() { // this will automatically close the alert and remove this if the users doesnt close it in 5 secs
$("#alertdiv").remove();
}, 5000);
}
geolocation.on('change:position', function() {
removeFeature('geoLoc');
var coordinates = geolocation.getPosition();
var accuracy = geolocation.getAccuracy();
if(accuracy > 500){
showalert('Geolocation accuracy (blue circle) is larger than 500, accuracy now: '+accuracy,'alert-error')
}
var geoExtent = [
coordinates[0] - accuracy - 100,
coordinates[1] - accuracy - 100,
coordinates[0] + accuracy + 100,
coordinates[1] + accuracy + 100
];
var posFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinates)
geometry: new ol.geom.Point(coordinates),
});
posFeature.set('id', 'geoLoc');
featureOverlay.getSource().addFeature(posFeature);
geoOverlay.getSource().addFeature(posFeature);
var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function() {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});
geoOverlay.getSource().addFeature(accuracyFeature);
var numFeatures = featureOverlay.getSource().getFeatures().length;
if (numFeatures > 1) { //Zoom to all features
var extent = featureOverlay.getSource().getExtent();
map.getView().fit(extent, map.getSize());
} else if (geoExtent) { //Zoom to accuracy circle
map.getView().fit(geoExtent, map.getSize());
} else { //Zoom to geolocation
map.getView().setCenter(coordinates);
map.getView().setZoom(15);
......@@ -395,18 +585,19 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
map.addInteraction(modify);
addDrawInteraction();
});
geolocation.setTracking(false);
});
/*function updateLocationPosition(coordinate) {
var locationPosition = ol.coordinate.toStringXY(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'), 8);
//var locationPosition = ol.coordinate.toStringXY(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'), 8);
// Set/move location pin
marker.setPosition(coordinate);
// Update form field "location"
var locationEl = document.getElementById("location");
locationEl.setAttribute("value", locationPosition);
//var locationEl = document.getElementById("location");
//locationEl.setAttribute("value", locationPosition);
// Adding a little animation
$("#location").animate({
borderWidth: "4"
......
......@@ -135,12 +135,11 @@
<option value="Polygon">Polygon</option>
</select>
<button id="delete" type="button">Clear all</button>
<button id="deleteOne" type="button">Clear one</button>
</div>
<div id="observationFormMap" class="map">
</div>
<label class="checkbox" for="track">
<input id="track" type="checkbox"/>Show me where I am
</label>
<div id="alert_placeholder"></div>
</div>
</div>
<div style="display: none;"><div id="marker" title="Marker"><img src="/images/bug_medium.png"/></div></div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment