topic Re: Legend customizatin in ArcGIS JavaScript Maps SDK Questions

Legend customizatin

DennisGomez — Fri, 21 Dec 2012 17:35:37 GMT

Hi All - I am new to the community and learning the stuff's . I am tring to render a check box on a layer which I rendered on the web maps using a csv file. I tried adding the html controls to the configure popup option from arcgis viewer, but never it gets rendered as user clickable field.
Is there any sample code or site where i can view this in javascript.
Please let me know, Thanks in advance.

Re: Legend customizatin

JakeSkinner — Sat, 11 Dec 2021 16:05:55 GMT

Are you trying to add a checkbox to the legend to toggle a layer on/off? Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    <style type="text/css" media="screen">
        html, body { 
        height: 100%; width: 100%; margin: 0; 
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Trebuchet MS"; 
      }
      #header {
        background-image: url(../images/banner.jpg); background-repeat: repeat-x;
        margin: 2px;
        border: solid 4px #224a54;
        color:white; font-size:18pt; 
        text-align:left; font-weight:bold; height:70px;
      }
      #subheader {
        font-size:small;
        color:white;
        padding-left:20px;
      }
      #rightPane{
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
      }
      #leftPane{
        margin: 5px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 4px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:40px;
      }
      .dijitTabInnerDiv{
        background-color:#ecefe4;
      }
      #tabs{
        padding:5px;
      }
    </style>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.CheckBox")
      
      var map;
      
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          extent: initialExtent
        });
             
        dojo.connect(map, 'onLoad', function (map) {
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
            
        var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
        var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";    
        var dynamicUrl = "http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Service_Requests/FeatureServer/0";

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl);
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);
        
        var legendLayers = [];
        legendLayers.push({ layer: dynamicLayer, title: "Service Requests" });

        dojo.connect(map, 'onLayersAddResult', function (results) {
            //add the legend 
            var legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers,
                arrangement: esri.dijit.Legend.ALIGN_RIGHT
            }, "legendDiv");
            legend.startup();
        });

        map.addLayer(basemap);
        map.addLayers([dynamicLayer, referenceLayer]);


        dojo.connect(map, 'onLayersAddResult', function (results) {
            //add check boxes 
            dojo.forEach(legendLayers, function (layer) {
                var layerName = layer.title;
                var checkBox = new dijit.form.CheckBox({
                    name: "checkBox" + layer.layer.id,
                    value: layer.layer.id,
                    checked: layer.layer.visible,
                    onChange: function (evt) {
                        var clayer = map.getLayer(this.value);
                        clayer.setVisibility(!clayer.visible);
                        this.checked = clayer.visible;
                    }
                });

                //add the check box and label to the toc
                dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
                var checkLabel = dojo.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
                dojo.place("<br />", checkLabel, "after");
            });

        });
    }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
       <div id="subheader"></div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
            <div id="toggle"></div>
            <div id="legendDiv"></div>
          </div>
          <div dojotype="dijit.layout.ContentPane"  title="Tab 2" >
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
      </div>
    </div>
  </body>

</html>

Re: Legend customizatin

DennisGomez — Sat, 11 Dec 2021 16:05:58 GMT

Thanks for replying to my post, actually I am looking for a checkbox to appear in the pop up info window when user select a building in map, and retrieves the selected building name in the main page. The building info is now fed to the map by a CSV file from the arcgis viewer creation time itself, but i was not able to show a check box to the building info pop up in the map so far..
Please let me know if you have faced something similar...

