diff --git a/data/core.yaml b/data/core.yaml index 77c1d55dd..df9c939be 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -476,10 +476,10 @@ en: cannot_zoom: "Cannot zoom out further in current mode." full_screen: Toggle Full Screen gpx: - local_layer: "Local GPX file" - drag_drop: "Drag and drop a .gpx file on the page, or click the button to the right to browse" - zoom: "Zoom to GPX track" - browse: "Browse for a .gpx file" + local_layer: "Local file" + drag_drop: "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse" + zoom: "Zoom to layer" + browse: "Browse for a file" mapillary_images: tooltip: "Street-level photos from Mapillary" title: "Photo Overlay (Mapillary)" diff --git a/dist/locales/en.json b/dist/locales/en.json index a4416a3b0..8d37e7f63 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -585,10 +585,10 @@ "cannot_zoom": "Cannot zoom out further in current mode.", "full_screen": "Toggle Full Screen", "gpx": { - "local_layer": "Local GPX file", - "drag_drop": "Drag and drop a .gpx file on the page, or click the button to the right to browse", - "zoom": "Zoom to GPX track", - "browse": "Browse for a .gpx file" + "local_layer": "Local file", + "drag_drop": "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse", + "zoom": "Zoom to layer", + "browse": "Browse for a file" }, "mapillary_images": { "tooltip": "Street-level photos from Mapillary", diff --git a/modules/svg/gpx.js b/modules/svg/gpx.js index a1ddcd66b..883a8d143 100644 --- a/modules/svg/gpx.js +++ b/modules/svg/gpx.js @@ -106,6 +106,33 @@ export function svgGpx(projection, context, dispatch) { } + function getExtension(file) { + if (_.isUndefined(file)) { + return ''; + } + + var lastDotIndex = file.name.lastIndexOf('.'); + if (lastDotIndex < 0) { + return ''; + } + + return file.name.substr(lastDotIndex); + } + + + function parseSaveAndZoom(extension, data) { + if (extension === '.gpx') { + drawGpx.geojson(toGeoJSON.gpx(toDom(data))).fitZoom(); + } + else if (extension === '.kml') { + drawGpx.geojson(toGeoJSON.kml(toDom(data))).fitZoom(); + } + else if (extension === '.geojson') { + drawGpx.geojson(JSON.parse(data)).fitZoom(); + } + } + + drawGpx.showLabels = function(_) { if (!arguments.length) return showLabels; showLabels = _; @@ -139,7 +166,8 @@ export function svgGpx(projection, context, dispatch) { drawGpx.url = function(url) { d3.text(url, function(err, data) { if (!err) { - drawGpx.geojson(toGeoJSON.gpx(toDom(data))); + var extension = getExtension(url); + parseSaveAndZoom(extension, data); } }); return this; @@ -151,9 +179,13 @@ export function svgGpx(projection, context, dispatch) { var f = fileList[0], reader = new FileReader(); - reader.onload = function(e) { - drawGpx.geojson(toGeoJSON.gpx(toDom(e.target.result))).fitZoom(); - }; + reader.onload = (function(file) { + var extension = getExtension(file); + + return function (e) { + parseSaveAndZoom(extension, e.target.result); + }; + })(f); reader.readAsText(f); return this;