Need help with Leaflet.glify?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

robertleeplummerjr
283 Stars 52 Forks MIT License 193 Commits 41 Opened issues

Description

fully functional, ridiculously fast web gl renderer plugin for leaflet

Services available

!
?

Need anything else?

Contributors list

# 2,343
TypeScr...
Node.js
recurre...
node
121 commits
# 361,315
Postgre...
R
C
postgre...
13 commits
# 574,332
JavaScr...
C
Shell
csv-par...
6 commits
# 593,097
JavaScr...
Shell
C
5 commits
# 664,793
JavaScr...
HTML
3 commits
# 640,508
JavaScr...
HTML
wiki
wikiped...
2 commits
# 10,791
C#
wpf-con...
WPF
wpf-ui
2 commits
# 161,945
Objecti...
OpenGL
c-plus-...
sdl2
2 commits
# 254,187
TypeScr...
HTML
Shell
1 commit
# 658,757
JavaScr...
HTML
1 commit

Leaflet.glify Leaflet.glify logo

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


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 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
  • 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.

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
  • 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

  • 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 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
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. If
index
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]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.