cgps-leaflet-canvas-marker

    1.0.0 • Public • Published

    Leaflet.Canvas-Markers

    Leaflet plugin for displaying markers on canvas instead of DOM. Working with Leaflet 1.0.0 and above.

    Demo

    There's a demo for 10000 points, running on Canvas

    Installation and basic usage

    Just download leaflet.canvas-markers.js from the dist folder and attach it to your project.

    <script src="leaflet.canvas-markers.js"></script>

    Now attach layer to map and some markers.

    // Adds a layer
    var ciLayer = L.canvasIconLayer({}).addTo(map);
     
    // Marker definition
    var marker =  L.marker([58.5578, 29.0087], {icon: icon});
     
    // Adding marker to layer
    ciLayer.addMarker(marker);

    Benchmark

    Plugin was tested in Google Chrome v59. There is results for 100000 markers:

    Parameter Default Leaflet Markers Leaflet.Canvas-Markers
    Memory used up to 2.8 Gb about 300 Mb
    First load time 160-200 seconds 7 seconds
    Zoom and move time more than 3 minutes 0.5 seconds

    As you can see DOM operations are slow, so you should use canvas for a large number of markers.

    You can also use L.circleMarker for your points with similar performance, but then you're limited to icon design.

    Methods

    • addMarker(marker): Adds a marker to the layer.
    • removeMarker(marker, redraw): Removes a marker from the layer. Set redraw to true if you want to redraw layer after marker remove
    • redraw(): Redraws the layer

    I also implemented binds for default addLayer and removeLayer (equal to removeMarker(marker, true) methods.

    Install

    npm i cgps-leaflet-canvas-marker

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • cgps-admin