topic Re: One Checkbox on at a time in ArcGIS JavaScript Maps SDK Questions

One Checkbox on at a time

CraigLinn — Wed, 24 Sep 2014 15:23:30 GMT

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>

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

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

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>

</div>

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

</div>

</div>

</body>

</html>

Re: One Checkbox on at a time

KenBuja — Wed, 24 Sep 2014 16:04:04 GMT

Use a RadioButton instead of a CheckBox

<!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/RadioButton",
          "dojo/dom",
          "dojo/dom-construct",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dijit/Dialog",

          "dojo/domReady!"
        ], function (
             parser,
             Map,
             FeatureLayer,
             ArcGISDynamicMapServiceLayer,
             array,
             SimpleRenderer,
             RadioButton,
             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", {
                id: "Radar"
            });

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

            ///////////// Radio buttons Created////////////////////////////////////
            map.on('layers-add-result', function () {

                //add radio buttons
                array.forEach(legendLayers, function (layer) {
                    var layerName = layer.title;
                    var checkBox = new RadioButton({
                        name: "radio" + layer.layer.id,
                        value: layer.layer.id,
                        checked: layer.layer.visible,
                        name: "layers"
                    });

                    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>

Re: One Checkbox on at a time

CraigLinn — Wed, 24 Sep 2014 16:16:54 GMT

Thanks, I also found you need to remove the " + layer.layer.id" from " name: "radio" + layer.layer.id, "

The buttons work in the above case given both service layer id are 0.

//add radio buttons

array.forEach(legendLayers, function (layer) {

var layerName = layer.title;

var checkBox = new RadioButton({

value: layer.layer.id,

checked: layer.layer.visible,

});

Re: One Checkbox on at a time

RiyasDeen — Wed, 24 Sep 2014 16:26:54 GMT

Hi Craig,

Try this fiddle. Edit fiddle - JSFiddle