[GIS] Using Navbar Dropdown Button Checkbox in Mapbox

bootstrap-frameworkmapbox

I am creating a map application in the Bootstrap framework. I have a drop-down with 3 buttons to toggle layers on and off. I am using a glyphicon as the checkbox with text to the side. If you click the checkbox, the layer switches as expected. However, if you click on the text it changes the checkbox, but does not control the layer toggle. I have tried wrapping the label with a span but this did not work.

Any suggestions?

HTML:

<li class="dropdown"
<a class="dropdown-toggle" data-toggle="dropdown" href="#">BASEMAP <span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="btn-group-vertical btn-block" data-toggle="buttons">
<li><label class="btn btn-default btn-sm btn-block">
<input type="checkbox" class="glyphicon glyphicon-unchecked" id="mapLabel" value="satellite">SATELLITE</label></li>
<input type="checkbox" class="glyphicon glyphicon-unchecked" id="mapLabel" value="dark">DARK</label></li>
</div>
</ul>
</li>

JavaScript:

$("#mapLabel").click(function(event) {
console.log("Click");
    layerClicked = window[event.target.value];

        if (map.hasLayer(layerClicked)) {
            map.removeLayer(layerClicked);
        }
        else{
            map.addLayer(layerClicked);
        } ;
});

Best Answer

Try this jquery method: http://api.jquery.com/find/

$(".your-span-class").find("#mapLabel").click(function(event) { ...

I think the issue is your either selecting a parent element or a child element, which will be easier debugging in a web browser inspector. I don't believe Bootstrap is your issue.

On a separate/quasi-related note, I've found that the Semantic-UI Framework documentation a bit more helpful than Bootstraps with implementing such functionality. And, it works with jQuery. I really don't use Bootstrap anymore, and would recommend Semantic-UI as an alternative to anyone.

Related Solutions

[GIS] Bootstrap navbar and leaflet zoom controls

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"
    });
});

[GIS] Bootstrap and Mapbox: Nav Bar layer selection

You only have a class and value defined for the first list item in the drop-down:

Change:

<ul class="dropdown-menu">
    <li><a class="mapLabel" value="roadmap" checked=true>Streets</a></li>
    <li><a href="#">Satellite</a></li>
    <li><a href="#">Dark</a></li>
</ul>

To:

<ul class="dropdown-menu">
    <li><a class="mapLabel" value="roadmap" checked=true>Streets</a></li>
    <li><a class="mapLabel" value="satellite">Satellite</a></li>
    <li><a class="mapLabel" value="dark">Dark</a></li>
</ul>

I'm only guessing what the actual values (layer names) of the second and third layers are; change as needed.

Best Answer

Related Solutions

[GIS] Bootstrap navbar and leaflet zoom controls

[GIS] Bootstrap and Mapbox: Nav Bar layer selection

Related Question