You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
5.9 KiB
HTML
101 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>sidebar-v2 example</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
crossorigin=""/>
|
|
|
|
<link rel="stylesheet" href="../css/leaflet-sidebar.css" />
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
}
|
|
#map {
|
|
height: 55%;
|
|
}
|
|
|
|
.lorem {
|
|
font-style: italic;
|
|
color: #AAA;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sidebar" class="leaflet-sidebar">
|
|
<!-- Nav tabs -->
|
|
<div class="leaflet-sidebar-tabs">
|
|
<ul role="tablist">
|
|
<li><a href="./" role="tab"><i class="fa fa-arrow-left"></i></a></li>
|
|
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
|
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
|
</ul>
|
|
|
|
<ul role="tablist">
|
|
<li><a href="//github.com/nickpeihl/leaflet-sidebar-v2"><i class="fa fa-github"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="leaflet-sidebar-content">
|
|
<div class="leaflet-sidebar-pane" id="home">
|
|
<h1 class="leaflet-sidebar-header">
|
|
sidebar-v2
|
|
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<p>A responsive sidebar for the mapping library <a href="https://leafletjs.com/">Leaflet</a>.</p>
|
|
<p>Compatible with version 0.7 and 1.x (tested up to 1.6.0)</p>
|
|
|
|
<h2>More examples</h2>
|
|
<ul>
|
|
<li><a href="./position-right.html">Right aligned</a></li>
|
|
<li><a href="./leaflet-0.7.html">Proof that it works with leaflet 0.7 ;)</a></li>
|
|
</ul>
|
|
|
|
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-pane" id="profile">
|
|
<h1 class="leaflet-sidebar-header">Profile<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
|
</div>
|
|
|
|
<div class="leaflet-sidebar-pane" id="messages">
|
|
<h1 class="leaflet-sidebar-header">Messages<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
|
|
<a href="https://github.com/nickpeihl/leaflet-sidebar-v2/"><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://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
crossorigin=""></script>
|
|
<script src="../js/leaflet-sidebar.js"></script>
|
|
|
|
<script>
|
|
var map = L.map('map');
|
|
map.setView([51.2, 7], 9);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
attribution: 'Map data © OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
var marker = L.marker([51.2, 7]).addTo(map);
|
|
|
|
var sidebar = L.control.sidebar({ container: 'sidebar' }).addTo(map).open('profile');
|
|
</script>
|
|
</body>
|
|
</html>
|