Skip to content

Commit

Permalink
add setOptions method, and support for custom pane
Browse files Browse the repository at this point in the history
  • Loading branch information
@danwild
danwild committed Jul 11, 2019
1 parent 42bef13 commit 6b9ca43
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 65 deletions.
14 changes: 14 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,29 @@ var velocityLayer = L.velocityLayer({
colorScale: [], // define your own array of hex/rgb colors
onAdd: null, // callback function
onRemove: null, // callback function

// optional pane to add the layer, will be created if doesn't exist
// Note:
// - that the <HTMLElement> must be tagged with a unique id
// - leaflet v1+ only (falls back to overlayPane for < v1)
paneName: 'overlayPane'
});
```

The angle convention option refers to the convention used to express the wind direction as an angle from north direction in the control.
It can be any combination of `bearing` (angle toward which the flow goes) or `meteo` (angle from which the flow comes),
and `CW` (angle value increases clock-wise) or `CCW` (angle value increases counter clock-wise). If not given defaults to `bearingCCW`.

The speed unit option refers to the unit used to express the wind speed in the control.
It can be `m/s` for meter per second, `k/h` for kilometer per hour or `kt` for knots. If not given defaults to `m/s`.

## Public methods

|method|params|description|
|---|---|---|
|`setData`|`data: {Object}`|update the layer with new data|
|`setOptions`|`options: {Object}`|update the layer with new options|

## Build / watch
```shell
gulp
Expand Down
68 changes: 57 additions & 11 deletions dist/leaflet-velocity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
},
//-------------------------------------------------------------
onAdd: function onAdd(map) {
console.log('canvas onAdd', this);
this._map = map;
this._canvas = L.DomUtil.create("canvas", "leaflet-layer");
this.tiles = {};
Expand All @@ -76,7 +77,7 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
var animated = this._map.options.zoomAnimation && L.Browser.any3d;
L.DomUtil.addClass(this._canvas, "leaflet-zoom-" + (animated ? "animated" : "hide"));

map._panes.overlayPane.appendChild(this._canvas);
this.options.pane.appendChild(this._canvas);
map.on(this.getEvents(), this);

var del = this._delegate || this;
Expand Down Expand Up @@ -154,8 +155,8 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
}
});

