ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Leaflet.Elevation PR merged (not released, use master)

Browse source
This commit is contained in:
Norbert Renner 2014-02-08 17:43:56 +01:00
parent 647dc26e1b
commit d05bd937f3
15 changed files with 1152 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -1,2 +1,5 @@
bower_components/leaflet-routing/libs/
bower_components/Leaflet.Elevation/*
!bower_components/Leaflet.Elevation/dist/
!bower_components/Leaflet.Elevation/src/
nbproject/

3
bower.json
View file

@ -11,6 +11,7 @@
"leaflet-gpx": "mpetazzoni/leaflet-gpx",
"leaflet-search": "*",
"leaflet-plugins": "*",
"leaflet-routing": "nrenner/leaflet-routing#reroute"
"leaflet-routing": "nrenner/leaflet-routing#reroute",
"Leaflet.Elevation": "MrMufflon/Leaflet.Elevation#master"
}
}

1
bower_components/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.css vendored Normal file
View file

@ -0,0 +1 @@
.lime-theme .leaflet-control.elevation .background{background-color:rgba(156,194,34,.2);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.lime-theme .leaflet-control.elevation .axis path,.lime-theme .leaflet-control.elevation .axis line{fill:none;stroke:#566b13;stroke-width:2}.lime-theme .leaflet-control.elevation .area{fill:#9cc222}.lime-theme .leaflet-control.elevation .mouse-focus-line{pointer-events:none;stroke-width:1;stroke:#101404}.lime-theme .leaflet-control.elevation .elevation-toggle{cursor:pointer;box-shadow:0 1px 7px rgba(0,0,0,.4);-webkit-border-radius:5px;border-radius:5px;width:36px;height:36px;background:url(images/elevation.png) no-repeat center center #f8f8f9}.lime-theme .leaflet-control.elevation-collapsed .background{display:none}.lime-theme .leaflet-control.elevation-collapsed .elevation-toggle{display:block}.lime-theme .leaflet-overlay-pane .height-focus{stroke:#9cc222;fill:#9cc222}.lime-theme .leaflet-overlay-pane .height-focus.line{pointer-events:none;stroke-width:2}.steelblue-theme .leaflet-control.elevation .background{background-color:rgba(70,130,180,.2);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.steelblue-theme .leaflet-control.elevation .axis path,.steelblue-theme .leaflet-control.elevation .axis line{fill:none;stroke:#0d1821;stroke-width:2}.steelblue-theme .leaflet-control.elevation .area{fill:#4682b4}.steelblue-theme .leaflet-control.elevation .mouse-focus-line{pointer-events:none;stroke-width:1;stroke:#0d1821}.steelblue-theme .leaflet-control.elevation .elevation-toggle{cursor:pointer;box-shadow:0 1px 7px rgba(0,0,0,.4);-webkit-border-radius:5px;border-radius:5px;width:36px;height:36px;background:url(images/elevation.png) no-repeat center center #f8f8f9}.steelblue-theme .leaflet-control.elevation-collapsed .background{display:none}.steelblue-theme .leaflet-control.elevation-collapsed .elevation-toggle{display:block}.steelblue-theme .leaflet-overlay-pane .height-focus{stroke:#4682b4;fill:#4682b4}.steelblue-theme .leaflet-overlay-pane .height-focus.line{pointer-events:none;stroke-width:2}.purple-theme .leaflet-control.elevation .background{background-color:rgba(115,44,123,.2);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.purple-theme .leaflet-control.elevation .axis path,.purple-theme .leaflet-control.elevation .axis line{fill:none;stroke:#2d1130;stroke-width:2}.purple-theme .leaflet-control.elevation .area{fill:#732c7b}.purple-theme .leaflet-control.elevation .mouse-focus-line{pointer-events:none;stroke-width:1;stroke:#000}.purple-theme .leaflet-control.elevation .elevation-toggle{cursor:pointer;box-shadow:0 1px 7px rgba(0,0,0,.4);-webkit-border-radius:5px;border-radius:5px;width:36px;height:36px;background:url(images/elevation.png) no-repeat center center #f8f8f9}.purple-theme .leaflet-control.elevation-collapsed .background{display:none}.purple-theme .leaflet-control.elevation-collapsed .elevation-toggle{display:block}.purple-theme .leaflet-overlay-pane .height-focus{stroke:#732c7b;fill:#732c7b}.purple-theme .leaflet-overlay-pane .height-focus.line{pointer-events:none;stroke-width:2}

2
bower_components/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

449
bower_components/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.src.js vendored Normal file
View file

@ -0,0 +1,449 @@
L.Control.Elevation = L.Control.extend({
options: {
position: "topright",
theme: "lime-theme",
width: 600,
height: 175,
margins: {
top: 10,
right: 20,
bottom: 30,
left: 50
},
useHeightIndicator: true,
interpolation: "linear",
hoverNumber: {
decimalsX: 3,
decimalsY: 0,
formatter: undefined
},
xTicks: undefined,
yTicks: undefined,
collapsed: false
},
onRemove: function(map) {
this._container = null;
this._data = null;
this._dist = null;
},
onAdd: function(map) {
this._map = map;
var opts = this.options;
var margin = opts.margins;
opts.width = opts.width - margin.left - margin.right;
opts.height = opts.height - margin.top - margin.bottom;
opts.xTicks = opts.xTicks || Math.round(opts.width / 75);
opts.yTicks = opts.yTicks || Math.round(opts.height / 30);
opts.hoverNumber.formatter = opts.hoverNumber.formatter || this._formatter;
//append theme name on body
d3.select("body").classed(opts.theme, true);
var x = this._x = d3.scale.linear()
.range([0, opts.width]);
var y = this._y = d3.scale.linear()
.range([opts.height, 0]);
var area = this._area = d3.svg.area()
.interpolate(opts.interpolation)
.x(function(d) {
return x(d.dist);
})
.y0(opts.height)
.y1(function(d) {
return y(d.altitude);
});
var container = this._container = L.DomUtil.create("div", "elevation");
this._initToggle();
var complWidth = opts.width + margin.left + margin.right;
var cont = d3.select(container);
cont.attr("width", complWidth);
var svg = cont.append("svg");
svg.attr("width", complWidth)
.attr("class", "background")
.attr("height", opts.height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line();
line = line
.x(function(d) {
return d3.mouse(svg.select("g"))[0];
})
.y(function(d) {
return opts.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", opts.width)
.attr("height", opts.height)
.style("fill", "none")
.style("stroke", "none")
.style("pointer-events", "all");
background.on("mousemove", this._mousemoveHandler.bind(this));
background.on("mouseout", this._mouseoutHandler.bind(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");
return container;
},
_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);
if (!L.Browser.touch) {
L.DomEvent
.disableClickPropagation(container);
//.disableScrollPropagation(container);
} else {
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', container);
link.href = '#';
link.title = 'Elevation';
if (L.Browser.touch) {
L.DomEvent
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', this._expand, this);
}
else {
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', '');
},
_collapse: function () {
L.DomUtil.addClass(this._container, 'elevation-collapsed');
},
/*
* 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) {
y.attr("class", "y axis")
.call(d3.svg.axis()
.scale(this._y)
.ticks(this.options.yTicks)
.orient("left"))
.append("text")
.attr("x", 15)
.style("text-anchor", "end")
.text("m");
},
_appendXaxis: function(x) {
x.attr("class", "x axis")
.attr("transform", "translate(0," + this.options.height + ")")
.call(d3.svg.axis()
.scale(this._x)
.ticks(this.options.xTicks)
.orient("bottom"))
.append("text")
.attr("x", this.options.width + 15)
.style("text-anchor", "end")
.text("km");
},
_updateAxis: function() {
this._xaxisgraphicnode.selectAll("axis").remove();
this._yaxisgraphicnode.selectAll("axis").remove();
this._appendXaxis(this._xaxisgraphicnode);
this._appendYaxis(this._yaxisgraphicnode);
},
_mouseoutHandler: 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");
},
_mousemoveHandler: function(d, i, ctx) {
if (!this._data || this._data.length === 0) {
return;
}
var coords = d3.mouse(this._background.node());
var opts = this.options;
this._focusG.style("visibility", "visible");
this._mousefocus.attr('x1', coords[0])
.attr('y1', 0)
.attr('x2', coords[0])
.attr('y2', opts.height)
.classed('hidden', false);
var bisect = d3.bisector(function(d) {
return d.dist;
}).left;
var xinvert = this._x.invert(coords[0]),
item = bisect(this._data, xinvert),
alt = this._data[item].altitude,
dist = this._data[item].dist,
ll = this._data[item].latlng,
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);
this._focuslabelX.attr("x", coords[0])
.text(numY + " m");
this._focuslabelY.attr("y", opts.height - 5)
.attr("x", coords[0])
.text(numX + " km");
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', '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", 6)
.attr("cx", 0)
.attr("cy", 0)
.attr("class", "height-focus circle-lower");
this._mouseHeightFocusLabel = heightG.append("svg:text")
.attr("class", "height-focus-label")
.style("pointer-events", "none");
}
var normalizedAlt = this.options.height / this._maxElevation * alt;
var normalizedY = layerpoint.y - normalizedAlt;
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");
this._mouseHeightFocusLabel.attr("x", layerpoint.x)
.attr("y", normalizedY)
.text(alt + " 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) {
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 = s.distanceTo(e);
dist = dist + newdist / 1000;
ele = ele < coords[i][2] ? coords[i][2] : ele;
data.push({
dist: dist,
altitude: coords[i][2],
x: coords[i][0],
y: coords[i][1],
latlng: s
});
}
this._dist = dist;
this._data = data;
this._maxElevation = ele;
}
},
/*
* Parsing function for GPX data as used by https://github.com/mpetazzoni/leaflet-gpx
*/
_addGPXdata: function(coords) {
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 = s.distanceTo(e);
dist = dist + newdist / 1000;
ele = ele < s.meta.ele ? s.meta.ele : ele;
data.push({
dist: dist,
altitude: s.meta.ele,
x: s.lng,
y: s.lat,
latlng: s
});
}
this._dist = dist;
this._data = data;
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);
}
},
/*
* Add data to the diagram either from GPX or GeoJSON and
* update the axis domain and data
*/
addData: function(d) {
this._addData(d);
var xdomain = d3.extent(this._data, function(d) {
return d.dist;
});
var ydomain = d3.extent(this._data, function(d) {
return d.altitude;
});
this._x.domain(xdomain);
this._y.domain(ydomain);
this._areapath.datum(this._data)
.attr("d", this._area);
this._updateAxis();
return;
}
});
L.control.elevation = function(options) {
return new L.Control.Elevation(options);
};

