diff options
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | static/hikers.js | 37 | ||||
| -rw-r--r-- | static/style.css | 3 |
3 files changed, 55 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..f0023ab --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Hikers</title> + <link rel="stylesheet" href="style/style.css"> + <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> + <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> + </head> + <body> + <input type="file" id="files" /> + <div style="height:600px" id="map"></div> + <script src="static/hikers.js"></script> + </body> +</html> diff --git a/static/hikers.js b/static/hikers.js new file mode 100644 index 0000000..f0dd1e0 --- /dev/null +++ b/static/hikers.js @@ -0,0 +1,37 @@ +var map = L.map('map').setView([40.721, -73.974], 17); +// add an OpenStreetMap tile layer +L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' +}).addTo(map); + +// // add a marker in the given location, attach some popup content to it and open the popup +// L.marker([51.5, -0.09]).addTo(map) +// .bindPopup('A pretty CSS3 popup. <br> Easily customizable.') +// .openPopup(); + + +function parsexml(text) { + parser = new DOMParser() + xmlDoc = parser.parseFromString(text, "text/xml"); + nodelist = xmlDoc.getElementsByTagName('trkpt'); + r = []; + for(i = 0; i < nodelist.length; i++) { + e = nodelist[i] + r[i] = L.latLng(e.getAttribute('lat'), e.getAttribute('lon')); + } + return r; +} + +function handleFile(evt) { + var file = evt.target.files[0]; // FileList object + var reader = new FileReader(); + reader.onload = function() { + console.log(this.result); + var polyline = L.polyline(parsexml(this.result), + {color: 'red'}).addTo(map); + map.fitBounds(polyline.getBounds()); + } + reader.readAsText(file); +} + +document.getElementById('files').addEventListener('change', handleFile, false); diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..6d3c383 --- /dev/null +++ b/static/style.css @@ -0,0 +1,3 @@ +/* #map { */ +/* height: 180px; */ +/* } */
\ No newline at end of file |