Convert V examples to strapless template

examples/vector-esri-edit.html

@@ -1,20 +1,16 @@
 ---
-layout: example.html
+layout: strapless.html
-title: esri ArcGIS REST Feature Service example with editing
+title: Editable ArcGIS REST Feature Service
 shortdesc: Example of using an ArcGIS REST Feature Service in an editing application.
 docs: >
   This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
 tags: "vector, esri, ArcGIS, REST, Feature, Service, bbox, loading, server, edit, updateFeature, addFeature"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<form class="form-inline">
-    <div id="map" class="map"></div>
+  <label>Draw or modify &nbsp;</label>
-    <form class="form-inline">
+  <select id="type">
-      <label>Draw or modify &nbsp;</label>
+    <option value="DRAW">Draw</option>
-      <select id="type">
+    <option value="MODIFY">Modify</option>
-        <option value="DRAW">Draw</option>
+  </select>
-        <option value="MODIFY">Modify</option>
+</form>
-      </select>
-    </form>
-  </div>
-</div>

examples/vector-esri-edit.js

@@ -29,20 +29,18 @@ var vectorSource = new ol.source.Vector({
             ',"spatialReference":{"wkid":102100}}') +
         '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
         '&outSR=102100';
-    $.ajax({url: url, dataType: 'jsonp', success: function(response) {
+
-      if (response.error) {
+    fetch(url).then(function(response) {
-        alert(response.error.message + '\n' +
+      return response.json();
-            response.error.details.join('\n'));
+    }).then(function(json) {
-      } else {
+      // dataProjection will be read from document
-        // dataProjection will be read from document
+      var features = esrijsonFormat.readFeatures(json, {
-        var features = esrijsonFormat.readFeatures(response, {
+        featureProjection: projection
-          featureProjection: projection
+      });
-        });
+      if (features.length > 0) {
-        if (features.length > 0) {
+        vectorSource.addFeatures(features);
-          vectorSource.addFeatures(features);
-        }
       }
-    }});
+    });
   },
   strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
     tileSize: 512
@@ -97,8 +95,12 @@ selected.on('remove', function(evt) {
       featureProjection: map.getView().getProjection()
     }) + ']';
     var url = serviceUrl + layer + '/updateFeatures';
-    $.post(url, { f: 'json', features: payload }).done(function(data) {
+    var data = new FormData();
-      var result = JSON.parse(data);
+    data.append('f', 'json');
+    data.append('features', payload);
+    fetch(url, {method: 'POST', body: data}).then(function(response) {
+      return response.json();
+    }).then(function(result) {
       if (result.updateResults && result.updateResults.length > 0) {
         if (result.updateResults[0].success !== true) {
           var error = result.updateResults[0].error;
@@ -117,8 +119,12 @@ draw.on('drawend', function(evt) {
     featureProjection: map.getView().getProjection()
   }) + ']';
   var url = serviceUrl + layer + '/addFeatures';
-  $.post(url, { f: 'json', features: payload }).done(function(data) {
+  var data = new FormData();
-    var result = JSON.parse(data);
+  data.append('f', 'json');
+  data.append('features', payload);
+  fetch(url, {method: 'POST', body: data}).then(function(response) {
+    return response.json();
+  }).then(function(result) {
     if (result.addResults && result.addResults.length > 0) {
       if (result.addResults[0].success === true) {
         feature.setId(result.addResults[0]['objectId']);

examples/vector-esri.html

@@ -1,18 +1,12 @@
 ---
-layout: example.html
+layout: strapless.html
-title: esri ArcGIS REST Feature Service example
+title: ArcGIS REST Feature Service
 shortdesc: Example of using an ArcGIS REST Feature Service with a BBOX strategy.
 docs: >
   This example loads new features from ArcGIS REST Feature Service when the view extent changes.
 tags: "vector, esri, ArcGIS, REST, Feature, Service, bbox, loading, server"
+resources:
+  - https://code.jquery.com/jquery-1.11.2.min.js
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<div id="info">&nbsp;</div>
-    <div id="map" class="map"></div>
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
-    </div>
-  </div>
-</div>

examples/vector-labels.html

@@ -1,16 +1,12 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Vector labels example
+title: Vector Labels
 shortdesc: Example of GeoJSON features with labels.
 docs: >
   **Note:** The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.
 tags: "geojson, vector, openstreetmap, label"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
 
 <div class="edit-form">
   <input id="refresh-points" type="button" value="Refresh" />

examples/vector-labels.js

@@ -185,17 +185,20 @@ var map = new ol.Map({
   })
 });
 
-$('#refresh-points').click(function() {
+document.getElementById('refresh-points')
-  vectorPoints.setStyle(pointStyleFunction);
+    .addEventListener('click', function() {
-});
+      vectorPoints.setStyle(pointStyleFunction);
+    });
 
-$('#refresh-lines').click(function() {
+document.getElementById('refresh-lines')
-  vectorLines.setStyle(lineStyleFunction);
+    .addEventListener('click', function() {
-});
+      vectorLines.setStyle(lineStyleFunction);
+    });
 
-$('#refresh-polygons').click(function() {
+document.getElementById('refresh-polygons')
-  vectorPolygons.setStyle(polygonStyleFunction);
+    .addEventListener('click', function() {
-});
+      vectorPolygons.setStyle(polygonStyleFunction);
+    });
 
 
 /**

examples/vector-layer.html

@@ -1,22 +1,10 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Vector layer example
+title: Vector Layer
 shortdesc: Example of a countries vector layer with country information.
 docs: >
   The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels.
 tags: "vector, osm, xml, loading, server"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<div id="info">&nbsp;</div>
-    <div id="map" class="map"></div>
-  </div>
-</div>
-
-<div class="row-fluid">
-  <div class="span4"></div>
-  <div class="span4 offset4">
-    <div id="info" class="alert alert-success">
-      &nbsp;
-    </div>
-  </div>
-</div>

examples/vector-osm.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: OSM XML example
+title: OSM XML
 shortdesc: Example of using the OSM XML source.
 docs: >
  OSM XML vector data is loaded dynamically from a server using a tiling strategy.
@@ -8,8 +8,4 @@ tags: "vector, osm, xml, loading, server"
 cloak:
   Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/vector-wfs.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: WFS example
+title: WFS
 shortdesc: Example of using WFS with a BBOX strategy.
 docs: >
   This example loads new features from GeoServer WFS when the view extent changes.
@@ -8,8 +8,4 @@ tags: "vector, WFS, bbox, loading, server"
 cloak:
   Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>