Bootstrap checkboxes buttons to toggle layers not working.

AlexGole — Wed, 08 Oct 2014 22:59:55 GMT

Hi all,

I am trying to get bootstraps checkboxes to work with toggling layers. I am not quite sure why it is not working.

Here is the ESRI template script that I modified:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Explicitly Create Map Service Layer List</title>
<link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">


    <script src="http://js.arcgis.com/3.11/"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    <script>
      var map;


      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
          var layer, visibleLayerIds = [];


          map = new Map("map");


          //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
          var imageParameters = new ImageParameters();
          imageParameters.layerIds = [2];
          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
          //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE


          layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer",
            {"imageParameters": imageParameters});
          map.addLayer(layer);


          on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
          on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);


          function updateLayerVisibility () {
            var inputs = query(".list_item");
            var inputCount = inputs.length;
            //in this application layer 2 is always on.
            visibleLayerIds = [2];


            for (var i = 0; i < inputCount; i++) {
              if (inputs.checked) {
                visibleLayerIds.push(inputs.value);
              }
            }


            if (visibleLayerIds.length === 0) {
              visibleLayerIds.push(-1);
            }


            layer.setVisibleLayers(visibleLayerIds);
          }
        });
    </script>
  </head>


  <body>
  This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.  <br />
    <br />
        Layer List : <span id="layer_list"><div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" class='list_item' id='layer1CheckBox' value=0> cities
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" class='list_item' id='layer0CheckBox' value=1> river
  </label>
</div>
        </span><br />
        <br />
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>


</html>

Any help is welcome,

Thank you,

Alex

Re: Bootstrap checkboxes buttons to toggle layers not working.

RiyasDeen — Thu, 09 Oct 2014 04:53:44 GMT

Hi Alex,

I suspect boot strap is suppressing checkbox change event propagation. I'm no expert in bootstrap below a quick work around, there should be a better way of managing this.

Edit fiddle - JSFiddle

Re: Bootstrap checkboxes buttons to toggle layers not working.

AlexGole — Thu, 09 Oct 2014 16:21:00 GMT

Riyas that works great! Thank you!

topic Re: Bootstrap checkboxes buttons to toggle layers not working. in ArcGIS JavaScript Maps SDK Questions

Bootstrap checkboxes buttons to toggle layers not working.

Re: Bootstrap checkboxes buttons to toggle layers not working.

Re: Bootstrap checkboxes buttons to toggle layers not working.