A leaflet plugin that implements a quadtree
npm install leaflet-quadtree> Leaflet plugin that implements a quadtree for efficient retrieval of visible features' properties
To see the plugin in action just click one of the following links:
* __Huge number of elements:__ 1 million markers are created in random places and the quadtree is used to fetch the visible ones and add them to the map when it's moved. You can find the demo here (__Alert:__ The browser tab might report itself as not working when creating the markers, just wait for it to finish)
* __Visible feature properties retrieval:__ Sample data is loaded into the map and the quadtree is used to efficiently crawl the features of each visible element. You can find the demo here
* __Marker culling:__ On each click a numbered marker is created, the quadtree is updated and the visible elements' numbers are shown. You can find the demo here
* __Quadtree construction:__ On each click a marker is created and the resulting quadtree is shown. You can find the demo here
Create a marker or a polygon and add it to the quadtree. It can even be your own class, it only has to implement the getLatLng() or the getBounds() methods.
``js
// create the quadtree with the options you want
var quadtree = L.quadtree({maxObjectsPerLevel: 4});
...
// add the markers to the quadtree
quadtree.add(marker);
...
//retrieve the visible markers or polygons inside some bounds
//map bounds are used in the examples but any bounds can be used
var bounds = map.getBounds();
var colliders = quadtree.getColliders(bounds);
`
js
var quadtree = L.quadtree(options);
`
#### Options
Property
Description
Type
Default
maxObjectsPerLevel
Maximum number of markers or polygons per level. When the number of objects on a level is greater than the one specified here the node is split into 4 child nodes.
Integer
10
maxLevels
Maximum number of levels of the quadtree. When the quadtree reaches this depth the leaf nodes are not split anymore
Integer
8
$3
Adds an element to the quatree. Any object that implements the getLatLng() or the getBounds() methods is supported
js
var quadtree = L.quadtree(options);
...
quadtree.add(marker);
`$3
Gets an array with the elements that fall inside the given bounds
js
var quadtree = L.quadtree(options);
...
var colliders = quadtree.getColliders(bounds);
`$3
Gets an array with the elements that might fall inside the given bounds. This method is faster than the previous one although it's inexact, you can use it if you only need an upper bound of the visible elements. __This method returns the elements found on the leaf nodes that intersect the given bounds__
js
var quadtree = L.quadtree(options);
...
var colliders = quadtree.getPossibleColliders(bounds);
`
$3
Gets an array with the number of elements inside each node. If a node has childs an array is returned with the elements of its child nodes in the following order [NW, NE, SW, SE]
js
var quadtree = L.quadtree(options);
...
var stats = quadtree.getQuadtreeStats();
``Copyright (c) 2017- ibesora (BEERWARE License)
See LICENSE for more info.