Add export button to kml example

examples/kml.html

@@ -25,6 +25,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <div id="no-download" class="alert alert-error" style="display: none">
+            The "Export KML" functionality requires a browser that supports the
+            <a href="http://caniuse.com/#feat=download">link download</a> attribute.
+          </div>
+          <a id="export-kml" class="btn" download="map.kml"><i class="icon-download"></i>Export KML</a>
         </div>
       </div>
 

examples/kml.js

@@ -1,10 +1,14 @@
 goog.require('ol.Map');
 goog.require('ol.View2D');
+goog.require('ol.format.KML');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.KML');
 
+var projection = ol.proj.get('EPSG:3857');
+
 var raster = new ol.layer.Tile({
   source: new ol.source.BingMaps({
     imagerySet: 'Aerial',
@@ -14,7 +18,7 @@ var raster = new ol.layer.Tile({
 
 var vector = new ol.layer.Vector({
   source: new ol.source.KML({
-    projection: 'EPSG:3857',
+    projection: projection,
     url: 'data/kml/2012-02-10.kml'
   })
 });
@@ -24,6 +28,7 @@ var map = new ol.Map({
   target: document.getElementById('map'),
   view: new ol.View2D({
     center: [876970.8463461736, 5859807.853963373],
+    projection: projection,
     zoom: 10
   })
 });
@@ -55,3 +60,31 @@ $(map.getViewport()).on('mousemove', function(evt) {
 map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });
+
+var exportKMLElement = document.getElementById('export-kml');
+if ('download' in exportKMLElement) {
+  var vectorSource = /** @type {ol.source.Vector} */ (vector.getSource());
+  exportKMLElement.addEventListener('click', function(e) {
+    if (!exportKMLElement.href) {
+      var features = [];
+      vectorSource.forEachFeature(function(feature) {
+        var clone = feature.clone();
+        clone.setId(feature.getId());  // clone does not set the id
+        clone.getGeometry().transform(projection, 'EPSG:4326');
+        features.push(clone);
+      });
+      var node = new ol.format.KML().writeFeatures(features);
+      var string = new XMLSerializer().serializeToString(
+          /** @type {Node} */ (node));
+      var base64 = window.btoa(string);
+      exportKMLElement.href =
+          'data:application/vnd.google-earth.kml+xml;base64,' + base64;
+    }
+  }, false);
+} else {
+  var info = document.getElementById('no-download');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}