leaflet.glify.multipoly v3.2.0
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
},
hover: (e, feature): boolean | void => {
// do something when a shape is hovered
}
});
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
},
hover: (e, pointOrGeoJsonFeature, xy): boolean | void => {
// do something when a point is hovered
}
});
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
},
hover: (e, feature): boolean | void => {
// do something when a line is hovered
},
hoverOff: (e, feature): boolean | void => {
// do something when a line is hovered off
},
});
L.glify.shapes
Options
map
{Object}
required leaflet mapdata
{Object}
required geojson datavertexShaderSource
{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 shapehover
{Function}
optional event handler for hovering a shapecolor
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are theindex
:number
and thefeature
:object
that is being colored, opacity can optionally be included as{ a: number }
. The result should be of interfaceIColor
, example:{r: number, g: number, b: number, a: number }
.
- When
opacity
{Number}
a value from 0 to 1, default is 0.5. Only used when opacity isn't included on color.className
{String}
a class name applied to canvas, default is ''border
{Boolean}
optional, defaultfalse
. When set totrue
, a border with an opacity ofsettings.borderOpacity
is displayed.borderOpacity
{Number}
optional, defaultfalse
. Border opacity for whensettings.boarder
istrue
. Default is 1.preserveDrawingBuffer
{Boolean}
optional, default1
, adjusts the border opacity separate fromopacity
.- CAUTION: May cause performance issue with large data sets.
pane
{String}
optional, default isoverlayPane
. Can be set to a custom pane.
L.glify.points
Options
map
{Object}
required leaflet mapdata
{Object}
required geojson datavertexShaderSource
{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 pointhover
{Function}
optional event handler for hovering a pointcolor
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are theindex
:number
and thepoint
:array
that is being colored, opacity can optionally be included as{ a: number }
. The result should be of interfaceIColor
, example:{r: number, g: number, b: number, a: number }
.
- When
opacity
{Number}
a value from 0 to 1, default is 0.8. Only used when opacity isn't included on color.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 pointsensitivityHover
{Number}
exaggerates the size of the hoverable area to make it easier to hover a pointpreserveDrawingBuffer
{Boolean}
optional, defaultfalse
, perverse draw buffer on webgl context.- CAUTION: May cause performance issue with large data sets.
pane
{String}
optional, default isoverlayPane
. Can be set to a custom pane.
L.glify.lines
Options
map
{Object}
required leaflet mapdata
{Object}
required geojson datavertexShaderSource
{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 linehover
{Function}
optional event handler for hovering a linehoverOff
{Function}
optional event handler for hovering off a linecolor
{Function|Object|String}
optional, default is 'random'- When
color
is aFunction
its arguments are theindex
:number
and thefeature
:object
that is being colored, opacity can optionally be included as{ a: number }
. The result should be of interfaceIColor
, example:{r: number, g: number, b: number, a: number }
.
- When
opacity
{Number}
a value from 0 to 1, default is 0.5. Only used when opacity isn't included on color.className
{String}
a class name applied to canvas, default is ''sensitivity
{Number}
exaggerates the size of the clickable area to make it easier to click a linesensitivityHover
{Number}
exaggerates the size of the hoverable area to make it easier to hover a linepreserveDrawingBuffer
{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
pane
{String}
optional, default isoverlayPane
. Can be set to a custom pane.
L.glify
methods/properties
longitudeFirst()
latitudeFirst()
pointsInstances
linesInstances
shapesInstances
points(options)
shapes(options)
lines(options)
Building
There are two ways to package this application: Parcel and WebPack.
You can build the parcel version by running yarn run build-browser
You can build the webpack version by running yarn run build-browser-webpack
Developing
Use yarn serve
Testing
Use yarn test
Update & Remove Data
L.glify instances can be updated using the update(data, index)
method.
data
{Object}
Lines and Shapes require a single GeoJSON feature. Points require the same data structure as the original object and therefore also accept an array of coordinates.index
{number}
An integer indicating the index of the element to be updated.
An object or some elements of an object are removed using the remove(index)
method.
index
{number|Array}
optional - An integer or an array of integers specifying the indices of the elements to be removed. Ifindex
is not defined, the entire object is removed.
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
3 years ago