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>

GeoJSON & WGS84 Standard Compliance

Leaflet.glify follows the World Geodetic System (WGS84) standard as defined by the National Geospatial-Intelligence Agency (NGA) and adopted by the GeoJSON specification.

Default Coordinate Order

• Default format: [longitude, latitude] (WGS84/GeoJSON standard)
• Why this matters: GeoJSON specification requires coordinates in [lng, lat] order
• Reference: WGS84 Standard (NGA), GeoJSON Specification

Coordinate Order Methods

import glify from 'leaflet.glify';

// Check current coordinate order, "lngFirst" (default)
const currentOrder = glify.getCoordinateOrder(); 

// Set coordinate order
// WGS84/GeoJSON standard [longitude, latitude]
glify.setCoordinateOrder("lngFirst");  

// Legacy format [latitude, longitude]
glify.setCoordinateOrder("latFirst"); 

// Fluent API
// Same as setCoordinateOrder("lngFirst")
glify.longitudeFirst();

// Same as setCoordinateOrder("latFirst") 
glify.latitudeFirst();  

Typescript

import glify from 'leaflet.glify';
// namespace
glify

Node

const { glify } = require('leaflet.glify');
// namespace
glify

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

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

API

L.glify methods

• points(options)
• lines(options)
• shapes(options)
• longitudeFirst()
• latitudeFirst()

L.glify properties

• pointsInstances
• linesInstances
• shapesInstances

---

L.glify.points(options: object)

Adds point data passed in options.data to the Leaflet map instance passed in options.map.

Returns

L.glify.Points instance

Options

• map {Object} required leaflet map
• data {Object} required geojson FeatureCollection object or an array of [lat: number, lng: number] arrays
• vertexShaderSource {String|Function} optional glsl vertex shader source, defaults to use L.glify.shader.vertex
• fragmentShaderSource {String|Function} optional glsl fragment shader source, defaults to use L.glify.shader.fragment.point
• click {Function} optional event handler for clicking a point
• hover {Function} optional event handler for hovering a point
• color {Function|Object|String} optional, default is 'random'
  • When color is a Function its arguments are the index:number and the point:array that is being colored, opacity can optionally be included as { a: number }. The result should be of interface IColor, example: {r: number, g: number, b: number, a: number }.
• 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 a Function its arguments are index:number, and the point:array that is being sized
• sensitivity {Number} exaggerates the size of the clickable area to make it easier to click a point
• sensitivityHover {Number} exaggerates the size of the hoverable area to make it easier to hover a point
• preserveDrawingBuffer {Boolean} optional, default false, perverse draw buffer on webgl context.
  • CAUTION: May cause performance issue with large data sets.
• pane {String} optional, default is overlayPane. Can be set to a custom pane.

---

L.glify.lines(options: object)

Adds line data passed in options.data to the Leaflet map instance passed in options.map.

Returns

L.glify.Lines instance

Options

• map {Object} required leaflet map
• data {Object} required geojson FeatureCollection object with geometry.coordinates arrays being in a [lat: number, lng: number] format
• vertexShaderSource {String|Function} optional glsl vertex shader source, defaults to use L.glify.shader.vertex
• fragmentShaderSource {String|Function} optional glsl fragment shader source, defaults to use L.glify.shader.fragment.point
• click {Function} optional event handler for clicking a line
• hover {Function} optional event handler for hovering a line
• hoverOff {Function} optional event handler for hovering off a line
• color {Function|Object|String} optional, default is 'random'
  • When color is a Function its arguments are the index:number and the feature:object that is being colored, opacity can optionally be included as { a: number }. The result should be of interface IColor, example: {r: number, g: number, b: number, a: number }.
• 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 line
• sensitivityHover {Number} exaggerates the size of the hoverable area to make it easier to hover a line
• preserveDrawingBuffer {Boolean} optional, default false, 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 a Function its arguments are gets the index:number, and the feature:object that is being drawn
  • CAUTION: Zoom of more than 18 will turn weight internally to 1 to prevent WebGL precision rendering issues.
• pane {String} optional, default is overlayPane. Can be set to a custom pane.

---

L.glify.shapes(options: object)

Adds polygon/multipolygon data passed in options.data to the Leaflet map instance passed in options.map.

Returns

L.glify.Shapes instance

Options

• map {Object} required leaflet map
• data {Object} required geojson FeatureCollection object with geometry.coordinates arrays being in a [lng: number, lat: number] format Note: lat and lng are expected in a different order than in .points() and .lines()
• vertexShaderSource {String|Function} optional glsl vertex shader source, defaults to use L.glify.shader.vertex
• fragmentShaderSource {String|Function} optional glsl fragment shader source, defaults to use L.glify.shader.fragment.polygon
• click {Function} optional event handler for clicking a shape
• hover {Function} optional event handler for hovering a shape
• color {Function|Object|String} optional, default is 'random'
  • When color is a Function its arguments are the index:number and the feature:object that is being colored, opacity can optionally be included as { a: number }. The result should be of interface IColor, example: {r: number, g: number, b: number, a: number }.
• 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, default false. When set to true, a border with an opacity of settings.borderOpacity is displayed.
• borderOpacity {Number} optional, default false. Border opacity for when settings.boarder is true. Default is 1.
• preserveDrawingBuffer {Boolean} optional, default 1, adjusts the border opacity separate from opacity.
  • CAUTION: May cause performance issue with large data sets.
• pane {String} optional, default is overlayPane. Can be set to a custom pane.

---

longitudeFirst()

Sets the expecetd order of arrays in the coordinates array of GeoJSON passed to options.data to be [lng, lat]

Returns

The updated L.glify instance it was called on

---

latitudeFirst()

Sets the expecetd order of arrays in the coordinates array of GeoJSON passed to options.data to be [lat, lng]

Returns

The updated L.glify instance it was called on

---

pointsInstances

All of the L.glify.Points instances

---

linesInstances

All of the L.glify.Lines instances

---

shapesInstances

All of the L.glify.Shapes instances

Building

You can build the library by running yarn run build or npm run build

Developing

Use yarn serve or npm run serve

Testing

Use yarn test or npm run 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.

• index {number|Array} optional - An integer or an array of integers specifying the indices of the elements to be removed. If index is not defined, the entire object is removed.

Example

let newPoints = L.glify.points({
  map: leafletMap,
  data: geojsonFeatureCollection,
  size: 30
});

// Update the third feature
newPoints.update({
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Point",
      "coordinates": [
        34.072204277521394
        -118.44255208969116
      ]
    }
  }]
}, 2);

// Now remove it
newPoints.remove(2);

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]