Skip to content

Instantly share code, notes, and snippets.

@Zofren

Zofren/gist:5b39aa3d0a89b4fb3a7b Secret

Created October 18, 2014 14:24
Show Gist options
  • Save Zofren/5b39aa3d0a89b4fb3a7b to your computer and use it in GitHub Desktop.
Save Zofren/5b39aa3d0a89b4fb3a7b to your computer and use it in GitHub Desktop.
Download ZIP
Generated page, leaflet-sidebar does not work
Raw
gistfile1.html
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif] -->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waterbarrel</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/normalize.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="/assets/ext/leaflet/coordinates/Leaflet.Coordinates-0.1.4.css" />
<link rel="stylesheet" href="/assets/ext/leaflet/sidebar/leaflet-sidebar.css" />
<link rel="stylesheet" href="/assets/css/waterbarrel.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/vendor/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/vendor/modernizr.js"></script>
</head>
<body>
<div id="main-area">
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<ul class="sidebar-tabs" role="tablist">
<li>
<a href="#home" role="tab">
<i class="fa fa-bars"></i>
</a>
</li>
<li>
<a href="#profile" role="tab">
<i class="fa fa-user"></i>
</a>
</li>
<li>
<a href="#messages" role="tab">
<i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#settings" role="tab">
<i class="fa fa-gear"></i>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="sidebar-content active">
<div class="sidebar-pane" id="home">
<h1>sidebar-v2</h1>
<p>
A responsive sidebar for mapping libraries like
<a href="http://leafletjs.com/">Leaflet</a>
or
<a href="http://openlayers.org/">OpenLayers</a>
.
</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>
<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="sidebar-pane" id="profile">
<h1>Profile</h1>
</div>
<div class="sidebar-pane" id="messages">
<h1>Messages</h1>
</div>
<div class="sidebar-pane" id="settings">
<h1>Settings</h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/vendor/fastclick.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/foundation/foundation.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="/assets/ext/leaflet/ajax/leaflet.ajax.min.js"></script>
<script src="/assets/ext/leaflet/coordinates/Leaflet.Coordinates-0.1.4.min.js"></script>
<script src="/assets/ext/leaflet/sidebar/leaflet-sidebar.js"></script>
<script src="/assets/js/waterbarrel.js"></script>
<script>
document.body.onload =
initEmptyMap(26.280160465684745,86.3691980234579,5);
</script>
<script>
$(document).ready(function(){
$(document).foundation();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment