maplibre-gl-performance-layers v1.0.0

maplibre-gl-performance-layers

MapLibre GL JS plugin with custom layers for rendering massive GeoJSON datasets.

Why use this library?

If you don't need to render massive data sets, you are probably better off using the layers that come included with MapLibre GL JS by default. If your dataset is large enough that you notice performance problems with included layers, consider using clusters first. If you still have performance problems or if clusters are not acceptable for your use-case then try using this library.

Features

• Fast rendering of massive data sets. (Render up to 10 million GeoJSON points.)
• Support for Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon geometry types.
• Data driven size, color, opacity, outlineSize, outlineColor and outlineOpacity.
• Automatic switching between direct rendering for small data sets and tiled rendering for large data sets.
• Option to sacrifice quality for performance using the simpleRendering option.

Demo Website

Check out this demo website showcasing the rendering capabilities. If you like learning from examples, the source code of the demo website can be found here.

Installation

$ npm install maplibre-gl-performance-layers

This library includes TypeScript types.

Basic Usage

Point layer (for static Point and MultiPoint geometry):

import { pointLayer } from 'maplibre-gl-performance-layers';
import { Point } from 'geojson';

const layer = pointLayer<Point, unknown>({
	id: 'points',
	// layer options ...
});
layer.setDataAndStyle(pointFeatureCollection, {
	// style properties ...
});
map.addLayer(layer);

Line layer (for static LineString and MultiLineString geometry):

import { lineLayer } from 'maplibre-gl-performance-layers';
import { LineString } from 'geojson';

const layer = lineLayer<LineString, unknown>({
	id: 'lines',
	// layer options ...
});
layer.setDataAndStyle(lineStringFeatureCollection, {
    // style properties ...
});
map.addLayer(layer);

Polygon layer (for static Polygon and MultiPolygon geometry):

import { polygonLayer } from 'maplibre-gl-performance-layers';
import { Polygon } from 'geojson';

const layer = polygonLayer<Polygon, unknown>({
	id: 'polygons',
	// layer options ...
});
layer.setDataAndStyle(polygonFeatureCollection, { 
	// style properties ...
});
map.addLayer(layer);

Dynamic point layer (for Point and MultiPoint geometry streams):

import { dynamicPointLayer } from 'maplibre-gl-performance-layers';
import { Point } from 'geojson';

const layer = dynamicPointLayer<Point, unknown>({
	id: 'dynamicPoints',
	// layer options ...
});
layer.setStyle({ 
    // style properties ...
});
map.addLayer(layer);
layer.dataOperations.add(pointFeature1);
layer.dataOperations.addAll([pointFeature2, pointFeature3]);
layer.dataOperations.removeFirst();
layer.dataOperations.removeNFirst(2);

API Documentation

More detailed documentation of the library API can be found here.