1.0.10 • Published 4 years ago
leaflet-webgl-overlay v1.0.10
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
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
}