leaflet-velocity-ts's Introduction

leaflet-velocity-ts

This is a typescript updated version of leaflet-velocity

Compared to the other version :

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.

Example use:

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);