Re: Simple Radio buttons to toggle between layers

3517
3
10-07-2013 07:20 PM
EdwardGriffin
New Contributor II
Hi All

Is there any way of modifying the code below to create radio buttons, rather than check boxes or does anyone know a simple way of creating radio buttons for layers. I am fairly new to html/javascript.

I need them as I am trying to create a web mapping application that has a set of radio buttons at the side to toggle between layers. It is important that the user can only select one layer at a time.

At the moment I can only manage to create check boxes - so the user can select any number of layers.

Here's the code i'm using now.

//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");
        });
      });
0 Kudos
3 Replies
ManishkumarPatel
Occasional Contributor II
Hi All

Is there any way of modifying the code below to create radio buttons, rather than check boxes or does anyone know a simple way of creating radio buttons for layers. I am fairly new to html/javascript.

I need them as I am trying to create a web mapping application that has a set of radio buttons at the side to toggle between layers. It is important that the user can only select one layer at a time.

At the moment I can only manage to create check boxes - so the user can select any number of layers.

Here's the code i'm using now.

//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");
        });
      });



Hi Edward,

Please check : http://jsfiddle.net/patelmanya/9qhwB/1/

Is this what you looking for using radio button option instead of check box to turn visibility of one layer at a time.

Hope this helps.

Regards,
Manish
0 Kudos
EdwardGriffin
New Contributor II
Hi Manish

Thanks so much for the reply. That is exactly what I need - however I need to try and make it work using feature layers rather than dynamic layers. Mainly because I want to include a legend and popups (popups seem to be infinitely easier using feature layers rather than dynamic layers)

It looks probable that your code could be adapted though - what do you reckon?

thanks again

Ed
0 Kudos
ManishkumarPatel
Occasional Contributor II
Hi Manish

Thanks so much for the reply. That is exactly what I need - however I need to try and make it work using feature layers rather than dynamic layers. Mainly because I want to include a legend and popups (popups seem to be infinitely easier using feature layers rather than dynamic layers)

It looks probable that your code could be adapted though - what do you reckon?

thanks again

Ed


Hi Ed,

Glad to help. Please make sure you mark the thread as answered.

Also regarding the legend and pop ups you can definitely use the Feature layer.

For your information, if you just want to display the legend for a particular map service you can try the below URL:

http://<arcgis servername: Port>/arcgis/rest/services/<mapservicename>/legend

JSON output:
http://<arcgis servername: Port>/arcgis/rest/services/<mapservicename>/MapServer/legend?f=pjson

Hope this helps.

Let me know if you got any further queries.

Have a nice day ahead!!!!

Regards,
Manish
0 Kudos