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