examples/listing-markers.html

<!DOCTYPE html>
<html>
<head>
    <title>leaflet-sidebar example</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <link rel="stylesheet" href="../src/L.Control.Sidebar.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->

    <style>
        body {
            padding: 30px;
            font-family: sans-serif;
        }

        #map {
            width: 100%;
            height: 600px;
            border-radius: 10px;
        }

        #sidebar {
            padding: 24px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div id="sidebar"></div>
    <div id="map"></div>

    <p>This is based on a <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/listing-markers/">mapbox.js example</a>, but implemented with the leaflet-sidebar plugin instead.</p>

    <a href="https://github.com/Turbo87/leaflet-sidebar/"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 3000" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="../src/L.Control.Sidebar.js"></script>

    <script>
        var map = L.map('map');

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; OpenStreetMap contributors'
        }).addTo(map);

        var sidebar = L.control.sidebar('sidebar', {
            closeButton: false,
            position: 'right'
        });
        map.addControl(sidebar);

        setTimeout(function () {
            sidebar.show();
        }, 500);


        var markers = [];

        for (var x = -120; x < 120; x += 20) {
            for (var y = -80; y < 80; y += 10) {
                var marker = L.marker([x, y]).addTo(map);
                marker.options.title = [x, y].join(',');
                markers.push(marker);
            }
        }

        map.on('move', function() {
            // construct an empty list to fill with onscreen markers
            var inBounds = [],
            // get the map bounds - the top-left and bottom-right locations
                bounds = map.getBounds();

            // for each marker, consider whether it is currently visible by comparing
            // with the current map bounds
            for (var i = 0, len = markers.length; i < len; i++) {
                var marker = markers[i];
                if (bounds.contains(marker.getLatLng())) {
                    inBounds.push(marker.options.title);
                }
            }

            // display a list of markers.
            sidebar.setContent(inBounds.join('<br>\n'));
        });

        map.setView([37, -77], 5);
    </script>
</body>
</html>