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

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 = '';
+}