examples/simple-collapsed.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="//unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="../dist/leaflet-list-markers.min.css" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h3><a href="../"><big>◄</big> Leaflet List Markers</a></h3>

<h4>Simple Example: <em>Center random italy citi and show visible markers</em></h4>
<div id="map"></div>

<script src="//unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="../dist/leaflet-list-markers.min.js"></script>
<script src="cities-italy.js"></script>
<script>

	var map = new L.Map('map', {zoom: 10, minZoom:10, center: L.latLng(43.90974,10.2419) });	//set center from first location

	map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));	//base layer

	var markersLayer = new L.LayerGroup();	//layer contain searched elements
	map.addLayer(markersLayer);

	////////////populate map from cities-italy.js
	for(var i in cities)
		L.marker(L.latLng(cities[i].loc), {title: cities[i].name}).addTo( markersLayer );

	//TODO make example using label option with pop fields

	//inizialize Leaflet List Markers
	var list = new L.Control.ListMarkers({layer: markersLayer, collapsed: true, itemIcon: null});

	list.on('item-mouseover', function(e) {
		e.layer.setIcon(L.icon({
			iconUrl: '../images/select-marker.png'
		}))
	}).on('item-mouseout', function(e) {
		e.layer.setIcon(L.icon({
			iconUrl: L.Icon.Default.imagePath+'/marker-icon.png'
		}))
	}).on("item-click", function(e) {
		if(map.options.maxZoom)
			map.setView(e.layer.getLatLng(), Math.min(map.getZoom(), map.options.maxZoom) );
		else
			map.panTo(e.layer.getLatLng());
	});

	map.addControl( list );


</script>

<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> &bull; <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>

</body>
</html>