Plugins - Marker Cluster
Leaflet was designed to be lightweight and easy to use. It is also extensible, and the community has developed dozens of useful plugins. We're going to cover a few of the most common here during the workshop, the first being Marker Cluster.
Marker Cluster is a plugin for adding animated marker clusters to your maps. Earlier, when we built our Skyline locations map, many of the markers overlapped with one another when we were zoomed out. The Marker Cluster plugin will improve the usability of the map when you have several markers clustered together.
index.html
To use a plugin, we have to include the plugin files. For Marker Cluster, we need to add a CSS and JavaScript file to the head section of our index.html.
map.js
Next, instead of adding our markers to an L.featureGroup, we'll add them to an L.markerClusterGroup (provided by the plugin). This is a one line change from our popup example we created earlier.
Result
Let's take a look at the result here.