Leaflet.dynamic

What is this?

This library provides a way to draw and update thousands of markers without much effort using pixi.js and spatial partitioning algorithms.

Basic Usage

import { Dynamic } from 'leaflet.dynamic';

var map = L.map('map'. {
	maxZoom: 17,
	minZoom: 4,
	zoomAnimation: false // this is needed
});

// Instantiate Dynamic Layer
var dynamic = new Dynamic(null);

// Register textures
dynamic.registerCircleTexture('circle', 4, 0x000000, 0.6, 1, 0xFFFFFF);	// primitive
dynamic.registerRectangleTexture('rectangle', 8, 8, 0xFF0000, 0.6, 1, 0xFFFFFF); // primitive
dynamic.registerImageTexture('star', 'assets/img/star.png'); // image
dynamic.registerImageTexture('moon', 'assets/img/moon.png'); // image
dynamic.registerImageTexture('user', 'assets/img/user.png'); // image
dynamic.registerTextTexture('fa-car', '\uf1b9', '#000', 'fontAwesome', '17px'); // font-awesome icon
dynamic.registerTextTexture('fa-bycicle', '\uf206', '#f00', 'fontAwesome', '17px'); // font-awesome icon
 
// Add to leaflet map
map.addLayer(this.dynamic);

// Add markers
var marker1 = this.dynamic.add(1, L.latLng(-34.12, -58.12), 'circle');
var marker2 = this.dynamic.add(2, L.latLng(-34.34, -58.34), 'star');
var marker3 = this.dynamic.add(3, L.latLng(-34.67, -58.67), 'fa-car', true); //isText = true (font-awesome icon)

// Move markers around
marker1.setLatLng(L.latLng(-34.555, -58.555));
marker2.setLatLng(L.latLng(-34.777, -58.777));
marker3.setLatLng(L.latLng(-34.999, -58.999));

// Update markers inside quadtree, might not be necessary to do all the time if they move slowly between nodes
dynamic.update(marker1);
dynamic.update(marker2);
dynamic.update(marker3);

// Delete markers
dynamic.delete(marker1);
dynamic.delete(marker2);
dynamic.delete(marker3);

// Render
dynamic.redraw();