[5ec3a0b] | 1 | |
---|
| 2 | /* |
---|
| 3 | |
---|
| 4 | OpenWorkouts Javascript code |
---|
| 5 | |
---|
| 6 | */ |
---|
| 7 | |
---|
| 8 | |
---|
| 9 | // Namespace |
---|
| 10 | var owjs = {}; |
---|
| 11 | |
---|
| 12 | |
---|
| 13 | owjs.map = function(spec) { |
---|
| 14 | |
---|
| 15 | "use strict"; |
---|
| 16 | |
---|
| 17 | // parameters provided when creating an "instance" of a map |
---|
[d33326a] | 18 | var map_id = spec.map_id; |
---|
[5ec3a0b] | 19 | var latitude = spec.latitude; |
---|
| 20 | var longitude = spec.longitude; |
---|
| 21 | var zoom = spec.zoom; |
---|
| 22 | var gpx_url = spec.gpx_url; |
---|
| 23 | var start_icon = spec.start_icon; |
---|
| 24 | var end_icon = spec.end_icon; |
---|
| 25 | var shadow = spec.shadow; |
---|
[d33326a] | 26 | var elevation = spec.elevation; |
---|
[5ec3a0b] | 27 | |
---|
| 28 | // OpenStreetMap urls and references |
---|
| 29 | var openstreetmap_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' |
---|
| 30 | var openstreetmap_attr = 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>' |
---|
| 31 | |
---|
| 32 | // Some constants reused through the code |
---|
| 33 | var map; |
---|
| 34 | var gpx; |
---|
| 35 | var elevation; |
---|
| 36 | var ow_charts; |
---|
| 37 | |
---|
| 38 | var create_map = function create_map(latitude, longitude, zoom) { |
---|
| 39 | /* Create a Leaflet map, set center point and add tiles */ |
---|
[d33326a] | 40 | map = L.map(map_id, {preferCanvas: true}); |
---|
[5ec3a0b] | 41 | map.setView([latitude, longitude], zoom); |
---|
| 42 | var tile_layer = L.tileLayer(openstreetmap_url, { |
---|
| 43 | attribution: openstreetmap_attr |
---|
| 44 | }); |
---|
| 45 | tile_layer.addTo(map); |
---|
| 46 | }; |
---|
| 47 | |
---|
| 48 | var add_elevation_chart = function add_elevation_chart() { |
---|
| 49 | /* |
---|
| 50 | Add the elevation chart support to the map. |
---|
| 51 | This has to be called *after* create_map and *before* load_gpx. |
---|
| 52 | */ |
---|
| 53 | elevation = L.control.elevation({ |
---|
| 54 | position: "bottomright", |
---|
| 55 | theme: "steelblue-theme", //default: lime-theme |
---|
| 56 | width: 600, |
---|
| 57 | height: 125, |
---|
| 58 | margins: { |
---|
| 59 | top: 10, |
---|
| 60 | right: 20, |
---|
| 61 | bottom: 30, |
---|
| 62 | left: 50 |
---|
| 63 | }, |
---|
| 64 | useHeightIndicator: true, //if false a marker is drawn at map position |
---|
| 65 | interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate |
---|
| 66 | hoverNumber: { |
---|
| 67 | decimalsX: 3, //decimals on distance (always in km) |
---|
| 68 | decimalsY: 0, //deciamls on height (always in m) |
---|
| 69 | formatter: undefined //custom formatter function may be injected |
---|
| 70 | }, |
---|
| 71 | xTicks: undefined, //number of ticks in x axis, calculated by default according to width |
---|
| 72 | yTicks: undefined, //number of ticks on y axis, calculated by default according to height |
---|
| 73 | collapsed: false //collapsed mode, show chart on click or mouseover |
---|
| 74 | }); |
---|
| 75 | |
---|
| 76 | var ele_container = elevation.addTo(map); |
---|
[8af3272] | 77 | /* document.getElementById('ow-analysis').appendChild( |
---|
| 78 | ele_container._container); */ |
---|
[5ec3a0b] | 79 | }; |
---|
| 80 | |
---|
| 81 | var load_gpx = function load_gpx(gpx_url) { |
---|
| 82 | /* |
---|
| 83 | Load the gpx from the given url, add it to the map and feed it to the |
---|
| 84 | elevation chart |
---|
| 85 | */ |
---|
| 86 | var gpx = new L.GPX(gpx_url, { |
---|
| 87 | async: true, |
---|
| 88 | marker_options: { |
---|
| 89 | startIconUrl: start_icon, |
---|
| 90 | endIconUrl: end_icon, |
---|
| 91 | shadowUrl: shadow, |
---|
| 92 | }, |
---|
| 93 | }); |
---|
[d33326a] | 94 | |
---|
| 95 | gpx.on('loaded', function(e) { |
---|
| 96 | map.fitBounds(e.target.getBounds()); |
---|
| 97 | }); |
---|
| 98 | |
---|
| 99 | if (elevation) { |
---|
| 100 | gpx.on("addline",function(e){ |
---|
| 101 | elevation.addData(e.line); |
---|
| 102 | // ow_charts.addData(e.line); |
---|
| 103 | }); |
---|
| 104 | }; |
---|
| 105 | |
---|
[5ec3a0b] | 106 | gpx.addTo(map); |
---|
| 107 | }; |
---|
| 108 | |
---|
| 109 | var render = function render() { |
---|
| 110 | // create the map, add elevation, load gpx |
---|
| 111 | create_map(latitude, longitude, zoom); |
---|
[d33326a] | 112 | if (elevation) { |
---|
| 113 | add_elevation_chart(); |
---|
| 114 | } |
---|
[4554843] | 115 | // add_ow_charts(); |
---|
[5ec3a0b] | 116 | load_gpx(gpx_url); |
---|
| 117 | }; |
---|
| 118 | |
---|
| 119 | var that = {} |
---|
| 120 | that.render = render; |
---|
| 121 | return that |
---|
| 122 | |
---|
| 123 | }; |
---|