[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 |
---|
| 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 | }; |
---|