Are you trying to add a checkbox to the legend to toggle a layer on/off? Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    <style type="text/css" media="screen">
        html, body { 
        height: 100%; width: 100%; margin: 0; 
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Trebuchet MS"; 
      }
      #header {
        background-image: url(../images/banner.jpg); background-repeat: repeat-x;
        margin: 2px;
        border: solid 4px #224a54;
        color:white; font-size:18pt; 
        text-align:left; font-weight:bold; height:70px;
      }
      #subheader {
        font-size:small;
        color:white;
        padding-left:20px;
      }
      #rightPane{
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
      }
      #leftPane{
        margin: 5px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 4px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:40px;
      }
      .dijitTabInnerDiv{
        background-color:#ecefe4;
      }
      #tabs{
        padding:5px;
      }
    </style>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.form.CheckBox")
      
      var map;
      
      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          extent: initialExtent
        });
             
        dojo.connect(map, 'onLoad', function (map) {
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
            
        var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
        var referenceUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";    
        var dynamicUrl = "http://services.arcgis.com/Fz6BBJUji5ArUSDM/arcgis/rest/services/Service_Requests/FeatureServer/0";

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl);
        var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(referenceUrl);
        
        var legendLayers = [];
        legendLayers.push({ layer: dynamicLayer, title: "Service Requests" });

        dojo.connect(map, 'onLayersAddResult', function (results) {
            //add the legend 
            var legend = new esri.dijit.Legend({
                map: map,
                layerInfos: legendLayers,
                arrangement: esri.dijit.Legend.ALIGN_RIGHT
            }, "legendDiv");
            legend.startup();
        });

        map.addLayer(basemap);
        map.addLayers([dynamicLayer, referenceLayer]);


        dojo.connect(map, 'onLayersAddResult', function (results) {
            //add check boxes 
            dojo.forEach(legendLayers, function (layer) {
                var layerName = layer.title;
                var checkBox = new dijit.form.CheckBox({
                    name: "checkBox" + layer.layer.id,
                    value: layer.layer.id,
                    checked: layer.layer.visible,
                    onChange: function (evt) {
                        var clayer = map.getLayer(this.value);
                        clayer.setVisibility(!clayer.visible);
                        this.checked = clayer.visible;
                    }
                });

                //add the check box and label to the toc
                dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
                var checkLabel = dojo.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
                dojo.place("<br />", checkLabel, "after");
            });

        });
    }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
       <div id="subheader"></div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
            <div id="toggle"></div>
            <div id="legendDiv"></div>
          </div>
          <div dojotype="dijit.layout.ContentPane"  title="Tab 2" >
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
      </div>
    </div>
  </body>

</html>

Re: Legend customizatin

JakeSkinner — Sat, 11 Dec 2021 16:06:01 GMT

Here's an example on how to create a checkbox within the InfoWindow:

infoTemplate = new esri.InfoTemplate("Building ID: ${BuidlingID}", 
                            "<tr><b>Address:</b> <td>${Address}\
                            <br><br><input type='checkbox' id='check1' onchange='moreInfo()'>More info");
    
var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl, {
                            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                            infoTemplate: infoTemplate,
                            outFields: ["*"]

function moreInfo(){
    if(document.getElementById("check1").checked==true){
        .........additional code.........
    }

I'm not sure if this is exactly what you are looking, but let me know if it's not.

Re: Legend customizatin

DennisGomez — Thu, 27 Dec 2012 17:55:12 GMT

Thanks for the reply, actually I am going in a different direction by creating the operational layers from web maps (arcgis viewer) and did the whole design of layers from existing layers. The issue is in the csv file, I applied to this map now displays the bubbles in the map correctly but when the popup window opens I am not getting a handler to display a check box.

CSV has the following fields ISD Name/Address/City/State & ZIP I need a checkbox on this pop up window now, is this possible to add in csv itself while desiging through webmaps in arcgisviewer ?

Re: Legend customizatin

DennisGomez — Thu, 27 Dec 2012 18:22:38 GMT

Please take a look on this sample
http://txtest.maps.arcgis.com/home/webmap/viewer.html?webmap=e518e68c16d14606bebed9121d5d3d6e
I have a region level pop up window and a ISD level pop window(CSV loaded) , in both I need a check box to appear so that I can capture the user selection from the pop up window.
Does the custom attributes from arcgis viewer can set this in the map ?

Re: Legend customizatin

JakeSkinner — Fri, 28 Dec 2012 19:38:52 GMT

Hi Dennis,

I couldn't view the map. It would need to be shared with 'Everyone' in order for me to view it, but you will not be able to add a checkbox to a ArcGIS.com Viewer map's pop-up through ArcGIS.com. You would need to download an ArcGIS.com application and customize the pop-up, then host the application on your web server. This may not be an option if you do not have a public facing web server, and this web map needs to be accessed outside of your organization.