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