source: OpenWorkouts-current/ow/static/js/ow.js @ d33326a

currentfeature/docs
Last change on this file since d33326a was d33326a, checked in by borja <borja@…>, 5 years ago

Accept two new parameters to the js leaflet map builder:

  • map_id: the id of the html element that is the container for the map
  • elevation: true if we want to show the Leaflet.Elevation chart, false otherwise.

Added a fit_bounds() call suggested in Leaflet.Elevation docs

  • Property mode set to 100644
File size: 3.6 KB
Line 
1
2/*
3
4  OpenWorkouts Javascript code
5
6*/
7
8
9// Namespace
10var owjs = {};
11
12
13owjs.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
28    // OpenStreetMap urls and references
29    var openstreetmap_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
30    var openstreetmap_attr = 'Map data &copy; <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 */
40        map = L.map(map_id, {preferCanvas: true});
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);
77        /* document.getElementById('ow-analysis').appendChild(
78            ele_container._container); */
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        });
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
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);
112        if (elevation) {
113            add_elevation_chart();
114        }
115        // add_ow_charts();
116        load_gpx(gpx_url);
117    };
118
119    var that = {}
120    that.render = render;
121    return that
122
123};
Note: See TracBrowser for help on using the repository browser.