FeatureLayer & MapImageLayer - Bootstrap checkboxes buttons to toggle layers

MateuszCzechowicz · ‎02-13-2016

Hello everyone!

I'm a total beginner in web maps and I don't know how to create bootstrap checkboxes buttons to toggle my FeatureLayer and MapImageLayer

I found an example: Edit fiddle - JSFiddle . This works, but with ArcGISDynamicMapServiceLayer.

Could anyone help me?

My layers:

            map.on("load", function() {
            var mil = new esri.layers.MapImageLayer(
              {
                'opacity': 0.3
              });
            map.addLayer(mil);


            var mi = new esri.layers.MapImage({
              'extent': { 'xmin': 24.8312980522177, 'ymin': 60.1396272514532, 'xmax': 25.2344061856669, 'ymax': 60.2895551888062},
              'href': 'https://aalto.maps.arcgis.com/sharing/rest/content/items/28b2611073c4482aabf85fec5c75454f/data'
            });
            mil.addImage(mi);
            });


            var viewpoints = new FeatureLayer("https://services3.arcgis.com/DrStYMBZkn3kRBe9/arcgis/rest/services/view_points/FeatureServer/0", {outFields: ["*"]});
            map.addLayer(viewpoints);

RobertScheitlin__GISP · ‎02-13-2016

Mateusz,

Here is that code modified to use a FeatureLayer and a MapImageLayer:

<!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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

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

  <script>
    var map;


    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "esri/layers/MapImage",
        "esri/layers/MapImageLayer",
        "dojo/domReady!"
      ],
      function (Map, FeatureLayer, dom, on, query, MapImage, MapImageLayer) {
        var featureLayer;

        map = new Map("map",{
          basemap: "streets",
          center: [-122.53569449217555, 47.8017140515922],
          zoom: 7
        });

        var radarMi = new MapImage({
          'extent': { 'xmin': -125.725156, 'ymin': 45.222770, 'xmax': -119.252062, 'ymax': 51.156440, 'spatialReference': { 'wkid': 4326 }},
          'href': "http://radar.weather.gov/ridge/RadarImg/N0R/ATX_N0R_0.gif"
        });
        radarMi.height = 550;
        radarMi.width = 600;
        radarMi.scale = 1;

        var nwsRadarLayer = new MapImageLayer();
        nwsRadarLayer.addImage(radarMi);

        map.addLayer(nwsRadarLayer);

        featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
        map.addLayer(featureLayer);
        $('.btn-primary input[type="checkbox"]').prop('checked', true);

        var checkBoxes = query(".btn-primary");

        for (var j = 0; j < checkBoxes.length; j++) {
          on(checkBoxes, "click", updateLayerVisibility);
        }

        function updateLayerVisibility() {
          setTimeout(function () {
            var inputs = query(".list_item");
            var inputCount = inputs.length;
            for (var i = 0; i < inputCount; i++) {
              if(i === 0) nwsRadarLayer.setVisibility(inputs.checked);
              if(i === 1) featureLayer.setVisibility(inputs.checked);
            }
          }, 10);
        }
      });
  </script>
</head>


<body>
  <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="layer0CheckBox"> Radar
      </label>
      <label class="btn btn-primary active">
        <input type="checkbox" class="list_item" id="layer1CheckBox"> Counties
      </label>
    </div>
  </span>
  <br />
  <br />
  <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎02-13-2016

Mateusz,

Here is that code modified to use a FeatureLayer and a MapImageLayer:

<!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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

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

  <script>
    var map;


    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "esri/layers/MapImage",
        "esri/layers/MapImageLayer",
        "dojo/domReady!"
      ],
      function (Map, FeatureLayer, dom, on, query, MapImage, MapImageLayer) {
        var featureLayer;

        map = new Map("map",{
          basemap: "streets",
          center: [-122.53569449217555, 47.8017140515922],
          zoom: 7
        });

        var radarMi = new MapImage({
          'extent': { 'xmin': -125.725156, 'ymin': 45.222770, 'xmax': -119.252062, 'ymax': 51.156440, 'spatialReference': { 'wkid': 4326 }},
          'href': "http://radar.weather.gov/ridge/RadarImg/N0R/ATX_N0R_0.gif"
        });
        radarMi.height = 550;
        radarMi.width = 600;
        radarMi.scale = 1;

        var nwsRadarLayer = new MapImageLayer();
        nwsRadarLayer.addImage(radarMi);

        map.addLayer(nwsRadarLayer);

        featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
        map.addLayer(featureLayer);
        $('.btn-primary input[type="checkbox"]').prop('checked', true);

        var checkBoxes = query(".btn-primary");

        for (var j = 0; j < checkBoxes.length; j++) {
          on(checkBoxes, "click", updateLayerVisibility);
        }

        function updateLayerVisibility() {
          setTimeout(function () {
            var inputs = query(".list_item");
            var inputCount = inputs.length;
            for (var i = 0; i < inputCount; i++) {
              if(i === 0) nwsRadarLayer.setVisibility(inputs.checked);
              if(i === 1) featureLayer.setVisibility(inputs.checked);
            }
          }, 10);
        }
      });
  </script>
</head>


<body>
  <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="layer0CheckBox"> Radar
      </label>
      <label class="btn btn-primary active">
        <input type="checkbox" class="list_item" id="layer1CheckBox"> Counties
      </label>
    </div>
  </span>
  <br />
  <br />
  <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</html>

MateuszCzechowicz · ‎02-14-2016

Thank you very much Robert. That works!