diff --git a/src/main/webapp/js/observationFormMap.js b/src/main/webapp/js/observationFormMap.js
index 25950517732329447eb54d2d8e02490303ac857e..8a21acfc64f7932a8065df235407c98e5f940094 100755
--- a/src/main/webapp/js/observationFormMap.js
+++ b/src/main/webapp/js/observationFormMap.js
@@ -21,7 +21,7 @@
* Logic for registering location of an observation using an OpenLayers v3 map
*/
-var featureOverlay;
+var featureOverlay, map;
/**
*
@@ -31,7 +31,7 @@ var featureOverlay;
* @param {string} drawnObjs - GeoJSON with geometries to display
* @returns {void}
*/
-function initMap(center, zoomLevel, displayMarker, drawnObjs) {
+function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersJson) {
var osm = new ol.layer.Tile({
@@ -58,7 +58,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
});
- var topo2graatone = new ol.layer.Tile({
+ var topo2graatone = new ol.layer.Tile({
title: "Gråtone",
type: 'base',
visible: false,
@@ -70,50 +70,44 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
}
})
});
-
- var fylke_layer = new ol.layer.Vector({
- title: 'Fylkesgrenser',
- type: 'overlay',
- visible: false,
- source: new ol.source.Vector({
- projection: 'EPSG:3857',
- format: new ol.format.GeoJSON(),
- url: 'http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n5_forv_fylke_mv&'
- }),
- style: new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'rgba(0, 0, 255, 1.0)',
- width: 3
- })
- })
- });
- var kommune_layer = new ol.layer.Vector({
- title: 'Kommunegrenser',
- type: 'overlay',
- visible: false,
- source: new ol.source.Vector({
- projection: 'EPSG:3857',
- format: new ol.format.GeoJSON(),
- url: 'http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n2000_komm_flate&'
- }),
- style: new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'rgba(255, 0, 0, 1.0)',
- width: 1
- })
- })
- });
+
+ //-----------------Get maplayers you can choose from-----------------------------
+
+ var layersObj = eval ("(" + chooseLayersJson + ")");
+ var allLayers = [osm, bingArial, topo2graatone] ;
+ var chooseLayers = [];
+ var choosenLayer;
+ var hoverAttribute = '';
+
+ if (layersObj.chooseFromMapLayers.length > 0){
+ for (i = 0; i < layersObj.chooseFromMapLayers.length; i++) {
+ var layer = layersObj.chooseFromMapLayers[i];
+ chooseLayers.push(new ol.layer.Vector({
+ id: layer.id,
+ title: layer.title,
+ type: layer.type,
+ visible: layer.visible,
+ hoverAttribute:layer.hoverAttribute,
+ source: new ol.source.Vector({
+ projection: layer.projection,
+ format: new ol.format.GeoJSON(),
+ url: layer.url
+ })
+ }));
+ }
+ }
+ allLayers.push.apply(allLayers, chooseLayers);
+
// Creating the map
- var map = new ol.Map({
+ map = new ol.Map({
target: 'observationFormMap',
- //layers: layers,
- layers: [osm, bingArial, topo2graatone, fylke_layer, kommune_layer],
+ layers: allLayers,
renderer: 'canvas'
});
- var centerPosition = ol.proj.transform(center, 'EPSG:4326', map.getView().getProjection().getCode());
+ var centerPosition = ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857');
// Setting zoom and center for the map (need to do this after creating map. so that we kan transform our
// center to correct map projection)
@@ -124,6 +118,9 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
map.setView(view);
+
+
+
// Marker overlay
var marker = new ol.Overlay({
position: displayMarker ? centerPosition : undefined,
@@ -143,14 +140,10 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
map.addControl(mousePositionControl);
var layerSwitcher = new ol.control.LayerSwitcher({
- tipLabel: 'Légende' // Optional label for button
+ tipLabel: 'Layerswitcher' // Optional label for button
});
map.addControl(layerSwitcher);
- // Listening for single clicks, position observation pin and updating form element
- /*map.on(['singleclick'], function(evt) {
- updateLocationPosition(evt.coordinate);
- });*/
//###################### DRAWING ########################################
// make interactions global so they can later be removed
@@ -180,11 +173,47 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
})
});
- if (drawnObjs){ // Get drawn objs param from initMap
+
+ function computeFeatureStyle(feature, resolution) {
+ return [new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: 'rgba(0, 0, 255, 0.2)'
+ }),
+ stroke: new ol.style.Stroke({
+ color: 'rgba(0, 0, 255, 0.8)',
+ width: 1
+ }),
+ text: new ol.style.Text({
+ font: '12px helvetica,sans-serif',
+ text: feature.get(hoverAttribute),
+ //rotation: 360 * rnd * Math.PI / 180,
+ fill: new ol.style.Fill({
+ color: '#000'
+ }),
+ stroke: new ol.style.Stroke({
+ color: '#fff',
+ width: 2
+ })
+ })
+ })];
+ }
+
+
+ var mouseFeatures = new ol.Collection();
+ mouseOverlay = new ol.layer.Vector({
+ source: new ol.source.Vector({
+ features: mouseFeatures
+ }),
+ style: computeFeatureStyle
+ });
+
+ mouseOverlay.setMap(map);
+
+ if (drawnObjs) { // Get drawn objs param from initMap
var format = new ol.format.GeoJSON();
var drawnfeatures = format.readFeatures(drawnObjs, {
dataProjection: 'EPSG:4326',
- featureProjection: 'EPSG:3857'
+ featureProjection: map.getView().getProjection().getCode()
});
//featureOverlay.clear(true);
featureOverlay.getSource().addFeatures(drawnfeatures);
@@ -202,10 +231,10 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
ol.events.condition.singleClick(event);
}
});
- map.addInteraction(modify);
+
var draw; // global so we can remove it later
- function addInteraction() {
+ function addDrawInteraction() {
draw = new ol.interaction.Draw({
features: features,
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
@@ -213,6 +242,39 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
map.addInteraction(draw);
}
+
+ function chooseFromLayer(chooseLayer) {
+ map.removeInteraction(draw);
+ chooseLayer.setVisible(true);
+ //map.addInteraction(selectInteraction);
+ var clickInfo = function(pixel) {
+ var features = [];
+ map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+ featureOverlay.getSource().addFeature(feature);
+ });
+ };
+
+ map.on('click', function(evt) {
+ var pixel = evt.pixel;
+ clickInfo(pixel);
+ });
+
+ var mouseInfo = function(pixel) {
+ var features = [];
+ map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+ mouseOverlay.getSource().clear(true);
+ mouseOverlay.getSource().addFeature(feature);
+ });
+ };
+
+ map.on('pointermove', function(evt) {
+ var pixel = evt.pixel;
+ mouseInfo(pixel);
+ });
+ }
+
+
+
var typeSelect = document.getElementById('type');
@@ -222,34 +284,39 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
- addInteraction();
+
+ for (i = 0; i < chooseLayers.length; i++) {
+ if (e.target.value === chooseLayers[i].getProperties().id) {
+ choosenLayer = chooseLayers[i];
+ hoverAttribute = choosenLayer.getProperties().hoverAttribute;
+ choosenLayer.setVisible(true);
+ chooseFromLayer(choosenLayer);
+ } else {
+ chooseLayers[i].setVisible(false);
+ }
+ }
+ if (e.target.value === 'Point' || e.target.value === 'Polygon'){
+ map.addInteraction(modify);
+ addDrawInteraction();
+ }
};
- addInteraction();
+ addDrawInteraction();
$('#save-button').click(function() {
// get the features drawn on the map
var features = featureOverlay.getSource().getFeatures();
- // create an object to write features on a output KML file
-
- //var desimalDegrees = features[0].getGeometry().clone().transform('EPSG:4326','EPSG:3857').getCoordinates();
-//debugger;
-
var format = new ol.format.GeoJSON();
// write features to GeoJSON format using projection EPSG:4326
var result = format.writeFeatures(features, {
dataProjection: 'EPSG:4326',
- featureProjection: 'EPSG:3857'
+ featureProjection: map.getView().getProjection().getCode()
});
alert(result);
- clearMap();
- //var str = (new XMLSerializer).serializeToString(kml);
- //var blob = new Blob([str], {type: "text/plain;charset=utf-8;"});
- //saveAs(blob, "NovaCamada.kml");
});
@@ -290,55 +357,47 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
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);
- /*var info = document.getElementById('info');
- info.innerHTML = error.message;
- info.style.display = '';*/
});
- var accuracyFeature = new ol.Feature();
- geolocation.on('change:accuracyGeometry', function() {
- accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
- });
- 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();
- updateLocationPosition(coordinates);
- positionFeature.setGeometry(coordinates ?
- new ol.geom.Point(coordinates) : null);
- });
- var featuresOverlay = new ol.layer.Vector({
- map: map,
- source: new ol.source.Vector({
- features: [accuracyFeature, positionFeature]
- })
- });
+ var posFeature = new ol.Feature({
+ geometry: new ol.geom.Point(coordinates)
+ });
+
+ featureOverlay.getSource().addFeature(posFeature);
+
+ 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 { //Zoom to geolocation
+ map.getView().setCenter(coordinates);
+ map.getView().setZoom(15);
+ }
+ map.addInteraction(modify);
+ addDrawInteraction();
+ });
+
- function updateLocationPosition(coordinate) {
+ /*function updateLocationPosition(coordinate) {
var locationPosition = ol.coordinate.toStringXY(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'), 8);
// Set/move location pin
marker.setPosition(coordinate);
@@ -353,24 +412,18 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs) {
borderWidth: "1"
}, 500, function() {});
});
- }
+ }*/
}
-function getFeatures()
-{
- var features = featureOverlay.getSource().getFeatures();
- // create an object to write features on a output KML file
-
- //var desimalDegrees = features[0].getGeometry().clone().transform('EPSG:4326','EPSG:3857').getCoordinates();
-//debugger;
+function getFeatures() {
+ var features = featureOverlay.getSource().getFeatures();
+ var format = new ol.format.GeoJSON();
+ // write features to GeoJSON format using projection EPSG:4326
- var format = new ol.format.GeoJSON();
- // write features to GeoJSON format using projection EPSG:4326
+ var result = format.writeFeatures(features, {
+ dataProjection: 'EPSG:4326',
+ featureProjection: map.getView().getProjection().getCode()
+ });
- var result = format.writeFeatures(features, {
- dataProjection: 'EPSG:4326',
- featureProjection: 'EPSG:3857'
- });
-
- return result;
+ return result;
}
\ No newline at end of file
diff --git a/src/main/webapp/templates/observationForm.ftl b/src/main/webapp/templates/observationForm.ftl
index 1628384a12506bce5e971ebdcd2cac016800c795..939f31024bece3e9bc26dd8c522bc9b1bbf54a37 100755
--- a/src/main/webapp/templates/observationForm.ftl
+++ b/src/main/webapp/templates/observationForm.ftl
@@ -56,7 +56,8 @@
initMap([${(observation.location.x?c)!""},${(observation.location.y?c)!""}],10,true);
<#else>
var geoInfo = <#if observation.geoinfo?has_content>${observation.geoinfo}<#else>{}</#if>;
- initMap([${defaultMapCenter.x?c},${defaultMapCenter.y?c}],${defaultMapZoom},false, geoInfo);
+ var chooseFromMapLayers = '{"chooseFromMapLayers": [{"id": "Kommune","title": "Kommunegrenser","type": "overlay","visible": false,"hoverAttribute":"navn","url": "http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n2000_komm_flate&"},{"id": "Fylke","title": "Fylkesgrenser","type": "overlay","visible": false,"hoverAttribute":"","url": "http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n5_forv_fylke_mv&"}]}';
+ initMap([${defaultMapCenter.x?c},${defaultMapCenter.y?c}],${defaultMapZoom},false, geoInfo, chooseFromMapLayers);
</#if>
});
</script>