L.canvasLayer = function () {
return new L.CanvasLayer();
L.canvasLayer = function (pane) {
return new L.CanvasLayer(pane);
};

L.Control.Velocity = L.Control.extend({
Expand Down Expand Up @@ -280,9 +281,18 @@ L.VelocityLayer = (L.Layer ? L.Layer : L.Class).extend({
},

onAdd: function onAdd(map) {
// create canvas, add overlay control
this._canvasLayer = L.canvasLayer().delegate(this);

// determine where to add the layer
this._paneName = this.options.paneName || 'overlayPane';

// fall back to overlayPane for leaflet < 1
var pane = map._panes.overlayPane;
if (map.createPane) pane = map.createPane(this._paneName);

// create canvas, add to map pane
this._canvasLayer = L.canvasLayer({ pane: pane }).delegate(this);
this._canvasLayer.addTo(map);

this._map = map;
},

Expand All @@ -292,11 +302,25 @@ L.VelocityLayer = (L.Layer ? L.Layer : L.Class).extend({

setData: function setData(data) {
this.options.data = data;

if (this._windy) {
this._windy.setData(data);
this._clearAndRestart();
}
this.fire("load");
},

setOptions: function setOptions(options) {
this.options = Object.assign(this.options, options);
if (options.hasOwnProperty("displayOptions")) {
this.options.displayOptions = Object.assign(this.options.displayOptions, options.displayOptions);
this._initMouseHandler(true);
}
if (options.hasOwnProperty("data")) this.options.data = options.data;
if (this._windy) {
this._windy.setOptions(options);
if (options.hasOwnProperty("data")) this._windy.setData(options.data);
this._clearAndRestart();
}

this.fire("load");
},
Expand Down Expand Up @@ -346,10 +370,14 @@ L.VelocityLayer = (L.Layer ? L.Layer : L.Class).extend({
this._map.on("zoomend", self._clearAndRestart);
this._map.on("resize", self._clearWind);

this._initMouseHandler();
this._initMouseHandler(false);
},

_initMouseHandler: function _initMouseHandler() {
_initMouseHandler: function _initMouseHandler(voidPrevious) {
if (voidPrevious) {
this._map.removeControl(this._mouseControl);
this._mouseControl = false;
}
if (!this._mouseControl && this.options.displayValues) {
var options = this.options.displayOptions || {};
options["leafletVelocity"] = this;
Expand Down Expand Up @@ -402,8 +430,8 @@ var Windy = function Windy(params) {
var PARTICLE_LINE_WIDTH = params.lineWidth || 1; // line width of a drawn particle
var PARTICLE_MULTIPLIER = params.particleMultiplier || 1 / 300; // particle count scalar (completely arbitrary--this values looks nice)
var PARTICLE_REDUCTION = Math.pow(window.devicePixelRatio, 1 / 3) || 1.6; // multiply particle count for mobiles by this amount
var FRAME_RATE = params.frameRate || 15,
FRAME_TIME = 1000 / FRAME_RATE; // desired frames per second
var FRAME_RATE = params.frameRate || 15;
var FRAME_TIME = 1000 / FRAME_RATE; // desired frames per second

var defaulColorScale = ["rgb(36,104, 180)", "rgb(60,157, 194)", "rgb(128,205,193 )", "rgb(151,218,168 )", "rgb(198,231,181)", "rgb(238,247,217)", "rgb(255,238,159)", "rgb(252,217,125)", "rgb(255,182,100)", "rgb(252,150,75)", "rgb(250,112,52)", "rgb(245,64,32)", "rgb(237,45,28)", "rgb(220,24,32)", "rgb(180,0,35)"];

Expand All @@ -421,6 +449,23 @@ var Windy = function Windy(params) {
gridData = data;
};

var setOptions = function setOptions(options) {
if (options.hasOwnProperty("minVelocity")) MIN_VELOCITY_INTENSITY = options.minVelocity;

if (options.hasOwnProperty("maxVelocity")) MAX_VELOCITY_INTENSITY = options.maxVelocity;

if (options.hasOwnProperty("velocityScale")) VELOCITY_SCALE = (options.velocityScale || 0.005) * (Math.pow(window.devicePixelRatio, 1 / 3) || 1);

if (options.hasOwnProperty("particleAge")) MAX_PARTICLE_AGE = options.particleAge;

if (options.hasOwnProperty("lineWidth")) PARTICLE_LINE_WIDTH = options.lineWidth;

if (options.hasOwnProperty("particleMultiplier")) PARTICLE_MULTIPLIER = options.particleMultiplier;

if (options.hasOwnProperty("frameRate")) FRAME_RATE = options.frameRate;
FRAME_TIME = 1000 / FRAME_RATE;
};

// interpolation for vectors like wind (u,v,m)
var bilinearInterpolateVector = function bilinearInterpolateVector(x, y, g00, g10, g01, g11) {
var rx = 1 - x;
Expand Down Expand Up @@ -869,7 +914,8 @@ var Windy = function Windy(params) {
stop: stop,
createField: createField,
interpolatePoint: interpolate,
setData: setData
setData: setData,
setOptions: setOptions
};

return windy;
Expand Down
2 changes: 1 addition & 1 deletion dist/leaflet-velocity.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "leaflet-velocity",
"version": "1.3.0",
"version": "1.4.0",
"description": "A custom layer for leaflet to visualise arbitrary velocities",
"main": "dist/leaflet-velocity.js",
"scripts": {
Expand Down
51 changes: 26 additions & 25 deletions src/js/L.CanvasLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
//------------------------------------------------------------------------------
if (!L.DomUtil.setTransform) {
L.DomUtil.setTransform = function(el, offset, scale) {
L.DomUtil.setTransform = function (el, offset, scale) {
var pos = offset || new L.Point(0, 0);

el.style[L.DomUtil.TRANSFORM] =
Expand All @@ -22,39 +22,39 @@ if (!L.DomUtil.setTransform) {
// -- support for both 0.0.7 and 1.0.0 rc2 leaflet
L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
// -- initialized is called on prototype
initialize: function(options) {
initialize: function (options) {
this._map = null;
this._canvas = null;
this._frame = null;
this._delegate = null;
L.setOptions(this, options);
},

delegate: function(del) {
delegate: function (del) {
this._delegate = del;
return this;
},

needRedraw: function() {
needRedraw: function () {
if (!this._frame) {
this._frame = L.Util.requestAnimFrame(this.drawLayer, this);
}
return this;
},

//-------------------------------------------------------------
_onLayerDidResize: function(resizeEvent) {
_onLayerDidResize: function (resizeEvent) {
this._canvas.width = resizeEvent.newSize.x;
this._canvas.height = resizeEvent.newSize.y;
},
//-------------------------------------------------------------
_onLayerDidMove: function() {
_onLayerDidMove: function () {
var topLeft = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(this._canvas, topLeft);
this.drawLayer();
},
//-------------------------------------------------------------
getEvents: function() {
getEvents: function () {
var events = {
resize: this._onLayerDidResize,
moveend: this._onLayerDidMove
Expand All @@ -66,7 +66,8 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
return events;
},
//-------------------------------------------------------------
onAdd: function(map) {
onAdd: function (map) {
console.log('canvas onAdd', this);
this._map = map;
this._canvas = L.DomUtil.create("canvas", "leaflet-layer");
this.tiles = {};
Expand All @@ -81,21 +82,21 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
"leaflet-zoom-" + (animated ? "animated" : "hide")
);

map._panes.overlayPane.appendChild(this._canvas);
this.options.pane.appendChild(this._canvas);
map.on(this.getEvents(), this);

var del = this._delegate || this;
del.onLayerDidMount && del.onLayerDidMount(); // -- callback
this.needRedraw();

var self = this;
setTimeout(function() {
setTimeout(function () {
self._onLayerDidMove();
}, 0);
},

//-------------------------------------------------------------
onRemove: function(map) {
onRemove: function (map) {
var del = this._delegate || this;
del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback

Expand All @@ -107,20 +108,20 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
},

//------------------------------------------------------------
addTo: function(map) {
addTo: function (map) {
map.addLayer(this);
return this;
},
// --------------------------------------------------------------------------------
LatLonToMercator: function(latlon) {
LatLonToMercator: function (latlon) {
return {
x: (latlon.lng * 6378137 * Math.PI) / 180,
y: Math.log(Math.tan(((90 + latlon.lat) * Math.PI) / 360)) * 6378137
};
},

//------------------------------------------------------------------------------
drawLayer: function() {
drawLayer: function () {
// -- todo make the viewInfo properties flat objects.
var size = this._map.getSize();
var bounds = this._map.getBounds();
Expand All @@ -146,7 +147,7 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
},
// -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
//------------------------------------------------------------------------------
_setTransform: function(el, offset, scale) {
_setTransform: function (el, offset, scale) {
var pos = offset || new L.Point(0, 0);

el.style[L.DomUtil.TRANSFORM] =
Expand All @@ -157,24 +158,24 @@ L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
},

//------------------------------------------------------------------------------
_animateZoom: function(e) {
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom);
// -- different calc of offset in leaflet 1.0.0 and 0.0.7 thanks for 1.0.0-rc2 calc @jduggan1
var offset = L.Layer
? this._map._latLngToNewLayerPoint(
this._map.getBounds().getNorthWest(),
e.zoom,
e.center
)
this._map.getBounds().getNorthWest(),
e.zoom,
e.center
)
: this._map
._getCenterOffset(e.center)
._multiplyBy(-scale)
.subtract(this._map._getMapPanePos());
._getCenterOffset(e.center)
._multiplyBy(-scale)
.subtract(this._map._getMapPanePos());

L.DomUtil.setTransform(this._canvas, offset, scale);
}
});

L.canvasLayer = function() {
return new L.CanvasLayer();
L.canvasLayer = function (pane) {
return new L.CanvasLayer(pane);
};
Loading

0 comments on commit 6b9ca43

Please sign in to comment.