Added draw, geolocation and municipalityborders to the map

src/main/webapp/js/observationFormMap.js

 /*
- * Copyright (c) 2014 NIBIO <http://www.nibio.no/>. 
- * 
+ * Copyright (c) 2014 NIBIO <http://www.nibio.no/>.
+ *
  * This file is part of VIPSLogic.
  * VIPSLogic is free software: you can redistribute it and/or modify
- * it under the terms of the NIBIO Open Source License as published by 
+ * it under the terms of the NIBIO Open Source License as published by
  * NIBIO, either version 1 of the License, or (at your option) any
  * later version.
- * 
+ *
  * VIPSLogic 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
  * NIBIO Open Source License for more details.
- * 
+ *
  * You should have received a copy of the NIBIO Open Source License
  * along with VIPSLogic.  If not, see <http://www.nibio.no/licenses/>.
- * 
+ *
  */
 
 /**
@@ -22,83 +22,404 @@
  */
 
 /**
- * 
+ *
  * @param {ol.Coordinate} center - coordinates for the map's center (WGS84)
  * @param {int} zoomLevel - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
  * @param {boolean} displayMarker - show observation marker in center location
  * @returns {void}
  */
-function initMap(center, zoomLevel, displayMarker)
-{
-    // Background layer is OpenStreetMap
-    var backgroundLayer = new ol.layer.Tile({
-                    source: new ol.source.OSM({
-                        attributions: [
-                            new ol.Attribution({
-                              html: mapConstants.MAP_ATTRIBUTION
-                            })
-                          ]
-                    })
-    });
-    
-    
-
-    
-    // Creating the map
-    var map = new ol.Map({
-                    target: 'observationFormMap',
-                    layers: [backgroundLayer],
-                    renderer: 'canvas'
-    });
-    
-    var centerPosition = ol.proj.transform(center, 'EPSG:4326', map.getView().getProjection().getCode());
-
-    // 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)
-    var view = new ol.View({
-            center: centerPosition,
-            zoom:zoomLevel
-    });
-    map.setView(view);
-    
-    // Marker overlay
-    var marker = new ol.Overlay({
-      position: displayMarker ? centerPosition : undefined,
-      positioning: 'center-center',
-      element: document.getElementById('marker'),
-      stopEvent: false
-    });
 
-    map.addOverlay(marker);
-    
-    // Adding the mouse position control
-    var mousePositionControl = new ol.control.MousePosition({
-		  coordinateFormat: ol.coordinate.createStringXY(8),
-		  projection: 'EPSG:4326',
-		  undefinedHTML: '&nbsp;'
-		});
-    map.addControl(mousePositionControl);
-    
-    // Listening for single clicks, position observation pin and updating form element
-    map.on(['singleclick'], function(evt) {
-        updateLocationPosition(evt.coordinate);
-    });
-    
-    
-    
-    function updateLocationPosition(coordinate)
-    {
-        var locationPosition = ol.coordinate.toStringXY(ol.proj.transform(coordinate, map.getView().getProjection().getCode(), 'EPSG:4326'),8);
-        // Set/move location pin
-        marker.setPosition(coordinate);
-        // Update form field "location"
-        var locationEl = document.getElementById("location");
-        locationEl.setAttribute("value", locationPosition);
-        // Adding a little animation
-        $("#location").animate({borderWidth: "4"},500, function(){
-            $("#location").animate({borderWidth: "1"},500, function(){});
+function initMap(center, zoomLevel, displayMarker) {
+
+
+       var osm =  new ol.layer.Tile({
+          'title': 'OSM',
+          type: 'base',
+          visible: true,
+          source: new ol.source.OSM({
+            attributions: [
+              new ol.Attribution({
+                html: mapConstants.MAP_ATTRIBUTION
+              })
+            ]
+          })
         });
-    }
-    
+
+       var bingArial =  new ol.layer.Tile({
+          title: 'Bing Arial',
+          type: 'base',
+          visible: false,
+          source: new ol.source.BingMaps({
+            imagerySet: 'Aerial',
+            key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+          })
+        });
+
+       var fylke_layer = new ol.layer.Vector({
+          title: 'Fylkesgrenser',
+          type: 'overlay',
+          visible: false,
+          source: new ol.source.GeoJSON({
+            projection: 'EPSG:3857',
+            url: '/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.GeoJSON({
+            projection: 'EPSG:3857',
+            url: '/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
+            })
+          })
+        });
+
+
+ /* var vector_layer = new ol.layer.Vector({
+    title: 'Tegnelayer',
+    type: 'overlay',
+    visible: true,
+    name: 'my_vectorlayer',
+    source: new ol.source.Vector(),
+    style: new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: 'rgba(255, 00, 255, 0.2)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: '#ff00ff',
+        width: 2
+      }),
+      image: new ol.style.Circle({
+        radius: 7,
+        fill: new ol.style.Fill({
+          color: '#ff00ff'
+        })
+      })
+    })
+  });
+
+
+  function switchLayer() {
+    var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
+    for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i == checkedLayer);
+  }
+
+  $(function() {
+    switchLayer()
+  });
+  $("#layerswitcher input[name=layer]").change(function() {
+    switchLayer()
+  });
+
+  /*var layers = [
+
+    new ol.layer.Group({
+      'title': 'Bakgrunnskart',
+      layers: [
+        new ol.layer.Tile({
+          title: 'Bing Arial',
+          type: 'base',
+          visible: false,
+          source: new ol.source.BingMaps({
+            imagerySet: 'Aerial',
+            key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+          })
+        }),
+        new ol.layer.Tile({
+          'title': 'OSM',
+          type: 'base',
+          visible: true,
+          source: new ol.source.OSM({
+            attributions: [
+              new ol.Attribution({
+                html: mapConstants.MAP_ATTRIBUTION
+              })
+            ]
+          })
+        })
+      ]
+    }),
+    new ol.layer.Group({
+      title: 'Kartlag',
+      layers: [
+
+        new ol.layer.Vector({
+          title: 'Fylkesgrenser',
+          type: 'overlay',
+          visible: false,
+          source: new ol.source.GeoJSON({
+            projection: 'EPSG:3857',
+            url: '/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
+            })
+          })
+        }),
+        new ol.layer.Vector({
+          title: 'Kommunegrenser',
+          type: 'overlay',
+          visible: false,
+          source: new ol.source.GeoJSON({
+            projection: 'EPSG:3857',
+            url: '/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
+            })
+          })
+        }),
+        vector_layer
+      ]
+    })
+  ];*/
+
+  // Creating the map
+  var map = new ol.Map({
+    target: 'observationFormMap',
+    //layers: layers,
+    layers: [osm,bingArial,fylke_layer,kommune_layer],
+    renderer: 'canvas'
+  });
+
+  var centerPosition = ol.proj.transform(center, 'EPSG:4326', map.getView().getProjection().getCode());
+
+  // 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)
+  view = new ol.View({
+    center: centerPosition,
+    zoom: zoomLevel
+  });
+
+  map.setView(view);
+
+  // Marker overlay
+  var marker = new ol.Overlay({
+    position: displayMarker ? centerPosition : undefined,
+    positioning: 'center-center',
+    element: document.getElementById('marker'),
+    stopEvent: false
+  });
+
+  map.addOverlay(marker);
+
+  // Adding the mouse position control
+  var mousePositionControl = new ol.control.MousePosition({
+    coordinateFormat: ol.coordinate.createStringXY(8),
+    projection: 'EPSG:4326',
+    undefinedHTML: '&nbsp;'
+  });
+  map.addControl(mousePositionControl);
+
+  var layerSwitcher = new ol.control.LayerSwitcher({
+    tipLabel: 'Légende' // 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
+  // The features are not added to a regular vector layer/source,
+// but to a feature overlay which holds a collection of features.
+// This collection is passed to the modify and also the draw
+// interaction, so that both can add or modify features.
+var featureOverlay = new ol.FeatureOverlay({
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 0, 255, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#ff00ff',
+      width: 2
+    }),
+    image: new ol.style.Circle({
+      radius: 7,
+      fill: new ol.style.Fill({
+        color: '#ff00ff'
+      })
+    })
+  })
+});
+featureOverlay.setMap(map);
+
+var modify = new ol.interaction.Modify({
+  features: featureOverlay.getFeatures(),
+  // the SHIFT key must be pressed to delete vertices, so
+  // that new vertices can be drawn at the same position
+  // of existing vertices
+  deleteCondition: function(event) {
+    return ol.events.condition.shiftKeyOnly(event) &&
+        ol.events.condition.singleClick(event);
+  }
+});
+map.addInteraction(modify);
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  draw = new ol.interaction.Draw({
+    features: featureOverlay.getFeatures(),
+    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+  });
+  map.addInteraction(draw);
 }
 
