This is a typescript updated version of leaflet-velocity
- This version is compatible with the latest version of leaflet.
- This version adds a better particles management when zooming and moving the map which gives better performance on mobile devices.
- This version does not need leaflet-velocity.css to be included.
const velocityLayer = L.velocityLayer({
displayValues: true,
displayOptions: {
showCardinal: true,
velocityType: 'Global Wind',
// 'topleft' | 'topright' | 'bottomleft' | 'bottomright'
position: 'bottomleft',
// no data at cursor
emptyString: 'No velocity data',
// direction label prefix
directionString: "Direction",
// speed label prefix
speedString: "Speed",
// 'kt' | 'k/h' | 'mph' | 'm/s'
speedUnit: 'm/s',
// Could 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)
angleConvention: 'bearingCW',
},
// see demo/*.json, or wind-js-server for example data service
data: data,
// OPTIONAL
particleAge: 64,
particleMultiplier: 0.0033,
particlelineWidth: 1,
frameRate: 15,
minVelocity: 0,
maxVelocity: 10,
velocityScale: 0.005,
opacity: 0.97,
// define your own array of hex/rgb colors
colorScale: [],
onAdd: () => console.log('onAdd'),
onRemove: () => console.log('onRemove'),
// optional pane to add the layer, will be created if doesn't exist
// leaflet v1+ only (falls back to overlayPane for < v1)
paneName: "overlayPane",
});
velocityLayer.addTo(mymap);MIT License (MIT)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent