leaflet-sidebar
Version:
A responsive sidebar plugin for Leaflet
127 lines (106 loc) • 4.52 kB
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css" />
<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: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="sidebar">
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
<h2>Select</h2>
<a href="http://silviomoreto.github.io/bootstrap-select/">bootstrap-select plugin</a>
<p></p>
<div class="dropdown">
<select class="selectpicker" title="This is a test select">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</div>
<div class="dropdown" >
<select class="selectpicker" name="test multiselect" title="multiselect test" multiple>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
</select>
</div>
</div>
<div id="map"></div>
<a href="https://github.com/Turbo87/leaflet-sidebar/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<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');
map.setView([51.2, 7], 9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
var sidebar = L.control.sidebar('sidebar', {
closeButton: true,
position: 'left'
});
map.addControl(sidebar);
setTimeout(function () {
sidebar.show();
}, 500);
var marker = L.marker([51.2, 7]).addTo(map).on('click', function () {
sidebar.toggle();
});
map.on('click', function () {
sidebar.hide();
})
sidebar.on('show', function () {
console.log('Sidebar will be visible.');
});
sidebar.on('shown', function () {
console.log('Sidebar is visible.');
});
sidebar.on('hide', function () {
console.log('Sidebar will be hidden.');
});
sidebar.on('hidden', function () {
console.log('Sidebar is hidden.');
});
L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {
console.log('Close button clicked.');
});
</script>
</body>
</html>