+var typeSelect = document.getElementById('type');
+
+
+/**
+ * Let user change the geometry type.
+ * @param {Event} e Change event.
+ */
+typeSelect.onchange = function(e) {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();
+
+
+
+$('#save-button').click(function() {
+    // get the features drawn on the map
+    var features = featureOverlay.getFeatures().getArray();
+    // create an object to write features on a output KML file 
+    var format = new ol.format.GeoJSON(/*{
+      defaultDataProjection: 'EPSG:3857'
+    }*/);
+    // write features to GeoJSON format using projection EPSG:4326
+    var result = format.writeFeatures(features, {featureProjection: 'EPSG:4326'});
+
+    /*var desimalDegrees = format.readFeatures(result, {
+      dataProjection: 'EPSG:3857',
+      featureProjection: 'EPSG:4326'
+    });*/
+    //debugger;
+    // Save KML node as KML file using FileSaver.js script
+    alert(result);
+    clearMap();
+    //var str = (new XMLSerializer).serializeToString(kml);
+    //var blob = new Blob([str], {type: "text/plain;charset=utf-8;"});
+    //saveAs(blob, "NovaCamada.kml");
+});
+
+
+
+
+ 
+  // clear map when user clicks on 'Delete all features'
+  $("#delete").click(function() {
+    clearMap();
+  });
+
+  // clears the map and the output of the data
+  function clearMap() {
+    featureOverlay.getFeatures().clear();
+  }
+
+  // creates unique id's
+  function uid() {
+    var id = 0;
+    return function() {
+      if (arguments[0] === 0) {
+        id = 0;
+      }
+      return id++;
+    }
+  }
+
+//######################## GEOLOCATION  #############
+
+
+  var geolocation = new ol.Geolocation({
+    projection: view.getProjection()
+  });
+
+  var track = new ol.dom.Input(document.getElementById('track'));
+  track.bindTo('checked', geolocation, 'tracking');
+
+  // update the HTML page when the position changes.
+  geolocation.on('change', function() {
+    console.log('Geolocation change');
+     $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
+  $('#altitude').text(geolocation.getAltitude() + ' [m]');
+  $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
+  $('#heading').text(geolocation.getHeading() + ' [rad]');
+  $('#speed').text(geolocation.getSpeed() + ' [m/s]');
+  });
+
+  // handle geolocation error.
+  geolocation.on('error', function(error) {
+    var info = document.getElementById('info');
+    info.innerHTML = error.message;
+    info.style.display = '';
+  });
+
+  var accuracyFeature = new ol.Feature();
+  accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
+
+  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
+      })
+    })
+  }));
+
+
+ positionFeature.bindTo('geometry', geolocation, 'position')
+    .transform(function() {}, function(coordinates) {
+      updateLocationPosition(coordinates);
+      return coordinates ? new ol.geom.Point(coordinates) : null;
+    });
+
+  var featuresOverlay = new ol.FeatureOverlay({
+    map: map,
+    features: [accuracyFeature, positionFeature]
+  });
+
+
+
+
+  function updateLocationPosition(coordinate) {
+    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);
+    // Adding a little animation
+    $("#location").animate({
+      borderWidth: "4"
+    }, 500, function() {
+      $("#location").animate({
+        borderWidth: "1"
+      }, 500, function() {});
+    });
+  }
+}
\ No newline at end of file

src/main/webapp/templates/observationForm.ftl

@@ -122,8 +122,21 @@
 			</form>
 		</div>
 		<div class="col-md-6">
+		<div>
+      <label>What do you want to draw</label>
+        <select id="type">
+          <option value="Point">Point</option>
+          <option value="LineString">Line</option>
+          <option value="Polygon">Polygon</option>
+        </select>
+        <button id="delete" type="button">Clear all</button>
+        <button id="save-button" type="button">Save</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>
 	</div>
 	<div style="display: none;"><div id="marker" title="Marker"><img src="/images/bug_medium.png"/></div></div>