WebGL overlay for leaflet

Using leafletjs-canvas-overlay for canvas. Based on this blog post.

Building

Install the dependencies by running npm install then build project by running npm run build. The built files will be place in the ./dist directory.

Installing

Install the package by running npm install leaflet-webgl-overlay

npm package

Basic usage

Create a new WebGLOverlay and add it to your leaflet map:

let overlay = new WebGLOverlay();
overlay.addTo(map);

You can add GLMarkers and GLCircleMarkers to this overlay.

overlay.addMarker(new GLMarker([0,0],options));
overlay.addCircleMarker(new GLCircleMarker([10,10],options));

A popup can be binded to the markers, that opens when the marker is clicked.

let marker = new GLMarker([0,0],options);
marker.bindPopup('content',options);

GLMarkerOptions:

export interface GLMarkerOptions{
    color?: string; // color in hex format
    opacity?: number; // opacity value between 0-1
    popupPos?: number[]; // position of the popup relative to the icon's anchor position
    rotation?: number; // marker rotation in radian
    icon?: GLIconOptions; // icon of the marker
}

GLIconOptions

export interface GLIconOptions {
    url: string; // path to the icon img
    size: number[]; // size of the icon [width,height]
    anchorPos: number[]; //icon anchor position relative to the top-left corner of the image [x,y]
}

GLCircleMarkerOptions:

export interface GLCircleMarkerOptions {
     color?: string; // color in hex format
    opacity?: number; // opacity value between 0-1
    popupPos?: number[]; // position of the popup relative to the icon's anchor position
    radius?: number; // size of the marker
}