Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A Leaflet L.Layer configured to cluster together markers

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 build
Octocat-spinner-32 dist
Octocat-spinner-32 example
Octocat-spinner-32 external
Octocat-spinner-32 src
Octocat-spinner-32 CHANGELOG.md
Octocat-spinner-32 Jakefile.js
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.md
README.md

Leafpile

A marker clustering layer for Leaflet maps. Markers are grouped together based on pixel-distance from each other at a particular zoom level. As the map zooms in and out, groups are recomputed. Image assets are base64-encoded into the javascript file, so there's no need to host images/stylesheets.

There's a demo available here.

Alt text

Requirements

Leaflet

Requires Leaflet version >= 0.4. Get it from the site, or directly from their github repo.

Getting Started

Just include leafpile.min.js after leaflet.js...

At the bottom of the <body> section (next to other JS)

<script src="path/to/leaflet.js"></script>
<script src="path/to/leafpile.min.js"></script>

In your javascript (where you're setting up your Leaflet map)

// normal map init stuff
var map = new L.Map('leaflet-map');
var tiles = new L.StamenTileLayer('toner');
map.addLayer(tiles);
map.setView(new L.LatLng(40.423, -98.7372), 4);

// setup the leafpile
var leafpile = new L.Leafpile();
map.addLayer(leafpile);

// add some markers to the pile
var m1 = new L.Marker(new L.LatLng(47.81, -124.18)),
    m2 = new L.Marker(new L.LatLng(39.33, -93.81)),
    m3 = new L.Marker(new L.LatLng(42.37, -121.90));
leafpile.addMarker(m1);
leafpile.addMarker(m2);
leafpile.addMarker(m3);

And away you go!

Configuration

These are passed as an object to the L.Leafpile constructor

var leafpile = new L.Leafpile({radius: 999});

radius - The pixel radius of each pile - (default: 60)

maxZoomChange - The maximum number of view levels the map will zoom in when clicking on a pile - (default: 2)

maxZoomLevel - The maximum zoom level where piles will display. After that, plain ol' markers will show up - (default: 8)

autoEnable - When set to true, will automatically start grouping markers as you add them. Otherwise, plain markers will show up until you enable() the Leafpile - (default: true)

singlePiles - When set to true, single markers will be displayed with the special "pile icon". When false, the markers will display normally until there are 2 things in the pile. Defaults to false.

Functions

After creating the Leafpile, these public methods are available for your use and abuse.

var leafpile = new L.Leafpile({maxZoomLevel: 5});
leafpile.addMarker(mark);
leafpile.enable();
...

addMarker(marker) - add an L.Marker to the layer

getMarkers() - get an array of L.Markers that belong to this layer

removeMarker(marker) - remove an L.Marker from the layer

setRadius(radius) - change the radius option of the Leafpile on-the-fly!

clear() - remove everything from this layer and clear the map

enable() - group markers on this layer

disable() - ungroup markers on this layer

Events

leafpileclick - listen for someone clicking on a leafpile

leafpile.on('leafpileclick', function(e) {
    // e.markers - array of markers in the clicked leafpile
    // e.leafpile -  the clicked leafpile marker
    // e.zooming - if true, the map is about to zoom in
    // e.cancelZoom() - function to call if you want to cancel zooming
});

Issues and Contributing

Please, let me know about any bugs/feature-requests via the issues tracker. I've got a few things in the pipeline already (grouping-by-state, better images), but I'm always looking for new ideas. And if you'd like to contribute, send me a note! Thanks.

License

Leafpile is free software, and may be redistributed under the MIT-LICENSE.

Thanks for listening!

Something went wrong with that request. Please try again.