Conflate ol.format.GPX.V1_1 and ol.format.GXP into ol.format.GXP

examples/gpx.html

@@ -25,6 +25,12 @@
       <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 GPX" functionality requires a browser that supports the
+            <a href="http://caniuse.com/#feat=download">link download</a> attribute.
+          </div>
+          <a id="export-gpx" class="btn" download="map.gpx"><i class="icon-download"></i>Export GPX</a>
+        </div>
         </div>
       </div>
 

examples/gpx.js

@@ -1,7 +1,9 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.format.GPX');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.GPX');
 goog.require('ol.style.Circle');
@@ -9,6 +11,8 @@ goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
+var projection = ol.proj.get('EPSG:3857');
+
 var raster = new ol.layer.Tile({
   source: new ol.source.BingMaps({
     imagerySet: 'Aerial',
@@ -45,7 +49,7 @@ var style = {
 
 var vector = new ol.layer.Vector({
   source: new ol.source.GPX({
-    projection: 'EPSG:3857',
+    projection: projection,
     url: 'data/gpx/fells_loop.gpx'
   }),
   style: function(feature, resolution) {
@@ -89,3 +93,30 @@ $(map.getViewport()).on('mousemove', function(evt) {
 map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });
+
+var exportGPXElement = document.getElementById('export-gpx');
+if ('download' in exportGPXElement) {
+  var vectorSource = /** @type {ol.source.Vector} */ (vector.getSource());
+  exportGPXElement.addEventListener('click', function(e) {
+    if (!exportGPXElement.href) {
+      var features = [];
+      vectorSource.forEachFeature(function(feature) {
+        var clone = feature.clone();
+        clone.getGeometry().transform(projection, 'EPSG:4326');
+        features.push(clone);
+      });
+      var node = new ol.format.GPX().writeFeatures(features);
+      var string = new XMLSerializer().serializeToString(
+          /** @type {Node} */ (node));
+      var base64 = exampleNS.strToBase64(string);
+      exportGPXElement.href =
+          'data:gpx+xml;base64,' + base64;
+    }
+  }, false);
+} else {
+  var info = document.getElementById('no-download');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}