2 lines
11 KiB
JavaScript
2 lines
11 KiB
JavaScript
/*! Leaflet.Elevation 27-01-2015 */
|
|
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:!0,interpolation:"linear",hoverNumber:{decimalsX:3,decimalsY:0,formatter:void 0},xTicks:void 0,yTicks:void 0,collapsed:!1,yAxisMin:void 0,yAxisMax:void 0,forceAxisBounds:!1},onRemove:function(){this._container=null},onAdd:function(a){this._map=a;var b=this.options,c=b.margins;b.xTicks=b.xTicks||Math.round(this._width()/75),b.yTicks=b.yTicks||Math.round(this._height()/30),b.hoverNumber.formatter=b.hoverNumber.formatter||this._formatter,d3.select("body").classed(b.theme,!0);var d=this._x=d3.scale.linear().range([0,this._width()]),e=this._y=d3.scale.linear().range([this._height(),0]),f=(this._area=d3.svg.area().interpolate(b.interpolation).x(function(a){return d(a.dist)}).y0(this._height()).y1(function(a){return e(a.altitude)}),this._container=L.DomUtil.create("div","elevation"));this._initToggle();var g=d3.select(f);g.attr("width",b.width),g.attr("id","elevation");var h=g.append("svg");h.attr("width",b.width).attr("class","background").attr("height",b.height).append("g").attr("transform","translate("+c.left+","+c.top+")");var i=d3.svg.line();i=i.x(function(){return d3.mouse(h.select("g"))[0]}).y(function(){return this._height()});var j=d3.select(this._container).select("svg").select("g");this._areapath=j.append("path").attr("class","area");var k=this._background=j.append("rect").attr("width",this._width()).attr("height",this._height()).style("fill","none").style("stroke","none").style("pointer-events","all");L.Browser.touch?(k.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)):(k.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=j.append("g"),this._yaxisgraphicnode=j.append("g"),this._appendXaxis(this._xaxisgraphicnode),this._appendYaxis(this._yaxisgraphicnode);var l=this._focusG=j.append("g");return this._mousefocus=l.append("svg:line").attr("class","mouse-focus-line").attr("x2","0").attr("y2","0").attr("x1","0").attr("y1","0"),this._focuslabelXbbox=l.append("svg:rect").attr("rx","5").attr("ry","5").attr("class","mouse-focus-label-x-bbox"),this._focuslabelX=l.append("svg:text").style("pointer-events","none").attr("class","mouse-focus-label-x"),this._focuslabelYbbox=l.append("svg:rect").attr("rx","5").attr("ry","5").attr("class","mouse-focus-label-y-bbox"),this._focuslabelY=l.append("svg:text").style("pointer-events","none").attr("class","mouse-focus-label-y"),this._data&&this._applyData(),f},_dragHandler:function(){d3.event.preventDefault(),d3.event.stopPropagation(),this._gotDragged=!0,this._drawDragRectangle()},_drawDragRectangle:function(){if(this._dragStartCoords){var a=this._dragCurrentCoords=d3.mouse(this._background.node()),b=Math.min(this._dragStartCoords[0],a[0]),c=Math.max(this._dragStartCoords[0],a[0]);if(this._dragRectangle||this._dragRectangleG)this._dragRectangle.attr("width",c-b).attr("x",b);else{var d=d3.select(this._container).select("svg").select("g");this._dragRectangleG=d.append("g"),this._dragRectangle=this._dragRectangleG.append("rect").attr("width",c-b).attr("height",this._height()).attr("x",b).attr("class","mouse-drag").style("pointer-events","none")}}},_resetDrag:function(){this._dragRectangleG&&(this._dragRectangleG.remove(),this._dragRectangleG=null,this._dragRectangle=null,this._hidePositionMarker(),this._map.fitBounds(this._fullExtent))},_dragEndHandler:function(){if(!this._dragStartCoords||!this._gotDragged)return this._dragStartCoords=null,this._gotDragged=!1,void this._resetDrag();this._hidePositionMarker();var a=this._findItemForX(this._dragStartCoords[0]),b=this._findItemForX(this._dragCurrentCoords[0]);this._fitSection(a,b),this._dragStartCoords=null,this._gotDragged=!1},_dragStartHandler:function(){d3.event.preventDefault(),d3.event.stopPropagation(),this._gotDragged=!1,this._dragStartCoords=d3.mouse(this._background.node())},_findItemForX:function(a){var b=d3.bisector(function(a){return a.dist}).left,c=this._x.invert(a);return b(this._data,c)},_fitSection:function(a,b){var c=Math.min(a,b),d=Math.max(a,b),e=this._calculateFullExtent(this._data.slice(c,d));this._map.fitBounds(e)},_initToggle:function(){var a=this._container;if(a.setAttribute("aria-haspopup",!0),L.Browser.touch?L.DomEvent.on(a,"click",L.DomEvent.stopPropagation):L.DomEvent.disableClickPropagation(a),this.options.collapsed){this._collapse(),L.Browser.android||L.DomEvent.on(a,"mouseover",this._expand,this).on(a,"mouseout",this._collapse,this);var b=this._button=L.DomUtil.create("a","elevation-toggle",a);b.href="#",b.title="Elevation",L.Browser.touch?L.DomEvent.on(b,"click",L.DomEvent.stop).on(b,"click",this._expand,this):L.DomEvent.on(b,"focus",this._expand,this),this._map.on("click",this._collapse,this)}},_expand:function(){this._container.className=this._container.className.replace(" elevation-collapsed","")},_collapse:function(){L.DomUtil.addClass(this._container,"elevation-collapsed")},_width:function(){var a=this.options;return a.width-a.margins.left-a.margins.right},_height:function(){var a=this.options;return a.height-a.margins.top-a.margins.bottom},_formatter:function(a,b,c){var d;d=0===b?Math.round(a)+"":L.Util.formatNum(a,b)+"";var e=d.split(".");if(e[1]){for(var f=b-e[1].length;f>0;f--)e[1]+="0";d=e.join(c||".")}return d},_appendYaxis:function(a){a.attr("class","y axis").call(d3.svg.axis().scale(this._y).ticks(this.options.yTicks).orient("left")).append("text").attr("x",-45).attr("y",3).style("text-anchor","end").text("m")},_appendXaxis:function(a){a.attr("class","x axis").attr("transform","translate(0,"+this._height()+")").call(d3.svg.axis().scale(this._x).ticks(this.options.xTicks).orient("bottom")).append("text").attr("x",this._width()+20).attr("y",15).style("text-anchor","end").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()},_hidePositionMarker:function(){this._marker&&(this._map.removeLayer(this._marker),this._marker=null),this._mouseHeightFocusLabel&&(this._mouseHeightFocusLabel.style("visibility","hidden"),this._mouseHeightFocusLabelbbox.style("visibility","hidden")),this._pointG&&this._pointG.style("visibility","hidden"),this._focusG.style("visibility","hidden")},_mousemoveHandler:function(){if(this._data&&0!==this._data.length){var a=d3.mouse(this._background.node()),b=this.options;this._focusG.style("visibility","visible"),this._mousefocus.attr("x1",a[0]).attr("y1",0).attr("x2",a[0]).attr("y2",this._height()).classed("hidden",!1);var c=(d3.bisector(function(a){return a.dist}).left,this._data[this._findItemForX(a[0])]),d=c.altitude,e=c.dist,f=c.latlng,g=b.hoverNumber.formatter(d,b.hoverNumber.decimalsY),h=b.hoverNumber.formatter(e,b.hoverNumber.decimalsX);this._focuslabelX.attr("y",this._height()-25).attr("x",a[0]+5).text(g+" m"),this._focuslabelY.attr("y",this._height()-7).attr("x",a[0]+5).text(h+" km");var i=this._focuslabelX.node().getBBox(),j=1;this._focuslabelXbbox.attr("x",i.x-2*j).attr("y",i.y-j).attr("width",i.width+4*j).attr("height",i.height+2*j);var k=this._focuslabelY.node().getBBox();this._focuslabelYbbox.attr("x",k.x-2*j).attr("y",k.y-j).attr("width",k.width+4*j).attr("height",k.height+2*j);var l=this._map.latLngToLayerPoint(f);if(b.useHeightIndicator){if(!this._mouseHeightFocusLabel){var m=d3.select(".leaflet-overlay-pane svg").append("g"),n=this._pointG=m.append("g");n.append("svg:circle").attr("r",6).attr("cx",0).attr("cy",0).attr("class","height-focus circle-lower"),this._mouseHeightFocusLabelbbox=m.append("svg:rect").attr("rx","5").attr("ry","5").attr("class","height-focus-label-bbox"),this._mouseHeightFocusLabel=m.append("svg:text").attr("class","height-focus-label").style("pointer-events","none")}this._pointG.attr("transform","translate("+l.x+","+l.y+")").style("visibility","visible"),this._mouseHeightFocusLabel.attr("x",l.x+10).attr("y",l.y+4).text(g+" m").style("visibility","visible");var o=this._mouseHeightFocusLabel.node().getBBox();this._mouseHeightFocusLabelbbox.attr("x",o.x-2*j).attr("y",o.y-j).attr("width",o.width+4*j).attr("height",o.height+2*j).style("visibility","visible")}else this._marker?this._marker.setLatLng(f):this._marker=new L.Marker(f).addTo(this._map)}},_addGeoJSONData:function(a){if(a){for(var b=this._data||[],c=this._dist||0,d=this._maxElevation||0,e=0;e<a.length;e++){var f=new L.LatLng(a[e][1],a[e][0]),g=new L.LatLng(a[e?e-1:0][1],a[e?e-1:0][0]),h=f.distanceTo(g);c+=Math.round(h/1e3*1e5)/1e5,d=d<a[e][2]?a[e][2]:d,b.push({dist:c,altitude:a[e][2],x:a[e][0],y:a[e][1],latlng:f})}this._dist=c,this._data=b,this._maxElevation=d}},_addGPXdata:function(a){if(a){for(var b=this._data||[],c=this._dist||0,d=this._maxElevation||0,e=0;e<a.length;e++){var f=a[e],g=a[e?e-1:0],h=f.distanceTo(g);c+=Math.round(h/1e3*1e5)/1e5,d=d<f.meta.ele?f.meta.ele:d,b.push({dist:c,altitude:f.meta.ele,x:f.lng,y:f.lat,latlng:f})}this._dist=c,this._data=b,this._maxElevation=d}},_addData:function(a){var b,c=a&&a.geometry&&a.geometry;if(c)switch(c.type){case"LineString":this._addGeoJSONData(c.coordinates);break;case"MultiLineString":for(b=0;b<c.coordinates.length;b++)this._addGeoJSONData(c.coordinates[b]);break;default:throw new Error("Invalid GeoJSON object.")}var d=a&&"FeatureCollection"===a.type;if(d)for(b=0;b<a.features.length;b++)this._addData(a.features[b]);a&&a._latlngs&&this._addGPXdata(a._latlngs)},_calculateFullExtent:function(a){if(!a||a.length<1)throw new Error("no data in parameters");var b=new L.latLngBounds(a[0].latlng,a[0].latlng);return a.forEach(function(a){b.extend(a.latlng)}),b},addData:function(a){this._addData(a),this._container&&this._applyData()},_applyData:function(){var a=d3.extent(this._data,function(a){return a.dist}),b=d3.extent(this._data,function(a){return a.altitude}),c=this.options;void 0!==c.yAxisMin&&(c.yAxisMin<b[0]||c.forceAxisBounds)&&(b[0]=c.yAxisMin),void 0!==c.yAxisMax&&(c.yAxisMax>b[1]||c.forceAxisBounds)&&(b[1]=c.yAxisMax),this._x.domain(a),this._y.domain(b),this._areapath.datum(this._data).attr("d",this._area),this._updateAxis(),this._fullExtent=this._calculateFullExtent(this._data)},_clearData:function(){this._data=null,this._dist=null,this._maxElevation=null},clear:function(){this._clearData(),this._areapath&&(this._areapath.attr("d","M0 0"),this._x.domain([0,1]),this._y.domain([0,1]),this._updateAxis())}}),L.control.elevation=function(a){return new L.Control.Elevation(a)}; |