Adding options to select dynamically, changed from json to javascript object

src/main/webapp/js/observationFormMap.js

@@ -31,7 +31,7 @@ var featureOverlay, map;
  * @param {string} drawnObjs - GeoJSON with geometries to display
  * @returns {void}
  */
-function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersJson) {
+function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
 
 
   var osm = new ol.layer.Tile({
@@ -73,15 +73,21 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersJson)
  
   //-----------------Get maplayers you can choose from-----------------------------
 
-  var layersObj = eval ("(" + chooseLayersJson + ")");
+  //var layersObj = eval ("(" + chooseLayersObj + ")");
   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];
+  var typeSelect = document.getElementById('type');
+
+    if (chooseLayersObj.chooseFromMapLayers.length > 0){
+      for (i = 0; i < chooseLayersObj.chooseFromMapLayers.length; i++) { 
+        var layer = chooseLayersObj.chooseFromMapLayers[i];
+        var opt = document.createElement("option");
+        opt.value = layer.id;
+        opt.text=layer.title;
+        typeSelect.appendChild(opt);
         chooseLayers.push(new ol.layer.Vector({
           id: layer.id,
           title: layer.title,
@@ -275,9 +281,6 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersJson)
 
 
 
-  var typeSelect = document.getElementById('type');
-
-
   /**
    * Let user change the geometry type.
    * @param {Event} e Change event.

src/main/webapp/templates/observationForm.ftl

@@ -56,7 +56,7 @@
 			initMap([${(observation.location.x?c)!""},${(observation.location.y?c)!""}],10,true);
 			<#else>
 			var geoInfo = <#if observation.geoinfo?has_content>${observation.geoinfo}<#else>{}</#if>;
-			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&"}]}';
+			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>
 		});
@@ -133,6 +133,8 @@
         <select id="type">
           <option value="Point">Point</option>
           <option value="Polygon">Polygon</option>
+          <option value="Kommune">Kommune</option>
+          <option value="Fylke">Fylke</option>
         </select>
         <button id="delete" type="button">Clear all</button>
       </div>