AnsweredAssumed Answered

One Checkbox on at a time

Question asked by Linn_GIS on Sep 24, 2014
Latest reply on Sep 24, 2014 by riyasdeen_b

I need assistance in working with my code so that only ONE check-box can be turned on at a time while the other will turn off if already active.  Thanks,

 

-------------------------------------------------------------------------------------------------------------------------

 

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title></title>

 

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">

 

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

    <style>

        html, body {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

 

        }

 

 

        #map {

            height: 100%;

  width:100%;

            margin: 0;

            padding: 0;

  overflow: none;

  background-color: #000000;

        }

 

 

 

 

        #metac {

            position: absolute;

            left: 20px;

            bottom: 20px;

            width:13em;

            height: 9em;

            z-index: 40;

            background: #fff;

            color: #777;

            padding: 5px;

            border: 2px solid #666;

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

            font-family: arial;

            font-size: 0.9em;

        }

 

 

            #metac h3 {

                color: #666;

                font-size: 1.1em;

                padding: 0px;

                margin: 0px;

                display: inline-block;

            }

 

 

    

        #header {

     margin:0px;

     padding: 0px;

text-align:right;

 

   

   

     height: 16px;

   }

   #title {

     font-size:150%;

     color: #ffffff;

     text-align:center;

margin: 2px;

   }

   #subfooter {

     font-size:small;

     color: #ffffff;

font-size:13px;

     text-align:center;

margin: 2px;

   }

   #LayerDrop {

     position: absolute;

      top: 20px;

      right: 20px;

      z-index: 50;

   }

   #appToolbarButtons{

  float: right;

  vertical-align: middle;

  }

  #layerBTN {

 

  vertical-align: right;

  bottom: 15px;

    cursor: pointer ;

  margin-right: 5px;

    z-index: 50;

  

    cursor: pointer;

    right: 10px;

  width: 65px!important;

    padding: 5px;

    position: absolute;

  -moz-box-shadow:inset 0px 0px 35px 0px #ccd8e0;

  -webkit-box-shadow:inset 0px 0px 35px 0px #ccd8e0;

  box-shadow: 1px 6px 12px #0093CA inset, -1px -10px 5px #00ACEC inset, 1px 2px 1px rgba(0, 0, 0, 0);

  background-color: #00ACEC;

  background:-moz-linear-gradient( center top, #145bb3 5%, #468ccf 100% );

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#145bb3', endColorstr='#468ccf');

  -webkit-border-top-left-radius:37px;

  -moz-border-radius-topleft:37px;

  border-top-left-radius:37px;

  -webkit-border-top-right-radius:37px;

  -moz-border-radius-topright:37px;

  border-top-right-radius:37px;

  -webkit-border-bottom-right-radius:37px;

  -moz-border-radius-bottomright:37px;

  border-bottom-right-radius:37px;

  -webkit-border-bottom-left-radius:37px;

  -moz-border-radius-bottomleft:37px;

  border-bottom-left-radius:37px;

  text-indent:0;

  display:inline-block;

  color:#FFFFFF;

  font-family:Arial;

  font-weight:bold;

  font-style:normal;

  text-decoration:none;

  text-align:center;

  text-shadow:0px 0px 0px #072038;

    }

 

    </style>

 

 

    <script src="http://js.arcgis.com/3.8/"></script>

    <script>

        var map;

          var legendLayers = [];    

        require([

          "dojo/parser",

          "esri/map",

        "esri/layers/FeatureLayer",

       "esri/layers/ArcGISDynamicMapServiceLayer",

          "dojo/_base/array",

          "esri/renderers/SimpleRenderer",

           "dijit/form/CheckBox",

           "dojo/dom",

           "dojo/dom-construct",

          "dijit/layout/BorderContainer",

          "dijit/layout/ContentPane",

        "dijit/Dialog",

          "dojo/domReady!"

        ], function (

          parser,

          Map,

           FeatureLayer,

           ArcGISDynamicMapServiceLayer,

           array,

           SimpleRenderer,

           CheckBox,

           dom,

           domConstruct

        ) {

         

          map = new Map("map", {

          basemap: "national-geographic",

       fadeOnZoom: true,

          center: [-81.013, 33.622005],

          zoom: 6

       

        });

 

 

            // create layout dijits

            parser.parse();

 

       var cities = new FeatureLayer(

                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {

                     mode: FeatureLayer.MODE_ONDEMAND,

            id: "City",

                     outFields: ["*"]

                 });

cities.setVisibility(false);

 

 

 

       var radarRest = new ArcGISDynamicMapServiceLayer(

                 "http://gis.srh.noaa.gov/arcgis/rest/services/wxmap/MapServer", {

             

                 });

radarRest.setVisibility(true);

 

   map.addLayers([cities, radarRest]);

        

////Add layers to Legend ////This Also Sets Order of Layers ////

 

 

      legendLayers.push({ layer: cities, title: 'Cities' });

      legendLayers.push({ layer: radarRest, title: 'Radar Rest' });

  

 

 

 

 

       

            ///////////// Check-Box Created////////////////////////////////////

 

 

        map.on('layers-add-result', function () {

          //add check boxes

          array.forEach(legendLayers, function (layer) {

            var layerName = layer.title;

  

            var checkBox = new CheckBox({

              name: "checkBox" + layer.layer.id,

              value: layer.layer.id,

              checked: layer.layer.visible

            });

            checkBox.on("change", function () {

              var targetLayer = map.getLayer(this.value);

              targetLayer.setVisibility(!targetLayer.visible);

              this.checked = targetLayer.visible;

            });

                    //add the check box and label to the TOC

                    domConstruct.place(checkBox.domNode, "toggle",

                        "after");

                    var checkLabel = domConstruct.create('label', {

                        'for': checkBox.name,

                        innerHTML: layerName

                    }, checkBox.domNode, "after");

                    domConstruct.place("<br /><hr/>", checkLabel,

                        "after");

                });

            });

 

 

 

 

         

        });

    </script>

</head>

 

 

<body class="tundra">

    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">

<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

 

    <div id="title">

     <div id="subfooter">

     </div>

    </div>

 

</div>

 

       <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">

          <div id="appToolbarButtons">

 

  <button id="layerBTN" type="button"  onClick="myLayersDialog.show();"> Layers</button>

 

</div>

     

     </div>

      </div>

    </div>

 

  <!--Start Layers Dialog Btn -->

  <div data-dojo-type="dijit/Dialog" data-dojo-id="myLayersDialog" style="width: 260px; height: 25em; overflow: auto;" title="Layers">

  <div id="toggle" style="padding: 2px 2px;"></div>

 

  <div class="dijitDialogPaneActionBar">

  <button data-dojo-type="dijit/form/Button" type="button" onClick="myLayersDialog.hide()">OK</button>

  </div>

 

  </div>

<!--Start Legend Dialog BTN  -->

 

</body>

</html>

Outcomes