BIN
bower_components/Leaflet.Elevation/dist/images/elevation.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 687 B

479
bower_components/Leaflet.Elevation/src/L.Control.Elevation.js vendored Normal file
View file

@ -0,0 +1,479 @@
L.Control.Elevation = L.Control.extend({
options: {
position: "topright",
theme: "lime-theme",
width: 600,
height: 175,
margins: {
top: 10,
right: 20,
bottom: 30,
left: 50
},
useHeightIndicator: true,
interpolation: "linear",
hoverNumber: {
decimalsX: 3,
decimalsY: 0,
formatter: undefined
},
xTicks: undefined,
yTicks: undefined,
collapsed: false
},
onRemove: function(map) {
this._container = null;
this._data = null;
this._dist = null;
},
onAdd: function(map) {
this._map = map;
var opts = this.options;
var margin = opts.margins;
opts.width = opts.width - margin.left - margin.right;
opts.height = opts.height - margin.top - margin.bottom;
opts.xTicks = opts.xTicks || Math.round(opts.width / 75);
opts.yTicks = opts.yTicks || Math.round(opts.height / 30);
opts.hoverNumber.formatter = opts.hoverNumber.formatter || this._formatter;
//append theme name on body
d3.select("body").classed(opts.theme, true);
var x = this._x = d3.scale.linear()
.range([0, opts.width]);
var y = this._y = d3.scale.linear()
.range([opts.height, 0]);
var area = this._area = d3.svg.area()
.interpolate(opts.interpolation)
.x(function(d) {
return x(d.dist);
})
.y0(opts.height)
.y1(function(d) {
return y(d.altitude);
});
var container = this._container = L.DomUtil.create("div", "elevation");
this._initToggle();
var complWidth = opts.width + margin.left + margin.right;
var cont = d3.select(container);
cont.attr("width", complWidth);
var svg = cont.append("svg");
svg.attr("width", complWidth)
.attr("class", "background")
.attr("height", opts.height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line();
line = line
.x(function(d) {
return d3.mouse(svg.select("g"))[0];
})
.y(function(d) {
return opts.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", opts.width)
.attr("height", opts.height)
.style("fill", "none")
.style("stroke", "none")
.style("pointer-events", "all");
background.on("mousemove", this._mousemoveHandler.bind(this));
background.on("mouseout", this._mouseoutHandler.bind(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");
return container;
},
_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);
if (!L.Browser.touch) {
L.DomEvent
.disableClickPropagation(container);
//.disableScrollPropagation(container);
} else {
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', container);
link.href = '#';
link.title = 'Elevation';
if (L.Browser.touch) {
L.DomEvent
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', this._expand, this);
}
else {
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', '');
},
_collapse: function () {
L.DomUtil.addClass(this._container, 'elevation-collapsed');
},
/*
* 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) {
y.attr("class", "y axis")
.call(d3.svg.axis()
.scale(this._y)
.ticks(this.options.yTicks)
.orient("left"))
.append("text")
.attr("x", 15)
.style("text-anchor", "end")
.text("m");
},
_appendXaxis: function(x) {
x.attr("class", "x axis")
.attr("transform", "translate(0," + this.options.height + ")")
.call(d3.svg.axis()
.scale(this._x)
.ticks(this.options.xTicks)
.orient("bottom"))
.append("text")
.attr("x", this.options.width + 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() {
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");
},
_mousemoveHandler: function(d, i, ctx) {
if (!this._data || this._data.length === 0) {
return;
}
var coords = d3.mouse(this._background.node());
var opts = this.options;
this._focusG.style("visibility", "visible");
this._mousefocus.attr('x1', coords[0])
.attr('y1', 0)
.attr('x2', coords[0])
.attr('y2', opts.height)
.classed('hidden', false);
var bisect = d3.bisector(function(d) {
return d.dist;
}).left;
var xinvert = this._x.invert(coords[0]),
item = bisect(this._data, xinvert),
alt = this._data[item].altitude,
dist = this._data[item].dist,
ll = this._data[item].latlng,
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);
this._focuslabelX.attr("x", coords[0])
.text(numY + " m");
this._focuslabelY.attr("y", opts.height - 5)
.attr("x", coords[0])
.text(numX + " km");
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', '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", 6)
.attr("cx", 0)
.attr("cy", 0)
.attr("class", "height-focus circle-lower");
this._mouseHeightFocusLabel = heightG.append("svg:text")
.attr("class", "height-focus-label")
.style("pointer-events", "none");
}
var normalizedAlt = this.options.height / this._maxElevation * alt;
var normalizedY = layerpoint.y - normalizedAlt;
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");
this._mouseHeightFocusLabel.attr("x", layerpoint.x)
.attr("y", normalizedY)
.text(alt + " 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) {
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 = s.distanceTo(e);
dist = dist + newdist / 1000;
ele = ele < coords[i][2] ? coords[i][2] : ele;
data.push({
dist: dist,
altitude: coords[i][2],
x: coords[i][0],
y: coords[i][1],
latlng: s
});
}
this._dist = dist;
this._data = data;
this._maxElevation = ele;
}
},
/*
* Parsing function for GPX data as used by https://github.com/mpetazzoni/leaflet-gpx
*/
_addGPXdata: function(coords) {
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 = s.distanceTo(e);
dist = dist + newdist / 1000;
ele = ele < s.meta.ele ? s.meta.ele : ele;
data.push({
dist: dist,
altitude: s.meta.ele,
x: s.lng,
y: s.lat,
latlng: s
});
}
this._dist = dist;
this._data = data;
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);
}
},
/*
* Add data to the diagram either from GPX or GeoJSON and
* update the axis domain and data
*/
addData: function(d) {
this._addData(d);
var xdomain = d3.extent(this._data, function(d) {
return d.dist;
});
var ydomain = d3.extent(this._data, function(d) {
return d.altitude;
});
this._x.domain(xdomain);
this._y.domain(ydomain);
this._areapath.datum(this._data)
.attr("d", this._area);
this._updateAxis();
return;
},
/*
* Reset data
*/
_clearData: function() {
this._data = null;
this._dist = null;
this._maxElevation = null;
},
/*
* Reset data and display
*/
clear: function() {
this._clearData();
// 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();
}
});
L.control.elevation = function(options) {
return new L.Control.Elevation(options);
};

67
bower_components/Leaflet.Elevation/src/css/L.Control.Elevation.less vendored Normal file
View file

@ -0,0 +1,67 @@
.@{theme}{
.leaflet-control.elevation .background{
background-color:@background;
.rounded-corners;
}
.leaflet-control.elevation{
.axis path,
.axis line {
fill: none;
stroke: @axis-color;
stroke-width:@stroke-width-axis;
}
}
.leaflet-control.elevation .area {
fill: @base-color;
}
.leaflet-control.elevation .mouse-focus-line {
pointer-events: none;
stroke-width:@stroke-width-mouse-focus;
stroke:@stroke-color;
}
.leaflet-control.elevation .elevation-toggle {
cursor: pointer;
box-shadow: 0 1px 7px rgba(0,0,0,0.4);
-webkit-border-radius: 5px;
border-radius: 5px;
width: 36px;
height: 36px;
background: url('images/elevation.png') no-repeat center center #f8f8f9;
}
.leaflet-control.elevation-collapsed .background {
display: none;
}
.leaflet-control.elevation-collapsed .elevation-toggle {
display: block;
}
.leaflet-control.elevation{
.mouse-focus-label-y,
.mouse-focus-label-x {
}
}
.leaflet-overlay-pane {
.height-focus{
stroke:@base-color;
fill:@base-color;
}
.height-focus.line{
pointer-events: none;
stroke-width:@stroke-width-height-focus;
}
.height-focus-label{
}
.height-focus.circle-lower {
}
}
}

18
bower_components/Leaflet.Elevation/src/css/themes/lime.less vendored Normal file
View file

@ -0,0 +1,18 @@
@theme : lime-theme;
@base-color : #9CC222;
@background : fade(@base-color,20%);
@axis-color : darken(@base-color,20%);
@stroke-color : darken(@base-color,40%);
@stroke-width-mouse-focus : 1;
@stroke-width-height-focus: 2;
@stroke-width-axis : 2;
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
@import "../L.Control.Elevation.less";

18
bower_components/Leaflet.Elevation/src/css/themes/purple.less vendored Normal file
View file

@ -0,0 +1,18 @@
@theme : purple-theme;
@base-color : #732C7B;
@background : fade(@base-color,20%);
@axis-color : darken(@base-color,20%);
@stroke-color : darken(@base-color,40%);
@stroke-width-mouse-focus : 1;
@stroke-width-height-focus: 2;
@stroke-width-axis : 2;
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
@import "../L.Control.Elevation.less";

18
bower_components/Leaflet.Elevation/src/css/themes/steelblue.less vendored Normal file
View file

@ -0,0 +1,18 @@
@theme : steelblue-theme;
@base-color : steelblue;
@background : fade(@base-color,20%);
@axis-color : darken(@base-color,40%);
@stroke-color : darken(@base-color,40%);
@stroke-width-mouse-focus : 1;
@stroke-width-height-focus: 2;
@stroke-width-axis : 2;
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
@import "../L.Control.Elevation.less";

BIN
bower_components/Leaflet.Elevation/src/images/elevation.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 708 B

93
bower_components/Leaflet.Elevation/src/images/elevation.svg vendored Normal file
View file

@ -0,0 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="26"
width="26"
id="svg2"
version="1.1"
inkscape:version="0.47 r22583"
sodipodi:docname="elevation.svg"
inkscape:export-filename="/home/z4k/www/maps/Leaflet.Elevation/src/images/elevation.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 13 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="26 : 13 : 1"
inkscape:persp3d-origin="13 : 8.6666667 : 1"
id="perspective22" />
<inkscape:perspective
id="perspective5368"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1336"
inkscape:window-height="716"
id="namedview16"
showgrid="false"
inkscape:zoom="12.836708"
inkscape:cx="9.2793304"
inkscape:cy="10.065073"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<path
sodipodi:nodetypes="ccccccc"
d="M 23.116338,20.847501 18.876285,12.717757 15.034906,12.602581 12.270363,14.369079 9.9164116,8.9203569 4.723308,15.1073 l 0,5.740201"
style="fill:#addb55;fill-opacity:0.83794466000000001;stroke:none;opacity:0.8503937"
id="path4581"
inkscape:export-filename="/home/z4k/www/climbo/images/dis.png"
inkscape:export-xdpi="37.075794"
inkscape:export-ydpi="37.075794" />
<path
id="path4508"
style="fill:none;stroke:#70ab00;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 4.7148336,14.751112 1.0850165,0 4.3152399,-6.1185111 2.522013,5.5932591 2.482614,-2.287207 3.698573,0.128868 4.049243,8.326572 0,0.440076"
sodipodi:nodetypes="cccccccc"
inkscape:export-filename="/home/z4k/www/climbo/images/dis.png"
inkscape:export-xdpi="37.075794"
inkscape:export-ydpi="37.075794" />
<path
style="fill:none;stroke:#737373;stroke-width:1px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1"
d="m 3.4214623,4.9854716 0,19.7870054"
id="path2825" />
<path
style="fill:none;stroke:#737373;stroke-width:1px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1"
d="m 24.68144,22.435429 -23.75282884,0"
id="path2827"
sodipodi:nodetypes="cc" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

4
index.html
View file

@ -9,7 +9,7 @@
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.draw.ie.css" />
<![endif]-->
<link rel="stylesheet" href="http://mrmufflon.github.io/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.css" />
<link rel="stylesheet" href="bower_components/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.css" />
<link rel="stylesheet" href="bower_components/leaflet-search/dist/leaflet-search.min.css" />
<link rel="stylesheet" href="css/leaflet-routing.css" />
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
@ -79,7 +79,7 @@
<!--<script src="http://d3js.org/d3.v3.min.js"></script>-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="http://mrmufflon.github.io/Leaflet.Elevation/dist/Leaflet.Elevation-0.0.1.min.js"></script>
<script src="bower_components/Leaflet.Elevation/src/L.Control.Elevation.js"></script>
<script>
// global package prefix for BRouter web application

15
js/plugin/Elevation.js
View file

@ -11,21 +11,6 @@ BR.Elevation = L.Control.Elevation.extend({
theme: "steelblue-theme" //purple
},
clear: function() {
this._data = [];
this._dist = 0;
this._maxElevation = 0;
// 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();
},
update: function(track) {
this.clear();
if (track && track.getLatLngs().length > 0) {