Bootstrap checkboxes buttons to toggle layers not working.

3960
2
Jump to solution
10-08-2014 03:59 PM
AlexGole
Occasional Contributor II

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/Map...",

            {"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

0 Kudos
1 Solution

Accepted Solutions
RiyasDeen
Regular Contributor

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

View solution in original post

2 Replies
RiyasDeen
Regular Contributor

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

AlexGole
Occasional Contributor II

Riyas that works great! Thank you!

0 Kudos