├── README.md
├── LICENSE
├── assets
    └── css
    │   └── ol.css
├── 2-column
    └── index.html
└── 3-column
    └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | bootstrap-viewer-template
 2 | =========================
 3 | 
 4 | Some seed bootstrap templates for interactive map viewers. I was sick of basically re-creating these layouts from scratch every time I needed such a layout, so this should hopfefully serve as a nice starting point for anyone building a bootstrap-based map viewer.
 5 | 
 6 |  * [2-column layout](//jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html)
 7 |  * [3-column layout](//jumpinjackie.github.io/bootstrap-viewer-template/3-column/index.html)
 8 | 
 9 | 
10 | License
11 | =======
12 | 
13 | MIT


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Jackie Ng
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/assets/css/ol.css:
--------------------------------------------------------------------------------
1 | .ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;padding:0 2px}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-family:Arial;font-weight:400;font-size:1.2em}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom-extent button:after{content:"E"}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}button.ol-full-screen-false:after{content:"\2194"}button.ol-full-screen-true:after{content:"\00d7"}.ol-has-tooltip [role=tooltip]{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;font-weight:400;font-size:14px;text-shadow:0 0 2px #fff}.ol-has-tooltip:focus [role=tooltip],.ol-has-tooltip:hover [role=tooltip]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;clip:auto;padding:0 .4em;font-size:.8em;height:1.2em;width:auto;line-height:1.2em;z-index:1100;max-height:100px;white-space:nowrap;display:inline-block;background:#FFF;background:rgba(255,255,255,.6);color:#000;border:3px solid transparent;border-left-width:0;border-radius:0 4px 4px 0;bottom:.3em;left:2.2em}.ol-touch .ol-has-tooltip:focus [role=tooltip],.ol-touch .ol-has-tooltip:hover [role=tooltip]{display:none}.ol-zoom .ol-has-tooltip:focus [role=tooltip],.ol-zoom .ol-has-tooltip:hover [role=tooltip]{top:1.1em}.ol-attribution .ol-has-tooltip:focus [role=tooltip],.ol-attribution .ol-has-tooltip:hover [role=tooltip],.ol-full-screen .ol-has-tooltip:focus [role=tooltip],.ol-full-screen .ol-has-tooltip:hover [role=tooltip],.ol-rotate .ol-has-tooltip:focus [role=tooltip],.ol-rotate .ol-has-tooltip:hover [role=tooltip]{right:2.2em;left:auto;border-radius:4px 0 0 4px;border-left-width:3px;border-right-width:0}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff;max-width:calc(100% - 3.6em)}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul,.ol-attribution:not(.ol-collapsed) button:hover [role=tooltip]{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);border-radius:4px;outline:0;overflow:hidden;width:1.5675em;height:200px;padding:3px;margin:0}.ol-zoomslider-thumb{position:absolute;display:block;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;outline:0;overflow:hidden;cursor:pointer;font-size:1.14em;height:1em;width:1.375em;margin:3px;padding:0}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-attribution,.ol-control button,.ol-has-tooltip [role=tooltip],.ol-scale-line-inner{font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif}


--------------------------------------------------------------------------------
/2-column/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7 |     <link rel="stylesheet" href="../assets/css/ol.css" />
  8 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  9 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
 10 |     <title>Map Viewer (2-column layout)</title>
 11 |     <style type="text/css">
 12 |       body { overflow: hidden; }
 13 | 
 14 |       .navbar-offset { margin-top: 50px; }
 15 |       #map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; }
 16 |       #map .ol-zoom { font-size: 1.2em; }
 17 | 
 18 |       .zoom-top-opened-sidebar { margin-top: 5px; }
 19 |       .zoom-top-collapsed { margin-top: 45px; }
 20 | 
 21 |       .mini-submenu{
 22 |         display:none;  
 23 |         background-color: rgba(255, 255, 255, 0.46);
 24 |         border: 1px solid rgba(0, 0, 0, 0.9);
 25 |         border-radius: 4px;
 26 |         padding: 9px;  
 27 |         /*position: relative;*/
 28 |         width: 42px;
 29 |         text-align: center;
 30 |       }
 31 | 
 32 |       .mini-submenu-left {
 33 |         position: absolute;
 34 |         top: 60px;
 35 |         left: .5em;
 36 |         z-index: 40;
 37 |       }
 38 | 
 39 |       #map { z-index: 35; }
 40 | 
 41 |       .sidebar { z-index: 45; }
 42 | 
 43 |       .main-row { position: relative; top: 0; }
 44 | 
 45 |       .mini-submenu:hover{
 46 |         cursor: pointer;
 47 |       }
 48 | 
 49 |       .slide-submenu{
 50 |         background: rgba(0, 0, 0, 0.45);
 51 |         display: inline-block;
 52 |         padding: 0 8px;
 53 |         border-radius: 4px;
 54 |         cursor: pointer;
 55 |       }
 56 | 
 57 |     </style>
 58 |     <script type="text/javascript" src="../assets/js/ol.js"></script>
 59 |     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 60 |     <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 61 |     <script type="text/javascript">
 62 | 
 63 |       function applyMargins() {
 64 |         var leftToggler = $(".mini-submenu-left");
 65 |         if (leftToggler.is(":visible")) {
 66 |           $("#map .ol-zoom")
 67 |             .css("margin-left", 0)
 68 |             .removeClass("zoom-top-opened-sidebar")
 69 |             .addClass("zoom-top-collapsed");
 70 |         } else {
 71 |           $("#map .ol-zoom")
 72 |             .css("margin-left", $(".sidebar-left").width())
 73 |             .removeClass("zoom-top-opened-sidebar")
 74 |             .removeClass("zoom-top-collapsed");
 75 |         }
 76 |       }
 77 | 
 78 |       function isConstrained() {
 79 |         return $(".sidebar").width() == $(window).width();
 80 |       }
 81 | 
 82 |       function applyInitialUIState() {
 83 |         if (isConstrained()) {
 84 |           $(".sidebar-left .sidebar-body").fadeOut('slide');
 85 |           $('.mini-submenu-left').fadeIn();
 86 |         }
 87 |       }
 88 | 
 89 |       $(function(){
 90 |         $('.sidebar-left .slide-submenu').on('click',function() {
 91 |           var thisEl = $(this);
 92 |           thisEl.closest('.sidebar-body').fadeOut('slide',function(){
 93 |             $('.mini-submenu-left').fadeIn();
 94 |             applyMargins();
 95 |           });
 96 |         });
 97 | 
 98 |         $('.mini-submenu-left').on('click',function() {
 99 |           var thisEl = $(this);
100 |           $('.sidebar-left .sidebar-body').toggle('slide');
101 |           thisEl.hide();
102 |           applyMargins();
103 |         });
104 | 
105 |         $(window).on("resize", applyMargins);
106 | 
107 |         var map = new ol.Map({
108 |           target: "map",
109 |           layers: [
110 |             new ol.layer.Tile({
111 |               source: new ol.source.OSM()
112 |             })
113 |           ],
114 |           view: new ol.View({
115 |             center: [0, 0],
116 |             zoom: 2
117 |           })
118 |         });
119 |         applyInitialUIState();
120 |         applyMargins();
121 |       });
122 |     </script>
123 |   </head>
124 |   <body>
125 |     <div class="container">
126 |       <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
127 |         <div class="container-fluid">
128 |           <!-- Brand and toggle get grouped for better mobile display -->
129 |           <div class="navbar-header">
130 |             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
131 |             <span class="sr-only">Toggle navigation</span>
132 |             <span class="icon-bar"></span>
133 |             <span class="icon-bar"></span>
134 |             <span class="icon-bar"></span>
135 |             </button>
136 |             <a class="navbar-brand" href="#">Map Viewer (2-column layout)</a>
137 |           </div>
138 |           <!-- Collect the nav links, forms, and other content for toggling -->
139 |           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
140 |             <ul class="nav navbar-nav">
141 |               <li class="active"><a href="#">Link</a></li>
142 |               <li><a href="#">Link</a></li>
143 |               <li class="dropdown">
144 |                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
145 |                 <ul class="dropdown-menu">
146 |                   <li><a href="#">Action</a></li>
147 |                   <li><a href="#">Another action</a></li>
148 |                   <li><a href="#">Something else here</a></li>
149 |                   <li class="divider"></li>
150 |                   <li><a href="#">Separated link</a></li>
151 |                   <li class="divider"></li>
152 |                   <li><a href="#">One more separated link</a></li>
153 |                 </ul>
154 |               </li>
155 |             </ul>
156 |             <form class="navbar-form navbar-left" role="search">
157 |               <div class="form-group">
158 |                 <input type="text" class="form-control" placeholder="Search">
159 |               </div>
160 |               <button type="submit" class="btn btn-default">Submit</button>
161 |             </form>
162 |             <ul class="nav navbar-nav navbar-right">
163 |               <li><a href="#">Link</a></li>
164 |               <li class="dropdown">
165 |                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
166 |                 <ul class="dropdown-menu">
167 |                   <li><a href="#">Action</a></li>
168 |                   <li><a href="#">Another action</a></li>
169 |                   <li><a href="#">Something else here</a></li>
170 |                   <li class="divider"></li>
171 |                   <li><a href="#">Separated link</a></li>
172 |                 </ul>
173 |               </li>
174 |             </ul>
175 |             </div><!-- /.navbar-collapse -->
176 |             </div><!-- /.container-fluid -->
177 |           </nav>
178 |         </div>
179 |       </nav>
180 |       <div class="navbar-offset"></div>
181 |       <div id="map">
182 |       </div>
183 |       <div class="row main-row">
184 |         <div class="col-sm-4 col-md-3 sidebar sidebar-left pull-left">
185 |           <div class="panel-group sidebar-body" id="accordion-left">
186 |             <div class="panel panel-default">
187 |               <div class="panel-heading">
188 |                 <h4 class="panel-title">
189 |                   <a data-toggle="collapse" href="#layers">
190 |                     <i class="fa fa-list-alt"></i>
191 |                     Layers
192 |                   </a>
193 |                   <span class="pull-right slide-submenu">
194 |                     <i class="fa fa-chevron-left"></i>
195 |                   </span>
196 |                 </h4>
197 |               </div>
198 |               <div id="layers" class="panel-collapse collapse in">
199 |                 <div class="panel-body list-group">
200 |                   <a href="#" class="list-group-item">
201 |                     <i class="fa fa-globe"></i> Open Street Map
202 |                   </a>
203 |                   <a href="#" class="list-group-item">
204 |                     <i class="fa fa-globe"></i> Bing
205 |                   </a>
206 |                   <a href="#" class="list-group-item">
207 |                     <i class="fa fa-globe"></i> WMS
208 |                   </a>
209 |                 </div>
210 |               </div>
211 |             </div>
212 |             <div class="panel panel-default">
213 |               <div class="panel-heading">
214 |                 <h4 class="panel-title">
215 |                   <a data-toggle="collapse" href="#properties">
216 |                     <i class="fa fa-list-alt"></i>
217 |                     Properties
218 |                   </a>
219 |                 </h4>
220 |               </div>
221 |               <div id="properties" class="panel-collapse collapse in">
222 |                 <div class="panel-body">
223 |                   <p>
224 |                   Lorem ipsum dolor sit amet, vel an wisi propriae. Sea ut graece gloriatur. Per ei quando dicant vivendum. An insolens appellantur eos, doctus convenire vis et, at solet aeterno intellegebat qui.
225 |                   </p>
226 |                   <p>
227 |                   Elitr minimum inciderint qui no. Ne mea quaerendum scriptorem consequuntur. Mel ea nobis discere dignissim, aperiam patrioque ei ius. Stet laboramus eos te, his recteque mnesarchum an, quo id adipisci salutatus. Quas solet inimicus eu per. Sonet conclusionemque id vis.
228 |                   </p>
229 |                   <p>
230 |                   Eam vivendo repudiandae in, ei pri sint probatus. Pri et lorem praesent periculis, dicam singulis ut sed. Omnis patrioque sit ei, vis illud impetus molestiae id. Ex viderer assentior mel, inani liber officiis pro et. Qui ut perfecto repudiandae, per no hinc tation labores.
231 |                   </p>
232 |                   <p>
233 |                   Pro cu scaevola antiopam, cum id inermis salutatus. No duo liber gloriatur. Duo id vitae decore, justo consequat vix et. Sea id tale quot vitae.
234 |                   </p>
235 |                 </div>
236 |               </div>
237 |             </div>
238 |           </div>
239 |         </div>
240 |       </div>
241 |       <div class="mini-submenu mini-submenu-left pull-left">
242 |         <i class="fa fa-list-alt"></i>
243 |       </div>
244 |     </div>
245 |   </body>
246 | </html>


--------------------------------------------------------------------------------
/3-column/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7 |     <title>Map Viewer (3-column layout)</title>
  8 |     <link rel="stylesheet" href="../assets/css/ol.css" />
  9 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
 10 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
 11 |     <style type="text/css">
 12 |       body { overflow: hidden; }
 13 | 
 14 |       .navbar-offset { margin-top: 50px; }
 15 |       #map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; }
 16 |       #map .ol-zoom { font-size: 1.2em; }
 17 | 
 18 |       .zoom-top-opened-sidebar { margin-top: 5px; }
 19 |       .zoom-top-collapsed { margin-top: 45px; }
 20 | 
 21 |       .mini-submenu{
 22 |         display:none;  
 23 |         background-color: rgba(255, 255, 255, 0.46);
 24 |         border: 1px solid rgba(0, 0, 0, 0.9);
 25 |         border-radius: 4px;
 26 |         padding: 9px;  
 27 |         /*position: relative;*/
 28 |         width: 42px;
 29 |         text-align: center;
 30 |       }
 31 | 
 32 |       .mini-submenu-left {
 33 |         position: absolute;
 34 |         top: 60px;
 35 |         left: .5em;
 36 |         z-index: 40;
 37 |       }
 38 |       .mini-submenu-right {
 39 |         position: absolute;
 40 |         top: 60px;
 41 |         right: .5em;
 42 |         z-index: 40;
 43 |       }
 44 | 
 45 |       #map { z-index: 35; }
 46 | 
 47 |       .sidebar { z-index: 45; }
 48 | 
 49 |       .main-row { position: relative; top: 0; }
 50 | 
 51 |       .mini-submenu:hover{
 52 |         cursor: pointer;
 53 |       }
 54 | 
 55 |       .slide-submenu{
 56 |         background: rgba(0, 0, 0, 0.45);
 57 |         display: inline-block;
 58 |         padding: 0 8px;
 59 |         border-radius: 4px;
 60 |         cursor: pointer;
 61 |       }
 62 | 
 63 |     </style>
 64 |     <script type="text/javascript" src="../assets/js/ol.js"></script>
 65 |     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 66 |     <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 67 |     <script type="text/javascript">
 68 | 
 69 |       function applyMargins() {
 70 |         var leftToggler = $(".mini-submenu-left");
 71 |         var rightToggler = $(".mini-submenu-right");
 72 |         if (leftToggler.is(":visible")) {
 73 |           $("#map .ol-zoom")
 74 |             .css("margin-left", 0)
 75 |             .removeClass("zoom-top-opened-sidebar")
 76 |             .addClass("zoom-top-collapsed");
 77 |         } else {
 78 |           $("#map .ol-zoom")
 79 |             .css("margin-left", $(".sidebar-left").width())
 80 |             .removeClass("zoom-top-opened-sidebar")
 81 |             .removeClass("zoom-top-collapsed");
 82 |         }
 83 |         if (rightToggler.is(":visible")) {
 84 |           $("#map .ol-rotate")
 85 |             .css("margin-right", 0)
 86 |             .removeClass("zoom-top-opened-sidebar")
 87 |             .addClass("zoom-top-collapsed");
 88 |         } else {
 89 |           $("#map .ol-rotate")
 90 |             .css("margin-right", $(".sidebar-right").width())
 91 |             .removeClass("zoom-top-opened-sidebar")
 92 |             .removeClass("zoom-top-collapsed");
 93 |         }
 94 |       }
 95 | 
 96 |       function isConstrained() {
 97 |         return $("div.mid").width() == $(window).width();
 98 |       }
 99 | 
100 |       function applyInitialUIState() {
101 |         if (isConstrained()) {
102 |           $(".sidebar-left .sidebar-body").fadeOut('slide');
103 |           $(".sidebar-right .sidebar-body").fadeOut('slide');
104 |           $('.mini-submenu-left').fadeIn();
105 |           $('.mini-submenu-right').fadeIn();
106 |         }
107 |       }
108 | 
109 |       $(function(){
110 |         $('.sidebar-left .slide-submenu').on('click',function() {
111 |           var thisEl = $(this);
112 |           thisEl.closest('.sidebar-body').fadeOut('slide',function(){
113 |             $('.mini-submenu-left').fadeIn();
114 |             applyMargins();
115 |           });
116 |         });
117 | 
118 |         $('.mini-submenu-left').on('click',function() {
119 |           var thisEl = $(this);
120 |           $('.sidebar-left .sidebar-body').toggle('slide');
121 |           thisEl.hide();
122 |           applyMargins();
123 |         });
124 | 
125 |         $('.sidebar-right .slide-submenu').on('click',function() {
126 |           var thisEl = $(this);
127 |           thisEl.closest('.sidebar-body').fadeOut('slide',function(){
128 |             $('.mini-submenu-right').fadeIn();
129 |             applyMargins();
130 |           });
131 |         });
132 | 
133 |         $('.mini-submenu-right').on('click',function() {
134 |           var thisEl = $(this);
135 |           $('.sidebar-right .sidebar-body').toggle('slide');
136 |           thisEl.hide();
137 |           applyMargins();
138 |         });
139 | 
140 |         $(window).on("resize", applyMargins);
141 | 
142 |         var map = new ol.Map({
143 |           target: "map",
144 |           layers: [
145 |             new ol.layer.Tile({
146 |               source: new ol.source.OSM()
147 |             })
148 |           ],
149 |           view: new ol.View({
150 |             center: [0, 0],
151 |             zoom: 2
152 |           })
153 |         });
154 |         applyInitialUIState();
155 |         applyMargins();
156 |       });
157 |     </script>
158 |   </head>
159 |   <body>
160 |     <div class="container">
161 |       <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
162 |         <div class="container-fluid">
163 |           <!-- Brand and toggle get grouped for better mobile display -->
164 |           <div class="navbar-header">
165 |             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
166 |             <span class="sr-only">Toggle navigation</span>
167 |             <span class="icon-bar"></span>
168 |             <span class="icon-bar"></span>
169 |             <span class="icon-bar"></span>
170 |             </button>
171 |             <a class="navbar-brand" href="#">Map Viewer (3-column layout)</a>
172 |           </div>
173 |           <!-- Collect the nav links, forms, and other content for toggling -->
174 |           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
175 |             <ul class="nav navbar-nav">
176 |               <li class="active"><a href="#">Link</a></li>
177 |               <li><a href="#">Link</a></li>
178 |               <li class="dropdown">
179 |                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
180 |                 <ul class="dropdown-menu">
181 |                   <li><a href="#">Action</a></li>
182 |                   <li><a href="#">Another action</a></li>
183 |                   <li><a href="#">Something else here</a></li>
184 |                   <li class="divider"></li>
185 |                   <li><a href="#">Separated link</a></li>
186 |                   <li class="divider"></li>
187 |                   <li><a href="#">One more separated link</a></li>
188 |                 </ul>
189 |               </li>
190 |             </ul>
191 |             <form class="navbar-form navbar-left" role="search">
192 |               <div class="form-group">
193 |                 <input type="text" class="form-control" placeholder="Search">
194 |               </div>
195 |               <button type="submit" class="btn btn-default">Submit</button>
196 |             </form>
197 |             <ul class="nav navbar-nav navbar-right">
198 |               <li><a href="#">Link</a></li>
199 |               <li class="dropdown">
200 |                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
201 |                 <ul class="dropdown-menu">
202 |                   <li><a href="#">Action</a></li>
203 |                   <li><a href="#">Another action</a></li>
204 |                   <li><a href="#">Something else here</a></li>
205 |                   <li class="divider"></li>
206 |                   <li><a href="#">Separated link</a></li>
207 |                 </ul>
208 |               </li>
209 |             </ul>
210 |             </div><!-- /.navbar-collapse -->
211 |             </div><!-- /.container-fluid -->
212 |           </nav>
213 |         </div>
214 |       </nav>
215 |       <div class="navbar-offset"></div>
216 |       <div id="map">
217 |       </div>
218 |       <div class="row main-row">
219 |         <div class="col-sm-4 col-md-3 sidebar sidebar-left pull-left">
220 |           <div class="panel-group sidebar-body" id="accordion-left">
221 |             <div class="panel panel-default">
222 |               <div class="panel-heading">
223 |                 <h4 class="panel-title">
224 |                   <a data-toggle="collapse" href="#layers">
225 |                     <i class="fa fa-list-alt"></i>
226 |                     Layers
227 |                   </a>
228 |                   <span class="pull-right slide-submenu">
229 |                     <i class="fa fa-chevron-left"></i>
230 |                   </span>
231 |                 </h4>
232 |               </div>
233 |               <div id="layers" class="panel-collapse collapse in">
234 |                 <div class="panel-body list-group">
235 |                   <a href="#" class="list-group-item">
236 |                     <i class="fa fa-globe"></i> Open Street Map
237 |                   </a>
238 |                   <a href="#" class="list-group-item">
239 |                     <i class="fa fa-globe"></i> Bing
240 |                   </a>
241 |                   <a href="#" class="list-group-item">
242 |                     <i class="fa fa-globe"></i> WMS
243 |                   </a>
244 |                 </div>
245 |               </div>
246 |             </div>
247 |             <div class="panel panel-default">
248 |               <div class="panel-heading">
249 |                 <h4 class="panel-title">
250 |                   <a data-toggle="collapse" href="#properties">
251 |                     <i class="fa fa-list-alt"></i>
252 |                     Properties
253 |                   </a>
254 |                 </h4>
255 |               </div>
256 |               <div id="properties" class="panel-collapse collapse in">
257 |                 <div class="panel-body">
258 |                   <p>
259 |                   Lorem ipsum dolor sit amet, vel an wisi propriae. Sea ut graece gloriatur. Per ei quando dicant vivendum. An insolens appellantur eos, doctus convenire vis et, at solet aeterno intellegebat qui.
260 |                   </p>
261 |                   <p>
262 |                   Elitr minimum inciderint qui no. Ne mea quaerendum scriptorem consequuntur. Mel ea nobis discere dignissim, aperiam patrioque ei ius. Stet laboramus eos te, his recteque mnesarchum an, quo id adipisci salutatus. Quas solet inimicus eu per. Sonet conclusionemque id vis.
263 |                   </p>
264 |                   <p>
265 |                   Eam vivendo repudiandae in, ei pri sint probatus. Pri et lorem praesent periculis, dicam singulis ut sed. Omnis patrioque sit ei, vis illud impetus molestiae id. Ex viderer assentior mel, inani liber officiis pro et. Qui ut perfecto repudiandae, per no hinc tation labores.
266 |                   </p>
267 |                   <p>
268 |                   Pro cu scaevola antiopam, cum id inermis salutatus. No duo liber gloriatur. Duo id vitae decore, justo consequat vix et. Sea id tale quot vitae.
269 |                   </p>
270 |                 </div>
271 |               </div>
272 |             </div>
273 |           </div>
274 |         </div>
275 |         <div class="col-sm-4 col-md-6 mid"></div>
276 |         <div class="col-sm-4 col-md-3 sidebar sidebar-right pull-right">
277 |           <div class="panel-group sidebar-body" id="accordion-right">
278 |             <div class="panel panel-default">
279 |               <div class="panel-heading">
280 |                 <h4 class="panel-title">
281 |                   <a data-toggle="collapse" href="#taskpane">
282 |                     <i class="fa fa-tasks"></i>
283 |                     Task Pane
284 |                   </a>
285 |                   <span class="pull-right slide-submenu">
286 |                     <i class="fa fa-chevron-right"></i>
287 |                   </span>
288 |                 </h4>
289 |               </div>
290 |               <div id="taskpane" class="panel-collapse collapse in">
291 |                 <div class="panel-body">
292 |                   <p>
293 |                   Lorem ipsum dolor sit amet, vel an wisi propriae. Sea ut graece gloriatur. Per ei quando dicant vivendum. An insolens appellantur eos, doctus convenire vis et, at solet aeterno intellegebat qui.
294 |                   </p>
295 |                   <p>
296 |                   Elitr minimum inciderint qui no. Ne mea quaerendum scriptorem consequuntur. Mel ea nobis discere dignissim, aperiam patrioque ei ius. Stet laboramus eos te, his recteque mnesarchum an, quo id adipisci salutatus. Quas solet inimicus eu per. Sonet conclusionemque id vis.
297 |                   </p>
298 |                   <p>
299 |                   Eam vivendo repudiandae in, ei pri sint probatus. Pri et lorem praesent periculis, dicam singulis ut sed. Omnis patrioque sit ei, vis illud impetus molestiae id. Ex viderer assentior mel, inani liber officiis pro et. Qui ut perfecto repudiandae, per no hinc tation labores.
300 |                   </p>
301 |                   <p>
302 |                   Pro cu scaevola antiopam, cum id inermis salutatus. No duo liber gloriatur. Duo id vitae decore, justo consequat vix et. Sea id tale quot vitae.
303 |                   </p>
304 |                 </div>
305 |               </div>
306 |             </div>
307 |           </div>
308 |         </div>
309 |       </div>
310 |       <div class="mini-submenu mini-submenu-left pull-left">
311 |         <i class="fa fa-list-alt"></i>
312 |       </div>
313 |       <div class="mini-submenu mini-submenu-right pull-right">
314 |         <i class="fa fa-tasks"></i>
315 |       </div>
316 |     </div>
317 |   </body>
318 | </html>


--------------------------------------------------------------------------------