Leaflet List Markers

A Leaflet Control for listing visible markers in the map.

Initially based on the work of Stefano Cudini.

Options

Only the following of the original options were considered:

• collapsed: true / false
• update: true / false
• maxheight: 0.7
• maxwidth: 0.5

Events

• item-mouseover
• item-mouseout
• item-click (new)
• update-end (new)

Quick Start

• Create a leaflet map. Checkout Leaflets Quick Start Guide for a basic map example.
• Download and include leaflet-list-markers.js
• Download and include leaflet-list-markers.css

<script src="src/leaflet-list-markers.js"></script>
<link rel="stylesheet" href="src/leaflet-list-markers.css" />

Adding the List control to the map:

map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );
//markersLayer is a L.LayerGroup contains listing markers

Short way:

var map = new L.Map('map', { listMarkersControl: {layer: markersLayer} });

Examples

• Simple (Stefano Cudini), Code
• Collapsed, Code

WordPress

• You can use it with WordPress, Leaflet Map and Extensions for Leaflet Map - Example