Bootstrap navbar and leaflet zoom controls

[المشرف العام]

I'm using the THE MAP GUY(DE) Bootstrap temple 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.

JS

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: '© OpenStreetMap 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

Toggle navigation Map Viewer (2-column layout)

• Link
• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
  • One more separated link

Submit

• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Layers


Open Street Map Bing WMS


Properties


Yada Yad Yad

Yada Yad Yad

Yada Yad Yad

Yada Yad Yad








</div>

أكثر...