Skip to content

onaci/Leaflet.glify.layer

Repository files navigation

leaflet-glify-layer NPM version NPM Downloads

Add-on for the Leaflet.glify plugin to provide more leaflet-idiomatic bindings.

Together this provides fast webgl rendering for GeoJSON FeatureCollections (currently limited to polygons, lines and points).

wow, very data Screenshot

why use this plugin?

The leaflet-glify plugin is great 🙏🙏 but does not behave like a typical leaflet layer, e.g.

  • unlike the L.geoJSON layer, GeoJSON polygons/points/lines must be created and managed as separate layers, which can quickly become unmanageable
  • common functions like layer.addTo(map), map.removeLayer(layer) don't work 'the leaflet way'
  • polygons and points/lines have inconsistent coordinate ordering (GeoJSON convention is [lng,lat])
  • missing other convienience methods (e.g. layer.getBounds)
  • default styling is very inconsistent with leaflet

install

npm install leaflet-glify-layer --save

use

This plugin acts as an add-on for L.glify, to managing the various L.glify layers required if you provide mutiple geometry types, and providing other leaflet-iodomatic methods/bindings.

Most importantly - GeoJSON can either be provided as:

  1. A single FeatureCollection containing features of mixed geometry types
  • this is slower as features must be sorted into types; however
  • sorting uses web workers to avoid blocking main thread
  1. A FeatureCollection for each geometry type (faster)

Note: L.glify expects points as an array of coords rather than GeoJSON features, so for now - the full GeoJSON object/properties are lost.. 😞

const myLayer = L.glify.layer({
  
  // Option #1. A single GeoJSON FeatureCollection that needs to be sorted
  geojson: {},

  // Option #2. -> FeatureCollection's that are pre-sorted by type 
  type: { 
    shapes: {}, // FeatureCollection of Polygon's
    lines: {},  // FeatureCollection of LineString's
    points: {}, // FeatureCollection of Point's
  },
  // L.glify options - currently a single set
  // of options is used for all geometry types
  glifyOptions: {
    // defaults vaguely match leaflet
    border: true,
    opacity: 0.2,
    size: 10
  }

  // OPTIONAL - supply the name of a custom pane,
  // will be created if doesn't exist, defaults to overlayPane
  // (used by L.glify as `pane` option)
  // https://leafletjs.com/reference-1.6.0.html#map-pane
  paneName: "overlayPane",
  
  // OPTIONAL - callback to be notified when types 
  // have been sorted, L.glify will be created
  onTypesReady() {},

  // OPTIONAL - callbacks when layer is added/removed from map
  onAdd: function(){},
  onRemove: function(){},
});

myLayer.addToMap(map);

public methods

method params description
setStyle options: { color, border, opacity, size} Updates style settings
getBounds Returns L.latLngBounds for the L.glify.layer
render Force re-render
update (data, index) Calls update on L.glify layers
remove (index) Calls remove on L.glify layers

development

npm install 
npm run build

thanks

About

Add-on for the Leaflet.glify plugin to provide more leaflet-idiomatic bindings

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published