Leaflet.glify
web gl renderer plugin for leaflet in typescript
Pronounced leaflet-G.L.-Ify, or leaflet-glify, or L.-G.L.-Ify, or L-glify, or elglify
inspired by http://bl.ocks.org/Sumbera/c6fed35c377a46ff74c3 & need.
Objective
- To provide a means of rendering a massive amount of data visually in a way that does not degrade user experience
- Remaining as simple as possible with current fastest libs
- Providing the same sort of user experience one would get using standard html and elements
Usage
Browser
<script src="dist/glify-browser.js"></script>
<script>
// namespace
L.glify
</script>
Typescript
import glify from 'leaflet.glify';
Node
const { glify } = require('leaflet.glify');
Simple Polygon Usage
L.glify.shapes({
map,
data: geoJson,
click: (e, feature): boolean | void => {
// do something when a shape is clicked
// return false to continue traversing
}
});
Simple Points Usage
L.glify.points({
map,
data: pointsOrGeoJson,
click: (e, pointOrGeoJsonFeature, xy): boolean | void => {
// do something when a point is clicked
// return false to continue traversing
}
});
Simple Lines Usage
L.glify.lines({
map: map,
data: geojson,
size: 2,
click: (e, feature): boolean | void => {
// do something when a line is clicked
// return false to continue traversing
}
});
L.glify.shapes
Options
-
map
{Object}
required leaflet map -
data
{Object}
required geojson data -
vertexShaderSource
{String|Function}
optional glsl vertex shader source, defaults to useL.glify.shader.vertex
-
fragmentShaderSource
{String|Function}
optional glsl fragment shader source, defaults to useL.glify.shader.fragment.polygon
-
click
{Function}
optional event handler for clicking a shape -
color
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are gets theindex
:number
, and thefeature
:object
that is being colored
- When
-
opacity
{Number} a value from 0 to 1, default is 0.5 -
className
{String} a class name applied to canvas, default is '' -
preserveDrawingBuffer
{Boolean} optional, defaultfalse
, perverse draw buffer on webgl context.- CAUTION: May cause performance issue with large data sets.
L.glify.points
Options
-
map
{Object}
required leaflet map -
data
{Object}
required geojson data -
vertexShaderSource
{String|Function}
optional glsl vertex shader source, defaults to useL.glify.shader.vertex
-
fragmentShaderSource
{String|Function}
optional glsl fragment shader source, defaults to useL.glify.shader.fragment.point
-
click
{Function}
optional event handler for clicking a point -
color
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are gets theindex
:number
, and thepoint
:array
that is being colored
- When
-
opacity
{Number} a value from 0 to 1, default is 0.8 -
className
{String} a class name applied to canvas, default is '' -
size
{Number|Function} pixel size of point- When
size
is aFunction
its arguments areindex
:number
, and thepoint
:array
that is being sized
- When
-
sensitivity
{Number} exaggerates the size of the clickable area to make it easier to click a point -
preserveDrawingBuffer
{Boolean} optional, defaultfalse
, perverse draw buffer on webgl context.- CAUTION: May cause performance issue with large data sets.
L.glify.lines
Options
-
map
{Object}
required leaflet map -
data
{Object}
required geojson data -
vertexShaderSource
{String|Function}
optional glsl vertex shader source, defaults to useL.glify.shader.vertex
-
fragmentShaderSource
{String|Function}
optional glsl fragment shader source, defaults to useL.glify.shader.fragment.point
-
click
{Function}
optional event handler for clicking a point -
color
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are gets theindex
:number
, and thepoint
:array
that is being colored
- When
-
opacity
{Number} a value from 0 to 1, default is 0.5 -
className
{String} a class name applied to canvas, default is '' -
preserveDrawingBuffer
{Boolean} optional, defaultfalse
, perverse draw buffer on webgl context.- CAUTION: May cause performance issue with large data sets.
-
weight
{Number|Function} a value in pixels of how thick lines should be drawn- When
weight
is aFunction
its arguments are gets theindex
:number
, and thefeature
:object
that is being drawn - CAUTION: Zoom of more than 18 will turn weight internally to 1 to prevent WebGL precision rendering issues.
- When
L.glify
methods
longitudeFirst()
latitudeFirst()
instances
points(options)
shapes(options)
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]