No description, website, or topics provided.
CSS HTML JavaScript
Latest commit cfab576 Apr 19, 2016 @Eclipse1979 changed tiles for first example
changed tiles for first example
Failed to load latest commit information.
dist Update leaflet.conditionalLayer.js Apr 19, 2016
example changed tiles for first example Apr 19, 2016 Update Apr 19, 2016


A layer that does not show any more than a certain amount of markers visible in the viewport. To be used when encountering performance probleme due to an important quantity of markers in the map.

Check out the Demo. Note that on this page there are more than 40 000 circles.

Using Leaflet-ConditionalLayer :

To use Leaflet-ConditionalLayer you have to create the control. The slider's id (in the options) must be the same as the variable name used by the slider. For instance in the following code, options should have id: "newSlider". The function fn should only take the value of the input as a parameter and will be called when the input value is changed.

L.conditionalMarkers(<ILayer[]> Layers, <Leaflet.COnitionalLayer options> options).addTo(map);

Layers must be an array of ILayers. The preference order of an ILayer shown depends its id in Layers. The layer will choose the first ILayers in the viewport in the array, thus the lower an ILayer's id, the more it will to be shown.

Simple usage example :

var markerArray = [, radius, options),
    L.marker(pos, options),
var conditionalLayer = L.conditionalMarkers(markerArray, {maxMarkers: 40}).addTo(map);

Methods :

Methods are the same as those of FeatureGroup.

Options :

  • maxMarkers: maximal number of markers
  • DisplaySort: sort function which is passed each layer. default sort is by each layers leaflet_ID, but the function can use any value stored in each layer to sort them. Default function: function(a, b) { return b._leaflet_id - a._leaflet_id; }