mirror of
https://github.com/walkermatt/ol-layerswitcher.git
synced 2026-01-25 14:48:05 +00:00
67 lines
2.8 KiB
HTML
67 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>OpenLayers - LayerSwitcher sidebar</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
|
|
<link rel="stylesheet" href="https://rawgit.com/Turbo87/sidebar-v2/master/css/ol3-sidebar.css" />
|
|
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
|
|
<link rel="stylesheet" href="sidebar.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- START OF SIDEBAR DIV -->
|
|
<div id="sidebar" class="sidebar collapsed">
|
|
|
|
<!-- Nav tabs -->
|
|
<div class="sidebar-tabs">
|
|
<ul 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 class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
|
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
|
</ul>
|
|
|
|
<ul role="tablist">
|
|
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="sidebar-content">
|
|
<div class="sidebar-pane" id="home">
|
|
<h1 class="sidebar-header">
|
|
Layers
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
<!-- !!! HERE WILL GO THE CONTENT OF LAYERSWITCHER !!! -->
|
|
<div id="layers" class="layer-switcher"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="profile">
|
|
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="messages">
|
|
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
|
</div>
|
|
|
|
<div class="sidebar-pane" id="settings">
|
|
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END OF SIDEBAR DIV -->
|
|
|
|
<div id="map" class="sidebar-map"></div>
|
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
|
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
|
|
<script src="https://rawgit.com/Turbo87/sidebar-v2/master/js/ol3-sidebar.js"></script>
|
|
<script src="../dist/ol-layerswitcher.js"></script>
|
|
<script src="sidebar.js"></script>
|
|
</body>
|
|
</html>
|