Adding elevation chart
This commit is contained in:
franzz committed
1 parent
1b4f0f5b17
commit
0617aac091
14 files changed
+1001
-92
No files matched your search
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
// https://d3js.org v5.9.1 Copyright 2019 Mike Bostock
|
||||
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(t,n){return t<n?-1:t>n?1:t>=n?0:NaN}function e(t){var e;return 1===t.length&&(e=t,t=function(t,r){return n(e(t),r)}),{left:function(n,e,r,i){for(null==r&&(r=0),null==i&&(i=n.length);r<i;){var o=r+i>>>1;t(n[o],e)<0?r=o+1:i=o}return r},right:function(n,e,r,i){for(null==r&&(r=0),null==i&&(i=n.length);r<i;){var o=r+i>>>1;t(n[o],e)>0?i=o:r=o+1}return r}}}var r=e(n),i=r.right,o=r.left;function a(t,n){return[t,n]}function u(t){return null===t?NaN:+t}function c(t,n){var e,r,i=t.length,o=0,a=-1,c=0,f=0;if(null==n)for(;++a<i;)isNaN(e=u(t[a]))||(f+=(r=e-c)*(e-(c+=r/++o)));else for(;++a<i;)isNaN(e=u(n(t[a],a,t)))||(f+=(r=e-c)*(e-(c+=r/++o)));if(o>1)return f/(o-1)}function f(t,n){var e=c(t,n);return e?Math.sqrt(e):e}function s(t,n){var e,r,i,o=t.length,a=-1;if(null==n){for(;++a<o;)if(null!=(e=t[a])&&e>=e)for(r=i=e;++a<o;)null!=(e=t[a])&&(r>e&&(r=e),i<e&&(i=e))}else for(;++a<o;)if(null!=(e=n(t[a],a,t))&&e>=e)for(r=i=e;++a<o;)null!=(e=n(t[a],a,t))&&(r>e&&(r=e),i<e&&(i=e));return[r,i]}var l=Array.prototype,h=l.slice,d=l.map;function p(t){return function(){return t}}function v(t){return t}function g(t,n,e){t=+t,n=+n,e=(i=arguments.length)<2?(n=t,t=0,1):i<3?1:+e;for(var r=-1,i=0|Math.max(0,Math.ceil((n-t)/e)),o=new Array(i);++r<i;)o[r]=t+r*e;return o}var y=Math.sqrt(50),_=Math.sqrt(10),b=Math.sqrt(2);function m(t,n,e){var r,i,o,a,u=-1;if(e=+e,(t=+t)===(n=+n)&&e>0)return[t];if((r=n<t)&&(i=t,t=n,n=i),0===(a=x(t,n,e))||!isFinite(a))return[];if(a>0)for(t=Math.ceil(t/a),n=Math.floor(n/a),o=new Array(i=Math.ceil(n-t+1));++u<i;)o[u]=(t+u)*a;else for(t=Math.floor(t*a),n=Math.ceil(n*a),o=new Array(i=Math.ceil(t-n+1));++u<i;)o[u]=(t-u)/a;return r&&o.reverse(),o}function x(t,n,e){var r=(n-t)/Math.max(0,e),i=Math.floor(Math.log(r)/Math.LN10),o=r/Math.pow(10,i);return i>=0?(o>=y?10:o>=_?5:o>=b?2:1)*Math.pow(10,i):-Math.pow(10,-i)/(o>=y?10:o>=_?5:o>=b?2:1)}function w(t,n,e){var r=Math.abs(n-t)/Math.max(0,e),i=Math.pow(10,Math.floor(Math.log(r)/Math.LN10)),o=r/i;return o>=y?i*=10:o>=_?i*=5:o>=b&&(i*=2),n<t?-i:i}function M(t){return Math.ceil(Math.log(t.length)/Math.LN2)+1}function N(t,n,e){if(null==e&&(e=u),r=t.length){if((n=+n)<=0||r<2)return+e(t[0],0,t);if(n>=1)return+e(t[r-1],r-1,t);var r,i=(r-1)*n,o=Math.floor(i),a=+e(t[o],o,t);return a+(+e(t[o+1],o+1,t)-a)*(i-o)}}function A(t,n){var e,r,i=t.length,o=-1;if(null==n){for(;++o<i;)if(null!=(e=t[o])&&e>=e)for(r=e;++o<i;)null!=(e=t[o])&&e>r&&(r=e)}else for(;++o<i;)if(null!=(e=n(t[o],o,t))&&e>=e)for(r=e;++o<i;)null!=(e=n(t[o],o,t))&&e>r&&(r=e);return r}function T(t){for(var n,e,r,i=t.length,o=-1,a=0;++o<i;)a+=t[o].length;for(e=new Array(a);--i>=0;)for(n=(r=t[i]).length;--n>=0;)e[--a]=r[n];return e}function S(t,n){var e,r,i=t.length,o=-1;if(null==n){for(;++o<i;)if(null!=(e=t[o])&&e>=e)for(r=e;++o<i;)null!=(e=t[o])&&r>e&&(r=e)}else for(;++o<i;)if(null!=(e=n(t[o],o,t))&&e>=e)for(r=e;++o<i;)null!=(e=n(t[o],o,t))&&r>e&&(r=e);return r}function k(t){if(!(i=t.length))return[];for(var n=-1,e=S(t,E),r=new Array(e);++n<e;)for(var i,o=-1,a=r[n]=new Array(i);++o<i;)a[o]=t[o][n];return r}function E(t){return t.length}var C=Array.prototype.slice;function P(t){return t}var z=1,R=2,D=3,q=4,L=1e-6;function U(t){return"translate("+(t+.5)+",0)"}function O(t){return"translate(0,"+(t+.5)+")"}function B(){return!this.__axis}function Y(t,n){var e=[],r=null,i=null,o=6,a=6,u=3,c=t===z||t===q?-1:1,f=t===q||t===R?"x":"y",s=t===z||t===D?U:O;function l(l){var h=null==r?n.ticks?n.ticks.apply(n,e):n.domain():r,d=null==i?n.tickFormat?n.tickFormat.apply(n,e):P:i,p=Math.max(o,0)+u,v=n.range(),g=+v[0]+.5,y=+v[v.length-1]+.5,_=(n.bandwidth?function(t){var n=Math.max(0,t.bandwidth()-1)/2;return t.round()&&(n=Math.round(n)),function(e){return+t(e)+n}}:function(t){return function(n){return+t(n)}})(n.copy()),b=l.selection?l.selection():l,m=b.selectAll(".domain").data([null]),x=b.selectAll(".tick").data(h,n).order(),w=x.exit(),M=x.enter().append("g").attr("class","tick"),N=x.select("line"),A=x.select("text");m=m.merge(m.enter().insert("path",".tick").attr("class","domain").attr("stroke","currentColor")),x=x.merge(M),N=N.merge(M.append("line").attr("stroke","currentColor").attr(f+"2",c*o)),A=A.merge(M.append("text").attr("fill","currentColor").attr(f,c*p).attr("dy",t===z?"0em":t===D?"0.71em":"0.32em")),l!==b&&(m=m.transition(l),x=x.transition(l),N=N.transition(l),A=A.transition(l),w=w.transition(l).attr("opacity",L).attr("transform",function(t){return isFinite(t=_(t))?s(t):this.getAttribute("transform")}),M.attr("opacity",L).attr("transform",function(t){var n=this.parentNode.__axis;return s(n&&isFinite(n=n(t))?n:_(t))})),w.remove(),m.attr("d",t===q||t==R?a?"M"+c*a+","+g+"H0.5V"+y+"H"+c*a:"M0.5,"+g+"V"+y:a?"M"+g+","+c*a+"V0.5H"+y+"V"+c*a:"M"+g+",0.5H"+y),x.attr("opacity",1).attr("transform",function(t){return s(_(t))}),N.attr(f+"2",c*o),A.aLine truncated
|
||||
Vendored
+794
-1
@@ -2,4 +2,797 @@
|
||||
* Leaflet 1.4.0+Detached: 3337f36d2a2d2b33946779057619b31f674ff5dc.3337f36, a JS library for interactive maps. http://leafletjs.com
|
||||
* (c) 2010-2018 Vladimir Agafonkin, (c) 2010-2011 CloudMade
|
||||
*/
|
||||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i(t.L={})}(this,function(t){"use strict";function i(t){var i,e,n,o;for(e=1,n=arguments.length;e<n;e++){o=arguments[e];for(i in o)t[i]=o[i]}return t}function e(t,i){var e=Array.prototype.slice;if(t.bind)return t.bind.apply(t,e.call(arguments,1));var n=e.call(arguments,2);return function(){return t.apply(i,n.length?n.concat(e.call(arguments)):arguments)}}function n(t){return t._leaflet_id=t._leaflet_id||++ei,t._leaflet_id}function o(t,i,e){var n,o,s,r;return r=function(){n=!1,o&&(s.apply(e,o),o=!1)},s=function(){n?o=arguments:(t.apply(e,arguments),setTimeout(r,i),n=!0)}}function s(t,i,e){var n=i[1],o=i[0],s=n-o;return t===n&&e?t:((t-o)%s+s)%s+o}function r(){return!1}function a(t,i){var e=Math.pow(10,void 0===i?6:i);return Math.round(t*e)/e}function h(t){return t.trim?t.trim():t.replace(/^\s+|\s+$/g,"")}function u(t){return h(t).split(/\s+/)}function l(t,i){t.hasOwnProperty("options")||(t.options=t.options?ii(t.options):{});for(var e in i)t.options[e]=i[e];return t.options}function c(t,i,e){var n=[];for(var o in t)n.push(encodeURIComponent(e?o.toUpperCase():o)+"="+encodeURIComponent(t[o]));return(i&&-1!==i.indexOf("?")?"&":"?")+n.join("&")}function _(t,i){return t.replace(ni,function(t,e){var n=i[e];if(void 0===n)throw new Error("No value provided for variable "+t);return"function"==typeof n&&(n=n(i)),n})}function d(t,i){for(var e=0;e<t.length;e++)if(t[e]===i)return e;return-1}function p(t){return window["webkit"+t]||window["moz"+t]||window["ms"+t]}function m(t){var i=+new Date,e=Math.max(0,16-(i-ri));return ri=i+e,window.setTimeout(t,e)}function f(t,i,n){if(!n||ai!==m)return ai.call(window,e(t,i));t.call(i)}function g(t){t&&hi.call(window,t)}function v(){}function y(t){if("undefined"!=typeof L&&L&&L.Mixin){t=oi(t)?t:[t];for(var i=0;i<t.length;i++)t[i]===L.Mixin.Events&&console.warn("Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead.",(new Error).stack)}}function x(t,i,e){this.x=e?Math.round(t):t,this.y=e?Math.round(i):i}function w(t,i,e){return t instanceof x?t:oi(t)?new x(t[0],t[1]):void 0===t||null===t?t:"object"==typeof t&&"x"in t&&"y"in t?new x(t.x,t.y):new x(t,i,e)}function P(t,i){if(t)for(var e=i?[t,i]:t,n=0,o=e.length;n<o;n++)this.extend(e[n])}function b(t,i){return!t||t instanceof P?t:new P(t,i)}function T(t,i){if(t)for(var e=i?[t,i]:t,n=0,o=e.length;n<o;n++)this.extend(e[n])}function z(t,i){return t instanceof T?t:new T(t,i)}function M(t,i,e){if(isNaN(t)||isNaN(i))throw new Error("Invalid LatLng object: ("+t+", "+i+")");this.lat=+t,this.lng=+i,void 0!==e&&(this.alt=+e)}function C(t,i,e){return t instanceof M?t:oi(t)&&"object"!=typeof t[0]?3===t.length?new M(t[0],t[1],t[2]):2===t.length?new M(t[0],t[1]):null:void 0===t||null===t?t:"object"==typeof t&&"lat"in t?new M(t.lat,"lng"in t?t.lng:t.lon,t.alt):void 0===i?null:new M(t,i,e)}function S(t,i,e,n){if(oi(t))return this._a=t[0],this._b=t[1],this._c=t[2],void(this._d=t[3]);this._a=t,this._b=i,this._c=e,this._d=n}function Z(t,i,e,n){return new S(t,i,e,n)}function E(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function k(t,i){var e,n,o,s,r,a,h="";for(e=0,o=t.length;e<o;e++){for(n=0,s=(r=t[e]).length;n<s;n++)a=r[n],h+=(n?"L":"M")+a.x+" "+a.y;h+=i?Ji?"z":"x":""}return h||"M0 0"}function B(t){return navigator.userAgent.toLowerCase().indexOf(t)>=0}function A(t,i,e,n){return"touchstart"===i?O(t,e,n):"touchmove"===i?W(t,e,n):"touchend"===i&&H(t,e,n),this}function I(t,i,e){var n=t["_leaflet_"+i+e];return"touchstart"===i?t.removeEventListener(te,n,!1):"touchmove"===i?t.removeEventListener(ie,n,!1):"touchend"===i&&(t.removeEventListener(ee,n,!1),t.removeEventListener(ne,n,!1)),this}function O(t,i,n){var o=e(function(t){if("mouse"!==t.pointerType&&t.MSPOINTER_TYPE_MOUSE&&t.pointerType!==t.MSPOINTER_TYPE_MOUSE){if(!(oe.indexOf(t.target.tagName)<0))return;Pt(t)}j(t,i)});t["_leaflet_touchstart"+n]=o,t.addEventListener(te,o,!1),re||(document.documentElement.addEventListener(te,R,!0),document.documentElement.addEventListener(ie,N,!0),document.documentElement.addEventListener(ee,D,!0),document.documentElement.addEventListener(ne,D,!0),re=!0)}function R(t){se[t.pointerId]=t,ae++}function N(t){se[t.pointerId]&&(se[t.pointerId]=t)}function D(t){delete se[t.pointerId],ae--}function j(t,i){t.touches=[];for(var e in se)t.touches.push(se[e]);t.changedTouches=[t],i(t)}function W(t,i,e){var n=function(t){(t.pointerType!==t.MSPOINTER_TYPE_MOUSE&&"mouse"!==t.pointerType||0!==t.buttons)&&j(t,i)};t["_leaflet_touchmove"+e]=n,t.addEventListener(ie,n,!1)}function H(t,i,e){var n=function(t){j(t,i)};t["_leaflet_touchend"+e]=n,t.addEventListener(ee,n,!1),t.addEventListener(ne,n,!1)}function F(t,i,e){function n(t){var i;if(Vi){if(!bi||"mouse"===t.pointerType)return;i=ae}else i=t.touches.length;if(!(i>1)){var e=Date.now(),n=e-(s||e);r=t.touches?t.touches[0]:Line truncated
|
||||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i(t.L={})}(this,function(t){"use strict";function i(t){var i,e,n,o;for(e=1,n=arguments.length;e<n;e++){o=arguments[e];for(i in o)t[i]=o[i]}return t}function e(t,i){var e=Array.prototype.slice;if(t.bind)return t.bind.apply(t,e.call(arguments,1));var n=e.call(arguments,2);return function(){return t.apply(i,n.length?n.concat(e.call(arguments)):arguments)}}function n(t){return t._leaflet_id=t._leaflet_id||++ei,t._leaflet_id}function o(t,i,e){var n,o,s,r;return r=function(){n=!1,o&&(s.apply(e,o),o=!1)},s=function(){n?o=arguments:(t.apply(e,arguments),setTimeout(r,i),n=!0)}}function s(t,i,e){var n=i[1],o=i[0],s=n-o;return t===n&&e?t:((t-o)%s+s)%s+o}function r(){return!1}function a(t,i){var e=Math.pow(10,void 0===i?6:i);return Math.round(t*e)/e}function h(t){return t.trim?t.trim():t.replace(/^\s+|\s+$/g,"")}function u(t){return h(t).split(/\s+/)}function l(t,i){t.hasOwnProperty("options")||(t.options=t.options?ii(t.options):{});for(var e in i)t.options[e]=i[e];return t.options}function c(t,i,e){var n=[];for(var o in t)n.push(encodeURIComponent(e?o.toUpperCase():o)+"="+encodeURIComponent(t[o]));return(i&&-1!==i.indexOf("?")?"&":"?")+n.join("&")}function _(t,i){return t.replace(ni,function(t,e){var n=i[e];if(void 0===n)throw new Error("No value provided for variable "+t);return"function"==typeof n&&(n=n(i)),n})}function d(t,i){for(var e=0;e<t.length;e++)if(t[e]===i)return e;return-1}function p(t){return window["webkit"+t]||window["moz"+t]||window["ms"+t]}function m(t){var i=+new Date,e=Math.max(0,16-(i-ri));return ri=i+e,window.setTimeout(t,e)}function f(t,i,n){if(!n||ai!==m)return ai.call(window,e(t,i));t.call(i)}function g(t){t&&hi.call(window,t)}function v(){}function y(t){if("undefined"!=typeof L&&L&&L.Mixin){t=oi(t)?t:[t];for(var i=0;i<t.length;i++)t[i]===L.Mixin.Events&&console.warn("Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead.",(new Error).stack)}}function x(t,i,e){this.x=e?Math.round(t):t,this.y=e?Math.round(i):i}function w(t,i,e){return t instanceof x?t:oi(t)?new x(t[0],t[1]):void 0===t||null===t?t:"object"==typeof t&&"x"in t&&"y"in t?new x(t.x,t.y):new x(t,i,e)}function P(t,i){if(t)for(var e=i?[t,i]:t,n=0,o=e.length;n<o;n++)this.extend(e[n])}function b(t,i){return!t||t instanceof P?t:new P(t,i)}function T(t,i){if(t)for(var e=i?[t,i]:t,n=0,o=e.length;n<o;n++)this.extend(e[n])}function z(t,i){return t instanceof T?t:new T(t,i)}function M(t,i,e){if(isNaN(t)||isNaN(i))throw new Error("Invalid LatLng object: ("+t+", "+i+")");this.lat=+t,this.lng=+i,void 0!==e&&(this.alt=+e)}function C(t,i,e){return t instanceof M?t:oi(t)&&"object"!=typeof t[0]?3===t.length?new M(t[0],t[1],t[2]):2===t.length?new M(t[0],t[1]):null:void 0===t||null===t?t:"object"==typeof t&&"lat"in t?new M(t.lat,"lng"in t?t.lng:t.lon,t.alt):void 0===i?null:new M(t,i,e)}function S(t,i,e,n){if(oi(t))return this._a=t[0],this._b=t[1],this._c=t[2],void(this._d=t[3]);this._a=t,this._b=i,this._c=e,this._d=n}function Z(t,i,e,n){return new S(t,i,e,n)}function E(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function k(t,i){var e,n,o,s,r,a,h="";for(e=0,o=t.length;e<o;e++){for(n=0,s=(r=t[e]).length;n<s;n++)a=r[n],h+=(n?"L":"M")+a.x+" "+a.y;h+=i?Ji?"z":"x":""}return h||"M0 0"}function B(t){return navigator.userAgent.toLowerCase().indexOf(t)>=0}function A(t,i,e,n){return"touchstart"===i?O(t,e,n):"touchmove"===i?W(t,e,n):"touchend"===i&&H(t,e,n),this}function I(t,i,e){var n=t["_leaflet_"+i+e];return"touchstart"===i?t.removeEventListener(te,n,!1):"touchmove"===i?t.removeEventListener(ie,n,!1):"touchend"===i&&(t.removeEventListener(ee,n,!1),t.removeEventListener(ne,n,!1)),this}function O(t,i,n){var o=e(function(t){if("mouse"!==t.pointerType&&t.MSPOINTER_TYPE_MOUSE&&t.pointerType!==t.MSPOINTER_TYPE_MOUSE){if(!(oe.indexOf(t.target.tagName)<0))return;Pt(t)}j(t,i)});t["_leaflet_touchstart"+n]=o,t.addEventListener(te,o,!1),re||(document.documentElement.addEventListener(te,R,!0),document.documentElement.addEventListener(ie,N,!0),document.documentElement.addEventListener(ee,D,!0),document.documentElement.addEventListener(ne,D,!0),re=!0)}function R(t){se[t.pointerId]=t,ae++}function N(t){se[t.pointerId]&&(se[t.pointerId]=t)}function D(t){delete se[t.pointerId],ae--}function j(t,i){t.touches=[];for(var e in se)t.touches.push(se[e]);t.changedTouches=[t],i(t)}function W(t,i,e){var n=function(t){(t.pointerType!==t.MSPOINTER_TYPE_MOUSE&&"mouse"!==t.pointerType||0!==t.buttons)&&j(t,i)};t["_leaflet_touchmove"+e]=n,t.addEventListener(ie,n,!1)}function H(t,i,e){var n=function(t){j(t,i)};t["_leaflet_touchend"+e]=n,t.addEventListener(ee,n,!1),t.addEventListener(ne,n,!1)}function F(t,i,e){function n(t){var i;if(Vi){if(!bi||"mouse"===t.pointerType)return;i=ae}else i=t.touches.length;if(!(i>1)){var e=Date.now(),n=e-(s||e);r=t.touches?t.touches[0]:Line truncated
|
||||
|
||||
/* leaflet.elevation - https://github.com/HostedDinner/Leaflet.Elevation/tree/master/dist */
|
||||
L.Control.Elevation = L.Control.extend({
|
||||
options: {
|
||||
position: "topright",
|
||||
theme: "lime-theme",
|
||||
width: 600,
|
||||
height: 175,
|
||||
margins: {
|
||||
top: 10,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 60
|
||||
},
|
||||
useHeightIndicator: true,
|
||||
interpolation: d3.curveLinear,
|
||||
hoverNumber: {
|
||||
decimalsX: 3,
|
||||
decimalsY: 0,
|
||||
formatter: undefined
|
||||
},
|
||||
xTicks: undefined,
|
||||
yTicks: undefined,
|
||||
collapsed: false,
|
||||
yAxisMin: undefined,
|
||||
yAxisMax: undefined,
|
||||
forceAxisBounds: false,
|
||||
controlButton: {
|
||||
iconCssClass: "elevation-toggle-icon",
|
||||
title: "Elevation"
|
||||
},
|
||||
imperial: false,
|
||||
onExpand: function() {},
|
||||
onCollapse: function() {},
|
||||
},
|
||||
__mileFactor: 0.621371,
|
||||
__footFactor: 3.28084,
|
||||
|
||||
onRemove: function(map) {
|
||||
this._container = null;
|
||||
},
|
||||
|
||||
onAdd: function(map) {
|
||||
this._map = map;
|
||||
|
||||
var opts = this.options;
|
||||
var margin = opts.margins;
|
||||
opts.xTicks = opts.xTicks || Math.round(this._width() / 75);
|
||||
opts.yTicks = opts.yTicks || Math.round(this._height() / 30);
|
||||
opts.hoverNumber.formatter = opts.hoverNumber.formatter || this._formatter;
|
||||
|
||||
var x = this._x = d3.scaleLinear()
|
||||
.range([0, this._width()]);
|
||||
|
||||
var y = this._y = d3.scaleLinear()
|
||||
.range([this._height(), 0]);
|
||||
|
||||
var area = this._area = d3.area()
|
||||
.curve(opts.interpolation)
|
||||
.x(function(d) {
|
||||
var xDiagCoord = x(d.dist);
|
||||
d.xDiagCoord = xDiagCoord;
|
||||
return xDiagCoord;
|
||||
})
|
||||
.y0(this._height())
|
||||
.y1(function(d) {
|
||||
return y(d.altitude);
|
||||
});
|
||||
|
||||
var container = this._container = L.DomUtil.create("div", "elevation");
|
||||
L.DomUtil.addClass(container, opts.theme); //append theme to control
|
||||
|
||||
this._initToggle();
|
||||
|
||||
var cont = d3.select(container);
|
||||
cont.attr("width", opts.width);
|
||||
var svg = cont.append("svg");
|
||||
svg.attr("width", opts.width)
|
||||
.attr("class", "background")
|
||||
.attr("height", opts.height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
var line = d3.line();
|
||||
line = line
|
||||
.x(function(d) {
|
||||
return d3.mouse(svg.select("g"))[0];
|
||||
})
|
||||
.y(function(d) {
|
||||
return this._height();
|
||||
});
|
||||
|
||||
var g = d3.select(this._container).select("svg").select("g");
|
||||
|
||||
this._areapath = g.append("path")
|
||||
.attr("class", "area");
|
||||
|
||||
var background = this._background = g.append("rect")
|
||||
.attr("width", this._width())
|
||||
.attr("height", this._height())
|
||||
.style("fill", "none")
|
||||
.style("stroke", "none")
|
||||
.style("pointer-events", "all");
|
||||
|
||||
if (L.Browser.touch) {
|
||||
|
||||
background.on("touchmove.drag", this._dragHandler.bind(this)).
|
||||
on("touchstart.drag", this._dragStartHandler.bind(this)).
|
||||
on("touchstart.focus", this._mousemoveHandler.bind(this));
|
||||
L.DomEvent.on(this._container, 'touchend', this._dragEndHandler, this);
|
||||
|
||||
}
|
||||
|
||||
background.on("mousemove.focus", this._mousemoveHandler.bind(this)).
|
||||
on("mouseout.focus", this._mouseoutHandler.bind(this)).
|
||||
on("mousedown.drag", this._dragStartHandler.bind(this)).
|
||||
on("mousemove.drag", this._dragHandler.bind(this));
|
||||
L.DomEvent.on(this._container, 'mouseup', this._dragEndHandler, this);
|
||||
|
||||
|
||||
this._xaxisgraphicnode = g.append("g");
|
||||
this._yaxisgraphicnode = g.append("g");
|
||||
this._appendXaxis(this._xaxisgraphicnode);
|
||||
this._appendYaxis(this._yaxisgraphicnode);
|
||||
|
||||
var focusG = this._focusG = g.append("g");
|
||||
this._mousefocus = focusG.append('svg:line')
|
||||
.attr('class', 'mouse-focus-line')
|
||||
.attr('x2', '0')
|
||||
.attr('y2', '0')
|
||||
.attr('x1', '0')
|
||||
.attr('y1', '0');
|
||||
this._focuslabelX = focusG.append("svg:text")
|
||||
.style("pointer-events", "none")
|
||||
.attr("class", "mouse-focus-label-x");
|
||||
this._focuslabelY = focusG.append("svg:text")
|
||||
.style("pointer-events", "none")
|
||||
.attr("class", "mouse-focus-label-y");
|
||||
|
||||
if (this._data) {
|
||||
this._applyData();
|
||||
}
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
_dragHandler: function() {
|
||||
|
||||
//we don´t want map events to occur here
|
||||
d3.event.preventDefault();
|
||||
d3.event.stopPropagation();
|
||||
|
||||
this._gotDragged = true;
|
||||
|
||||
this._drawDragRectangle();
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Draws the currently dragged rectabgle over the chart.
|
||||
*/
|
||||
_drawDragRectangle: function() {
|
||||
|
||||
if (!this._dragStartCoords) {
|
||||
return;
|
||||
}
|
||||
|
||||
var dragEndCoords = this._dragCurrentCoords = d3.mouse(this._background.node());
|
||||
|
||||
var x1 = Math.min(this._dragStartCoords[0], dragEndCoords[0]),
|
||||
x2 = Math.max(this._dragStartCoords[0], dragEndCoords[0]);
|
||||
|
||||
if (!this._dragRectangle && !this._dragRectangleG) {
|
||||
var g = d3.select(this._container).select("svg").select("g");
|
||||
|
||||
this._dragRectangleG = g.append("g");
|
||||
|
||||
this._dragRectangle = this._dragRectangleG.append("rect")
|
||||
.attr("width", x2 - x1)
|
||||
.attr("height", this._height())
|
||||
.attr("x", x1)
|
||||
.attr('class', 'mouse-drag')
|
||||
.style("pointer-events", "none");
|
||||
} else {
|
||||
this._dragRectangle.attr("width", x2 - x1)
|
||||
.attr("x", x1);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Removes the drag rectangle and zoms back to the total extent of the data.
|
||||
*/
|
||||
_resetDrag: function() {
|
||||
|
||||
if (this._dragRectangleG) {
|
||||
|
||||
this._dragRectangleG.remove();
|
||||
this._dragRectangleG = null;
|
||||
this._dragRectangle = null;
|
||||
|
||||
this._hidePositionMarker();
|
||||
|
||||
this._map.fitBounds(this._fullExtent);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Handles end of dragg operations. Zooms the map to the selected items extent.
|
||||
*/
|
||||
_dragEndHandler: function() {
|
||||
|
||||
if (!this._dragStartCoords || !this._gotDragged) {
|
||||
this._dragStartCoords = null;
|
||||
this._gotDragged = false;
|
||||
this._resetDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
this._hidePositionMarker();
|
||||
|
||||
var item1 = this._findItemForX(this._dragStartCoords[0]),
|
||||
item2 = this._findItemForX(this._dragCurrentCoords[0]);
|
||||
|
||||
this._fitSection(item1, item2);
|
||||
|
||||
this._dragStartCoords = null;
|
||||
this._gotDragged = false;
|
||||
|
||||
},
|
||||
|
||||
_dragStartHandler: function() {
|
||||
|
||||
d3.event.preventDefault();
|
||||
d3.event.stopPropagation();
|
||||
|
||||
this._gotDragged = false;
|
||||
|
||||
this._dragStartCoords = d3.mouse(this._background.node());
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Finds a data entry for a given x-coordinate of the diagram
|
||||
*/
|
||||
_findItemForX: function(x) {
|
||||
var bisect = d3.bisector(function(d) {
|
||||
return d.dist;
|
||||
}).left;
|
||||
var xinvert = this._x.invert(x);
|
||||
return bisect(this._data, xinvert);
|
||||
},
|
||||
|
||||
/*
|
||||
* Finds an item with the smallest delta in distance to the given latlng coords
|
||||
*/
|
||||
_findItemForLatLng: function(latlng) {
|
||||
var result = null,
|
||||
d = Infinity;
|
||||
this._data.forEach(function(item) {
|
||||
var dist = latlng.distanceTo(item.latlng);
|
||||
if (dist < d) {
|
||||
d = dist;
|
||||
result = item;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
/** Make the map fit the route section between given indexes. */
|
||||
_fitSection: function(index1, index2) {
|
||||
|
||||
var start = Math.min(index1, index2),
|
||||
end = Math.max(index1, index2);
|
||||
|
||||
var ext = this._calculateFullExtent(this._data.slice(start, end));
|
||||
|
||||
this._map.fitBounds(ext);
|
||||
|
||||
},
|
||||
|
||||
_initToggle: function() {
|
||||
|
||||
/* inspired by L.Control.Layers */
|
||||
|
||||
var container = this._container;
|
||||
|
||||
//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
|
||||
container.setAttribute('aria-haspopup', true);
|
||||
|
||||
L.DomEvent
|
||||
.disableClickPropagation(container);
|
||||
//.disableScrollPropagation(container);
|
||||
|
||||
if (L.Browser.touch) {
|
||||
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
||||
}
|
||||
|
||||
if (this.options.collapsed) {
|
||||
this._collapse();
|
||||
|
||||
if (!L.Browser.android) {
|
||||
L.DomEvent
|
||||
.on(container, 'mouseover', this._expand, this)
|
||||
.on(container, 'mouseout', this._collapse, this);
|
||||
}
|
||||
var link = this._button = L.DomUtil.create('a', "elevation-toggle " + this.options.controlButton
|
||||
.iconCssClass, container);
|
||||
link.href = '#';
|
||||
link.title = this.options.controlButton.title;
|
||||
|
||||
if (L.Browser.touch) {
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.stop)
|
||||
.on(link, 'click', this._expand, this);
|
||||
}
|
||||
|
||||
L.DomEvent.on(link, 'focus', this._expand, this);
|
||||
|
||||
this._map.on('click', this._collapse, this);
|
||||
// TODO keyboard accessibility
|
||||
}
|
||||
},
|
||||
|
||||
_expand: function() {
|
||||
this._container.className = this._container.className.replace(' elevation-collapsed', '');
|
||||
this.options.onExpand();
|
||||
},
|
||||
|
||||
_collapse: function() {
|
||||
L.DomUtil.addClass(this._container, 'elevation-collapsed');
|
||||
this.options.onCollapse();
|
||||
},
|
||||
|
||||
_width: function() {
|
||||
var opts = this.options;
|
||||
return opts.width - opts.margins.left - opts.margins.right;
|
||||
},
|
||||
|
||||
_height: function() {
|
||||
var opts = this.options;
|
||||
return opts.height - opts.margins.top - opts.margins.bottom;
|
||||
},
|
||||
|
||||
/*
|
||||
* Fromatting funciton using the given decimals and seperator
|
||||
*/
|
||||
_formatter: function(num, dec, sep) {
|
||||
var res;
|
||||
if (dec === 0) {
|
||||
res = Math.round(num) + "";
|
||||
} else {
|
||||
res = L.Util.formatNum(num, dec) + "";
|
||||
}
|
||||
var numbers = res.split(".");
|
||||
if (numbers[1]) {
|
||||
var d = dec - numbers[1].length;
|
||||
for (; d > 0; d--) {
|
||||
numbers[1] += "0";
|
||||
}
|
||||
res = numbers.join(sep || ".");
|
||||
}
|
||||
return res;
|
||||
},
|
||||
|
||||
_appendYaxis: function(y) {
|
||||
var opts = this.options;
|
||||
|
||||
if (opts.imperial) {
|
||||
y.attr("class", "y axis")
|
||||
.call(d3.axisLeft()
|
||||
.scale(this._y)
|
||||
.ticks(this.options.yTicks))
|
||||
.append("text")
|
||||
.attr("x", -37)
|
||||
.attr("y", 3)
|
||||
.style("text-anchor", "end")
|
||||
.style("fill", "currentColor")
|
||||
.text("ft");
|
||||
} else {
|
||||
y.attr("class", "y axis")
|
||||
.call(d3.axisLeft()
|
||||
.scale(this._y)
|
||||
.ticks(this.options.yTicks))
|
||||
.append("text")
|
||||
.attr("x", -10)
|
||||
.attr("y", 3)
|
||||
.style("text-anchor", "end")
|
||||
.style("fill", "currentColor")
|
||||
.text("m");
|
||||
}
|
||||
},
|
||||
|
||||
_appendXaxis: function(x) {
|
||||
var opts = this.options;
|
||||
|
||||
if (opts.imperial) {
|
||||
x.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + this._height() + ")")
|
||||
.call(d3.axisBottom()
|
||||
.scale(this._x)
|
||||
.ticks(this.options.xTicks))
|
||||
.append("text")
|
||||
.attr("x", this._width() + 10)
|
||||
.attr("y", 15)
|
||||
.style("text-anchor", "end")
|
||||
.style("fill", "currentColor")
|
||||
.text("mi");
|
||||
} else {
|
||||
x.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + this._height() + ")")
|
||||
.call(d3.axisBottom()
|
||||
.scale(this._x)
|
||||
.ticks(this.options.xTicks))
|
||||
.append("text")
|
||||
.attr("x", this._width() + 10)
|
||||
.attr("y", 15)
|
||||
.style("text-anchor", "end")
|
||||
.style("fill", "currentColor")
|
||||
.text("km");
|
||||
}
|
||||
},
|
||||
|
||||
_updateAxis: function() {
|
||||
this._xaxisgraphicnode.selectAll("g").remove();
|
||||
this._xaxisgraphicnode.selectAll("path").remove();
|
||||
this._xaxisgraphicnode.selectAll("text").remove();
|
||||
this._yaxisgraphicnode.selectAll("g").remove();
|
||||
this._yaxisgraphicnode.selectAll("path").remove();
|
||||
this._yaxisgraphicnode.selectAll("text").remove();
|
||||
this._appendXaxis(this._xaxisgraphicnode);
|
||||
this._appendYaxis(this._yaxisgraphicnode);
|
||||
},
|
||||
|
||||
_mouseoutHandler: function() {
|
||||
|
||||
this._hidePositionMarker();
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Hides the position-/heigth indication marker drawn onto the map
|
||||
*/
|
||||
_hidePositionMarker: function() {
|
||||
|
||||
if (this._marker) {
|
||||
this._map.removeLayer(this._marker);
|
||||
this._marker = null;
|
||||
}
|
||||
if (this._mouseHeightFocus) {
|
||||
this._mouseHeightFocus.style("visibility", "hidden");
|
||||
this._mouseHeightFocusLabel.style("visibility", "hidden");
|
||||
}
|
||||
if (this._pointG) {
|
||||
this._pointG.style("visibility", "hidden");
|
||||
}
|
||||
this._focusG.style("visibility", "hidden");
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Handles the moueseover the chart and displays distance and altitude level
|
||||
*/
|
||||
_mousemoveHandler: function(d, i, ctx) {
|
||||
if (!this._data || this._data.length === 0) {
|
||||
return;
|
||||
}
|
||||
var coords = d3.mouse(this._background.node());
|
||||
var opts = this.options;
|
||||
|
||||
var item = this._data[this._findItemForX(coords[0])];
|
||||
if(!item) return;
|
||||
|
||||
var alt = item.altitude,
|
||||
dist = item.dist,
|
||||
ll = item.latlng,
|
||||
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
|
||||
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);
|
||||
|
||||
this._showDiagramIndicator(item, coords[0]);
|
||||
|
||||
var layerpoint = this._map.latLngToLayerPoint(ll);
|
||||
|
||||
//if we use a height indicator we create one with SVG
|
||||
//otherwise we show a marker
|
||||
if (opts.useHeightIndicator) {
|
||||
|
||||
if (!this._mouseHeightFocus) {
|
||||
|
||||
var heightG = d3.select(".leaflet-overlay-pane svg")
|
||||
.append("g");
|
||||
this._mouseHeightFocus = heightG.append('svg:line')
|
||||
.attr("class", opts.theme + " height-focus line")
|
||||
.attr("x2", 0)
|
||||
.attr("y2", 0)
|
||||
.attr("x1", 0)
|
||||
.attr("y1", 0);
|
||||
|
||||
var pointG = this._pointG = heightG.append("g");
|
||||
pointG.append("svg:circle")
|
||||
.attr("r", 4)
|
||||
.attr("cx", 0)
|
||||
.attr("cy", 0)
|
||||
.attr("class", opts.theme + " height-focus circle-lower");
|
||||
|
||||
this._mouseHeightFocusLabel = heightG.append("svg:text")
|
||||
.attr("class", opts.theme + " height-focus-label")
|
||||
.style("pointer-events", "none");
|
||||
|
||||
}
|
||||
|
||||
var normalizedAlt = this._height() / this._maxElevation * alt;
|
||||
var normalizedY = layerpoint.y - normalizedAlt;
|
||||
var compY = Math.max(3 - normalizedAlt, 0) + 3;
|
||||
this._mouseHeightFocus.attr("x1", layerpoint.x)
|
||||
.attr("x2", layerpoint.x)
|
||||
.attr("y1", layerpoint.y)
|
||||
.attr("y2", normalizedY)
|
||||
.style("visibility", "visible");
|
||||
|
||||
this._pointG.attr("transform", "translate(" + layerpoint.x + "," + layerpoint.y + ")")
|
||||
.style("visibility", "visible");
|
||||
|
||||
if (opts.imperial) {
|
||||
this._mouseHeightFocusLabel.attr("x", layerpoint.x)
|
||||
.attr("y", normalizedY - compY)
|
||||
.text(numY + " ft")
|
||||
.style("visibility", "visible");
|
||||
} else {
|
||||
this._mouseHeightFocusLabel.attr("x", layerpoint.x)
|
||||
.attr("y", normalizedY - compY)
|
||||
.text(numY + " m")
|
||||
.style("visibility", "visible");
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (!this._marker) {
|
||||
|
||||
this._marker = new L.Marker(ll).addTo(this._map);
|
||||
|
||||
} else {
|
||||
|
||||
this._marker.setLatLng(ll);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Parsing of GeoJSON data lines and their elevation in z-coordinate
|
||||
*/
|
||||
_addGeoJSONData: function(coords) {
|
||||
var opts = this.options;
|
||||
if (coords) {
|
||||
var data = this._data || [];
|
||||
var dist = this._dist || 0;
|
||||
var ele = this._maxElevation || 0;
|
||||
for (var i = 0; i < coords.length; i++) {
|
||||
var s = new L.LatLng(coords[i][1], coords[i][0]);
|
||||
var e = new L.LatLng(coords[i ? i - 1 : 0][1], coords[i ? i - 1 : 0][0]);
|
||||
var newdist = opts.imperial ? s.distanceTo(e) * this.__mileFactor : s.distanceTo(e);
|
||||
dist = dist + Math.round(newdist / 1000 * 100000) / 100000;
|
||||
ele = ele < coords[i][2] ? coords[i][2] : ele;
|
||||
data.push({
|
||||
dist: dist,
|
||||
altitude: opts.imperial ? coords[i][2] * this.__footFactor : coords[i][2],
|
||||
x: coords[i][0],
|
||||
y: coords[i][1],
|
||||
latlng: s
|
||||
});
|
||||
}
|
||||
this._dist = dist;
|
||||
this._data = data;
|
||||
ele = opts.imperial ? ele * this.__footFactor : ele;
|
||||
this._maxElevation = ele;
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Parsing function for GPX data as used by https://github.com/mpetazzoni/leaflet-gpx
|
||||
*/
|
||||
_addGPXdata: function(coords) {
|
||||
var opts = this.options;
|
||||
if (coords) {
|
||||
var data = this._data || [];
|
||||
var dist = this._dist || 0;
|
||||
var ele = this._maxElevation || 0;
|
||||
for (var i = 0; i < coords.length; i++) {
|
||||
var s = coords[i];
|
||||
var e = coords[i ? i - 1 : 0];
|
||||
var newdist = opts.imperial ? s.distanceTo(e) * this.__mileFactor : s.distanceTo(e);
|
||||
dist = dist + Math.round(newdist / 1000 * 100000) / 100000;
|
||||
ele = ele < s.meta.ele ? s.meta.ele : ele;
|
||||
data.push({
|
||||
dist: dist,
|
||||
altitude: opts.imperial ? s.meta.ele * this.__footFactor : s.meta.ele,
|
||||
x: s.lng,
|
||||
y: s.lat,
|
||||
latlng: s
|
||||
});
|
||||
}
|
||||
this._dist = dist;
|
||||
this._data = data;
|
||||
ele = opts.imperial ? ele * this.__footFactor : ele;
|
||||
this._maxElevation = ele;
|
||||
}
|
||||
},
|
||||
|
||||
_addData: function(d) {
|
||||
var geom = d && d.geometry && d.geometry;
|
||||
var i;
|
||||
|
||||
if (geom) {
|
||||
switch (geom.type) {
|
||||
case 'LineString':
|
||||
this._addGeoJSONData(geom.coordinates);
|
||||
break;
|
||||
|
||||
case 'MultiLineString':
|
||||
for (i = 0; i < geom.coordinates.length; i++) {
|
||||
this._addGeoJSONData(geom.coordinates[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error('Invalid GeoJSON object.');
|
||||
}
|
||||
}
|
||||
|
||||
var feat = d && d.type === "FeatureCollection";
|
||||
if (feat) {
|
||||
for (i = 0; i < d.features.length; i++) {
|
||||
this._addData(d.features[i]);
|
||||
}
|
||||
}
|
||||
|
||||
if (d && d._latlngs) {
|
||||
this._addGPXdata(d._latlngs);
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Calculates the full extent of the data array
|
||||
*/
|
||||
_calculateFullExtent: function(data) {
|
||||
|
||||
if (!data || data.length < 1) {
|
||||
throw new Error("no data in parameters");
|
||||
}
|
||||
|
||||
var ext = new L.latLngBounds(data[0].latlng, data[0].latlng);
|
||||
|
||||
data.forEach(function(item) {
|
||||
ext.extend(item.latlng);
|
||||
});
|
||||
|
||||
return ext;
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Add data to the diagram either from GPX or GeoJSON and
|
||||
* update the axis domain and data
|
||||
*/
|
||||
addData: function(d, layer) {
|
||||
this._addData(d);
|
||||
if (this._container) {
|
||||
this._applyData();
|
||||
}
|
||||
if (layer === null && d.on) {
|
||||
layer = d;
|
||||
}
|
||||
if (layer) {
|
||||
layer.on("mousemove", this._handleLayerMouseOver.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Handles mouseover events of the data layers on the map.
|
||||
*/
|
||||
_handleLayerMouseOver: function(evt) {
|
||||
if (!this._data || this._data.length === 0) {
|
||||
return;
|
||||
}
|
||||
var latlng = evt.latlng;
|
||||
var item = this._findItemForLatLng(latlng);
|
||||
if (item) {
|
||||
var x = item.xDiagCoord;
|
||||
this._showDiagramIndicator(item, x);
|
||||
}
|
||||
},
|
||||
|
||||
_showDiagramIndicator: function(item, xCoordinate) {
|
||||
var opts = this.options;
|
||||
this._focusG.style("visibility", "visible");
|
||||
this._mousefocus.attr('x1', xCoordinate)
|
||||
.attr('y1', 3)
|
||||
.attr('x2', xCoordinate)
|
||||
.attr('y2', this._height())
|
||||
.classed('hidden', false);
|
||||
|
||||
var alt = item.altitude,
|
||||
dist = item.dist,
|
||||
ll = item.latlng,
|
||||
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
|
||||
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);
|
||||
|
||||
if (opts.imperial) {
|
||||
this._focuslabelX.attr("x", xCoordinate)
|
||||
.text(numY + " ft");
|
||||
this._focuslabelY.attr("y", this._height() - 5)
|
||||
.attr("x", xCoordinate + 3)
|
||||
.text(numX + " mi");
|
||||
} else {
|
||||
this._focuslabelX.attr("x", xCoordinate)
|
||||
.text(numY + " m");
|
||||
this._focuslabelY.attr("y", this._height() - 5)
|
||||
.attr("x", xCoordinate + 3)
|
||||
.text(numX + " km");
|
||||
}
|
||||
},
|
||||
|
||||
_applyData: function() {
|
||||
var xdomain = d3.extent(this._data, function(d) {
|
||||
return d.dist;
|
||||
});
|
||||
var ydomain = d3.extent(this._data, function(d) {
|
||||
return d.altitude;
|
||||
});
|
||||
var opts = this.options;
|
||||
|
||||
if (opts.yAxisMin !== undefined && (opts.yAxisMin < ydomain[0] || opts.forceAxisBounds)) {
|
||||
ydomain[0] = opts.yAxisMin;
|
||||
}
|
||||
if (opts.yAxisMax !== undefined && (opts.yAxisMax > ydomain[1] || opts.forceAxisBounds)) {
|
||||
ydomain[1] = opts.yAxisMax;
|
||||
}
|
||||
|
||||
this._x.domain(xdomain);
|
||||
this._y.domain(ydomain);
|
||||
this._areapath.datum(this._data)
|
||||
.attr("d", this._area);
|
||||
this._updateAxis();
|
||||
|
||||
this._fullExtent = this._calculateFullExtent(this._data);
|
||||
},
|
||||
|
||||
/*
|
||||
* Reset data
|
||||
*/
|
||||
_clearData: function() {
|
||||
this._data = null;
|
||||
this._dist = null;
|
||||
this._maxElevation = null;
|
||||
},
|
||||
|
||||
/*
|
||||
* Reset data and display
|
||||
*/
|
||||
clear: function() {
|
||||
|
||||
this._clearData();
|
||||
|
||||
if (!this._areapath) {
|
||||
return;
|
||||
}
|
||||
|
||||
// workaround for 'Error: Problem parsing d=""' in Webkit when empty data
|
||||
// https://groups.google.com/d/msg/d3-js/7rFxpXKXFhI/HzIO_NPeDuMJ
|
||||
//this._areapath.datum(this._data).attr("d", this._area);
|
||||
this._areapath.attr("d", "M0 0");
|
||||
|
||||
this._x.domain([0, 1]);
|
||||
this._y.domain([0, 1]);
|
||||
this._updateAxis();
|
||||
},
|
||||
hide: function() {
|
||||
this._container.style.display = "none";
|
||||
},
|
||||
show: function() {
|
||||
this._container.style.display = "block";
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
L.control.elevation = function(options) {
|
||||
return new L.Control.Elevation(options);
|
||||
};
|
||||
Reference in new issue
Block a user