0

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: '&copy; <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>
  • I'm looking for an answer to this as well? Did you ever solve the issue? – user55056 Jul 10 '15 at 19:50
  • No... Sorry, not yet. – Dean Jul 11 '15 at 10:18
  • 1
    I am not sure I understand. when I click on the link you gave, the zoom-control appears right away on page load ( without the collapse-expand trick). Have you solved the issue? – Djana Jul 14 '15 at 9:30
1

Try something like this

 L.control.zoom({
      position:'topright'
     }).addTo(map);

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:

//disable zoomControl
var map = L.map('map',{zoomControl: false}).setView([40.91, -96.63], 4);

And then I added this block of code

L.control.zoom({
          position:'topright'// default is topleft
         }).addTo(map);

Here is full block of code that I copied from site above

I just copied script tag

     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();
    });
    ////////////////////////////////////////////////
    //DISABLING ZOOM CONTROL WHEN LOADING A MAP/////
    var map = L.map('map',{zoomControl: false}).setView([40.91, -96.63], 4);

    ///ZOOM CONTROL POSITION///
    /////////////////////////////
      L.control.zoom({
      position:'bottomright'
     }).addTo(map);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);




    L.control.scale({}).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"
    });
});
  • 2
    Please edit for clarity and provide context on why this may work/where in the code to insert this. Please see the community help page to see what makes a good answer: gis.stackexchange.com/help/how-to-answer – MaryBeth Jan 25 '16 at 20:04
0

I had the same issue with a fixed Bootstrap navbar, for me this line solved everything:

#map { top: 50px; }

See all CSS of my map:

#map {
    top: 50px;
    height: 100%;
    width: 100%;
    z-index: 1;
    position:relative;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.