I'm using the THE MAP GUY(DE) Bootstrap template and applying it to leaflet using the code below. The issue I'm having is that the zoom-control doesn't toggle right on page load. It will only after you collapse and then re-expand the panel again. How can I get the zoom to toggle on load? What am I missing?
You can see the OL3 here: http://jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html.
JavaScript:
function applyMargins() {
var leftToggler = $(".mini-submenu-left");
if (leftToggler.is(":visible")) {
$("#map .leaflet-control-zoom")
.css("margin-left", 5)
.css("margin-Top", 50)
.removeClass("zoom-top-opened-sidebar")
.addClass("zoom-top-collapsed");
} else {
$("#map .leaflet-control-zoom")
.css("margin-left", 2 + $(".sidebar-left").width())
.css("margin-Top", 5)
.removeClass("zoom-top-opened-sidebar")
.removeClass("zoom-top-collapsed");
}
}
function isConstrained() {
return $(".sidebar").width() == $(window).width();
}
function applyInitialUIState() {
if (isConstrained()) {
$(".sidebar-left .sidebar-body").fadeOut('slide');
$('.mini-submenu-left').fadeIn();
}
}
$(function () {
$('.sidebar-left .slide-submenu').on('click', function () {
var thisEl = $(this);
thisEl.closest('.sidebar-body').fadeOut('slide', function () {
$('.mini-submenu-left').fadeIn();
applyMargins();
});
});
$('.mini-submenu-left').on('click', function () {
var thisEl = $(this);
$('.sidebar-left .sidebar-body').toggle('slide');
thisEl.hide();
applyMargins();
});
var map = L.map('map').setView([40.91, -96.63], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.control.mousePosition().addTo(map);
L.control.scale().addTo(map);
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap()
}).addTo(map);
var locationFilter = new L.LocationFilter().addTo(map);
$(window).on("resize", applyMargins);
applyInitialUIState();
applyMargins();
});
//Bootstrap modal dragging
$(document).ready(function () {
$(".modal-draggable .modal-dialog").draggable({
handle: ".modal-header", cursor: "move"
});
});
CSS
body { overflow: hidden; }
.navbar-offset { margin-top: 50px; }
#map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; }
#map .leaflet-control-zoom { font-size: 1.2em; }
.zoom-top-opened-sidebar {
margin-top: 5px;
left: 2px;
}
.zoom-top-collapsed {margin-top: 45px; }
.mini-submenu{
display:none;
background-color: rgba(255, 255, 255, 0.46);
border: 1px solid rgba(0, 0, 0, 0.9);
border-radius: 4px;
padding: 9px;
/*position: relative;*/
width: 42px;
text-align: center;
}
.mini-submenu-left {
position: absolute;
top: 1px;
left: 1.2em;
z-index: 40;
}
#map { z-index: 35; }
.sidebar { z-index: 45; }
.main-row { position: relative; top: 5px; left: 2px; }
.mini-submenu:hover{
cursor: pointer;
}
.slide-submenu{
background: rgba(0, 0, 0, 0.45);
display: inline-block;
padding: 0 8px;
border-radius: 4px;
cursor: pointer;
}
HTML
<body>
<div class="container">
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Map Viewer (2-column layout)</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</nav>
<div class="navbar-offset"></div>
<div id="map">
</div>
<div class="row main-row">
<div class="col-sm-4 col-md-3 sidebar sidebar-left pull-left">
<div class="panel-group sidebar-body" id="accordion-left">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#layers">
<i class="fa fa-list-alt"></i>
Layers
</a>
<span class="pull-right slide-submenu">
<i class="fa fa-chevron-left"></i>
</span>
</h4>
</div>
<div id="layers" class="panel-collapse collapse in">
<div class="panel-body list-group">
<a href="#" class="list-group-item">
<i class="fa fa-globe"></i> Open Street Map
</a>
<a href="#" class="list-group-item">
<i class="fa fa-globe"></i> Bing
</a>
<a href="#" class="list-group-item">
<i class="fa fa-globe"></i> WMS
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#properties">
<i class="fa fa-list-alt"></i>
Properties
</a>
</h4>
</div>
<div id="properties" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Yada Yad Yad
</p>
<p>
Yada Yad Yad
</p>
<p>
Yada Yad Yad
</p>
<p>
Yada Yad Yad
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mini-submenu mini-submenu-left pull-left">
<i class="fa fa-list-alt"></i>
</div>
</div>
</body>
Best Answer
Try something like this
Sry, for the lack of explanation I ll try to be more comprehensive next time. So, if I understood the question correctly, problem lies in position of zoom in & out control.
On Leaflet doc I've found this [http://leafletjs.com/reference.html#control-options][1]
First, I disabled zoom control when rendering a map (which is topleft by default) Like this:
And then I added this block of code
Here is full block of code that I copied from site above
I just copied script tag