3.0.4 • Published 5 years ago

@khiemntu/leaflet.glify v3.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

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.

Backers on Open Collective Sponsors on Open Collective

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 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
  • color {Function|Object|String} optional, default is 'random'
    • When color is a Function its arguments are gets the index:number, and the feature:object that is being colored
  • 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, default false, 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 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
  • color {Function|Object|String} optional, default is 'random'
    • When color is a Function its arguments are gets the index:number, and the point:array that is being colored
  • 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 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
  • preserveDrawingBuffer {Boolean} optional, default false, 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 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
  • color {Function|Object|String} optional, default is 'random'
    • When color is a Function its arguments are gets the index:number, and the point:array that is being colored
  • 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, 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.

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! 🙏 [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]