Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle missing elevation values using d3 defined accessor #84

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Handle missing elevation values using d3 defined accessor #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Supported data:
`` bower install leaflet.elevation ``

### How to use
Altitude information for each point is necessary in the given data.

```javascript
//all used options are the default values
var el = L.control.elevation({
Expand All @@ -48,6 +48,8 @@ var el = L.control.elevation({
},
useHeightIndicator: true, //if false a marker is drawn at map position
interpolation: d3.curveLinear, //see https://github.com/d3/d3-shape/blob/master/README.md#area_curve
defined: undefined, // option to override our d3 `area.defined` accessor that skips missing altitudes
notDefinedLabel: '–', // altitude label text to show when missing (defined accessor returns false)
hoverNumber: {
decimalsX: 3, //decimals on distance (always in km)
decimalsY: 0, //deciamls on hehttps://www.npmjs.com/package/leaflet.coordinatesight (always in m)
Expand Down
32 changes: 24 additions & 8 deletions src/L.Control.Elevation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ L.Control.Elevation = L.Control.extend({
},
useHeightIndicator: true,
interpolation: d3.curveLinear,
defined: undefined,
notDefinedLabel: '–',
hoverNumber: {
decimalsX: 3,
decimalsY: 0,
Expand Down Expand Up @@ -44,6 +46,7 @@ L.Control.Elevation = L.Control.extend({
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;
opts.defined = opts.defined || this._defined;

var x = this._x = d3.scaleLinear()
.range([0, this._width()]);
Expand All @@ -53,10 +56,9 @@ L.Control.Elevation = L.Control.extend({

var area = this._area = d3.area()
.curve(opts.interpolation)
.defined(opts.defined)
.x(function(d) {
var xDiagCoord = x(d.dist);
d.xDiagCoord = xDiagCoord;
return xDiagCoord;
return x(d.dist);
})
.y0(this._height())
.y1(function(d) {
Expand Down Expand Up @@ -360,6 +362,14 @@ L.Control.Elevation = L.Control.extend({
return res;
},

/*
* d3 defined accessor implementation to skip missing elevation values, to be passed to `area.defined()`
*/
_defined: function(d) {
// falsy result is skipped - not just returning d.altitude, because 0 is also falsy
return d.altitude !== undefined && d.altitude !== null;
},

_appendYaxis: function(y) {
var opts = this.options;

Expand Down Expand Up @@ -465,7 +475,8 @@ L.Control.Elevation = L.Control.extend({
alt = item.altitude,
dist = item.dist,
ll = item.latlng,
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
defined = opts.defined(item),
numY = defined ? opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY) : opts.notDefinedLabel,
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);

this._showDiagramIndicator(item, coords[0]);
Expand Down Expand Up @@ -501,7 +512,7 @@ L.Control.Elevation = L.Control.extend({

}

var normalizedAlt = this._height() / this._maxElevation * alt;
var normalizedAlt = defined ? this._height() / this._maxElevation * alt : 0;
var normalizedY = layerpoint.y - normalizedAlt;
this._mouseHeightFocus.attr("x1", layerpoint.x)
.attr("x2", layerpoint.x)
Expand Down Expand Up @@ -557,7 +568,7 @@ L.Control.Elevation = L.Control.extend({
ele = ele < coords[i][2] ? coords[i][2] : ele;
data.push({
dist: dist,
altitude: opts.imperial ? coords[i][2] * this.__footFactor : coords[i][2],
altitude: opts.imperial && coords[i][2] ? coords[i][2] * this.__footFactor : coords[i][2],
x: coords[i][0],
y: coords[i][1],
latlng: s
Expand Down Expand Up @@ -587,7 +598,7 @@ L.Control.Elevation = L.Control.extend({
ele = ele < s.meta.ele ? s.meta.ele : ele;
data.push({
dist: dist,
altitude: opts.imperial ? s.meta.ele * this.__footFactor : s.meta.ele,
altitude: opts.imperial && s.meta.ele ? s.meta.ele * this.__footFactor : s.meta.ele,
x: s.lng,
y: s.lat,
latlng: s
Expand Down Expand Up @@ -679,6 +690,10 @@ L.Control.Elevation = L.Control.extend({
var latlng = evt.latlng;
var item = this._findItemForLatLng(latlng);
if (item) {
// cache, not in area.x() because skipped for missing (not `defined`) altitudes
if (item.xDiagCoord === undefined) {
item.xDiagCoord = this._x(item.dist);
}
var x = item.xDiagCoord;
this._showDiagramIndicator(item, x);
}
Expand All @@ -696,7 +711,8 @@ L.Control.Elevation = L.Control.extend({
var alt = item.altitude,
dist = item.dist,
ll = item.latlng,
numY = opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY),
defined = opts.defined(item),
numY = defined ? opts.hoverNumber.formatter(alt, opts.hoverNumber.decimalsY) : opts.notDefinedLabel,
numX = opts.hoverNumber.formatter(dist, opts.hoverNumber.decimalsX);

if (opts.imperial) {
Expand Down