How to make one layer visible at a time on radiobutton click

tanyabisen · ‎12-07-2011

Hello All,

I am new to this javascript API. I have a dynamic map service with 2 layers. I want to make visible one layer at a time on click of corresponding radio button.If one layer is visible the other should automatically be turned off and vice versa.

How do i do this.. Please share with me some sample so that I can proceed ahead with some logic.

Thanks,
Tanya

HaroldBostic · ‎12-07-2011

Hello, this sample should get you started, it should be simple to replace the checkboxs with radiobuttons

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_explicitlayerlist.html

tanyabisen · ‎12-07-2011

pankajpedram1 · ‎12-07-2011

function showAdmin(layer){
      debugger
       var arr = [];

       if(document.getElementById('Ward').checked==true){
        arr.push(0);
dynamicMap.setVisibleLayers(arr);
       dynamicMap.refresh();
      }
      if(document.getElementById('Assembly').checked==true){
arr.push(1);
dynamicMap.setVisibleLayers(arr);

       dynamicMap.refresh();
      }
      identifyTask = new esri.arcgis.gmaps.IdentifyTask("http://map2.janaagraha.org/arcgis/rest/services/IJ_Google/MapServer");
      GEvent.addListener(gmap, "click", identify);
      }

tanyabisen · ‎12-07-2011

Its working...Thanks...

tanyabisen · ‎12-09-2011

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title></title>
     <script type="text/javascript" src="script.js"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAN-Td40dwxFW7Kl1Q6ose-RSfCPemwdJVBhVchwJQMM9mgW5..." type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript"></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>

    <script type="text/javascript">
    var gmap = null;
    var geocoder = null;
    var dynMapOv = null;
    var marker,mapExtension,overlays,layers,identifyTask,layerId,dynamicMap,Repmap;
      function initialize() {
        if (GBrowserIsCompatible()) {
        gmap = new GMap2(document.getElementById("gmap"));
        gmap.setCenter(new GLatLng(12.978004, 77.606081), 12);
        gmap.enableScrollWheelZoom();
        gmap.addControl(new GSmallMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.removeMapType(G_HYBRID_MAP);
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);
        dynamicMap = new esri.arcgis.gmaps.DynamicMapServiceLayer("http://map2.janaagraha.org/arcgis/rest/services/IJ_Google/MapServer",null, 0.5, dynmapcallback);
        Repmap = new esri.arcgis.gmaps.DynamicMapServiceLayer("http://map2.janaagraha.org/arcgis/rest/services/IJ_ElecRep/MapServer",null, 0.5, dynmapcallbackRep);
        geocoder = new GClientGeocoder();
        }
        }

      function dynmapcallback(mapservicelayer) {
       gmap.addOverlay(mapservicelayer);
    }

    function dynmapcallbackRep(Replayer) {
       gmap.addOverlay(Replayer);
    }
      function showAddress(address) {
      if(marker){
        gmap.removeOverlay(marker);
        }
        if(address.indexOf(",Bangalore"))
     {
     address;
     }
     if(address.indexOf() == address.indexOf(",Bangalore"))
     {
         address+= ",Bangalore";
     }
        if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              gmap.setCenter(point, 15);
              marker = new GMarker(point);
              gmap.addOverlay(marker);
              marker.openInfoWindow(document.createTextNode(address));
            }
          }
        );
      }
    }

    function identify(overlay, latLng) {
        if (overlay) return;
        clearResults();

        // set the identify parameters
        var identifyParameters = new esri.arcgis.gmaps.IdentifyParameters();
        identifyParameters.geometry = latLng; // location where the user clicked on the map
        identifyParameters.tolerance = 3;
        identifyParameters.layerIds = [0,1];
        identifyParameters.layerOption = "all";
        identifyParameters.bounds = gmap.getBounds();
        var mapSize = gmap.getSize();
        identifyParameters.width = mapSize.width;
        identifyParameters.height = mapSize.height;

        // execute the identify operation
        identifyTask.execute(identifyParameters, function(response, error) { // function to be called when the result is available
          // display error message (if any) and return
          if (hasErrorOccurred(error)) return;

          // note that the location where the user clicked on the map (latLng) is visible in this function through closure
          addResultToMap(response, latLng);
        });
      }

     function addResultToMap(response, point) {
       debugger;
          // aggregate the result per map service layer
          var idResults = response.identifyResults;
          layers = {"0": [],"1": []};
          for (var i = 0; i < idResults.length; i++) {
            var result = idResults;
            layers[result.layerId].push(result);
          }

          // create and show the info-window with tabs, one for each map service layer
          var tabs = [];
          for (layerId in layers) {
            var results = layers[layerId];
            var count = results.length;
            var label = "", content = "";
             switch(layerId) {
              case "0":
                if (count == 0) break;
                for (var j = 0; j < count; j++) {
                  var attributes = results.feature.attributes;
                  content = "<a href='#' onclick='showFeature(" + layerId + "," + j + ")'>" + attributes["Ward_Name"] + "</a><br>";
                  content += "<br>This is ward number: <b>" + attributes["Ward_No"] + "</b>" + "<br>" + " <b>Ward Population: </b>" + attributes["Ward_Popul"] + "<br>" + " <b>Ward Area: </b>" + attributes["Area"]+ " sqkm";
                }
                break;
                 case "1":
                if (count == 0) break;
                for (var k = 0; k < count; k++) {
                  var attributes1 = results.feature.attributes;
                  content = "<a href='#' onclick='showFeature(" + layerId + "," + k + ")'>" + attributes["AC_Name"] + "</a><br>";
                  content += " <b><font color='#0000FF'>" + attributes["AC_Name"] + " : "+ attributes["AC_No"] + "</font></b>" + "<br>" + " <b>No.of Wards: </b>" + attributes["No_of_Ward"] + "<br>" + " <b>Ward Names: </b>" + attributes["Ward_No__"];
                }
                break;
                }
                tabs.push(new GInfoWindowTab(label, content));
          }
          gmap.openInfoWindowTabsHtml(point, tabs);
      }
       function showFeature(layerId, index) {
        mapExtension.removeFromMap(overlays);
        var idResult = layers[layerId][index];
        overlays = mapExtension.addToMap(idResult, {polygonOptions: { clickable: false}});
      }
      function clearResults() {
        mapExtension.removeFromMap(overlays);
        gmap.closeInfoWindow();
      }

      function hasErrorOccurred(error) {
        if (error) {
          alert("Error " + error.code + ": " + (error.message || (error.details && error.details.join(" ")) || "Unknown error" ));
          return true;
        }
        return false;
      }

      function showAdmin(){
      debugger
       var arr = [];
       gmap.removeOverlay(Repmap);
       Repmap.refresh();
       document.getElementById('2').checked=false;
       document.getElementById('3').checked=false;
       document.getElementById('4').checked=false;

       if(document.getElementById('0').checked==true){
       arr.push(0);
       dynamicMap.setVisibleLayers(arr);
       dynamicMap.refresh();
      }
      if(document.getElementById('1').checked==true){
       arr.push(1);
       dynamicMap.setVisibleLayers(arr);
       dynamicMap.refresh();
      }
      identifyTask = new esri.arcgis.gmaps.IdentifyTask("http://map2.janaagraha.org/arcgis/rest/services/IJ_Google/MapServer");
      GEvent.addListener(gmap, "click", identify);
      }

      function showRep(){
      debugger
       var arr = [];
       gmap.removeOverlay(dynamicMap);
       dynamicMap.refresh();
       document.getElementById('0').checked=false;
       document.getElementById('1').checked=false;

       if(document.getElementById('2').checked==true){
       arr.push(0);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      if(document.getElementById('3').checked==true){
       arr.push(1);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      if(document.getElementById('4').checked==true){
       arr.push(2);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      }
    </script>

</head>
<body onload="initialize();" onunload="GUnload();">
    <div id="mainWindow" style="width: 100%; height: 100%;">
        <form action="#" onsubmit="showAddress(this.address.value); return false">
        <div id="header">
            <span>Bangalore /</span><span id="subheader"> Select your location to get more information</span>
            <input type="text" size="60" name="address" value="Walton road" style="width: 146px;
                height: 24px;"/>
            <input type="submit" value="Search!" />
        </div>
        </form>
        <div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>Find Complaints</dt>
<dd>
   <span>This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any w</span>
</dd>
<dt>Find Elected Representatives</dt>
<dd>
   <input id="2" type="radio" name="group2" value="Corporator" onclick="showRep();"/>Corporator<br/>
            <input id="3" type="radio" name="group2" value="MLA" onclick="showRep();"/>MLA<br/>
            <input id="4" type="radio" name="group2" value="MP" onclick="showRep();"/>MP
</dd>
<dt>Administrative Divisions</dt>
<dd>
            <input id="0" type="radio" name="group1" value="Wards" onclick="showAdmin();"/>Wards<br/>
            <input id="1" type="radio" name="group1" value="AC" onclick="showAdmin();"/>Assembly Constituency
</dd>
</dl>
</div>
        <div id="gmap" class="shadow" style="width: 1260px; height: 790px">
    </div>
    </div>

<script type="text/javascript">
    var slider2=new accordion.slider("slider2");
    slider2.init("slider2",0,"open");

</script>
</body>
</html>

tanyabisen · ‎12-11-2011

pankajpedram1 · ‎12-12-2011

function dynmapcallbackRep(Replayer) {
       gmap.addOverlay(Replayer);
       dynMapOv1 = Replayer;
    }



      function showAdmin(){
      debugger
       var arr = [];
       dynamicMap = new esri.arcgis.gmaps.DynamicMapServiceLayer("http://map2.janaagraha.org/arcgis/rest/services/IJ_Google/MapServer",null, 0.5, dynmapcallback);
       if(Repmap){
        dynMapOv1._visible=false;
       }
       document.getElementById('Corp_0').checked=false;
       document.getElementById('MLA_1').checked=false;
       document.getElementById('MP_2').checked=false;

       if(document.getElementById('0').checked==true){
       arr.push(0);
       dynamicMap.setVisibleLayers(arr);
       dynamicMap.refresh();
      }
      if(document.getElementById('1').checked==true){
       arr.push(1);
       dynamicMap.setVisibleLayers(arr);
       dynamicMap.refresh();
      }
      identifyTask = new esri.arcgis.gmaps.IdentifyTask("http://map2.janaagraha.org/arcgis/rest/services/IJ_Google/MapServer");
      GEvent.addListener(gmap, "click", identify);
      }

      function showRep(){
      debugger
       var arr = [];
if(dynamicMap){
       gmap.removeOverlay(dynMapOv);
       }
       Repmap = new esri.arcgis.gmaps.DynamicMapServiceLayer("http://map2.janaagraha.org/arcgis/rest/services/IJ_ElecRep/MapServer",null, 0.5, dynmapcallbackRep);
       document.getElementById('0').checked=false;
       document.getElementById('1').checked=false;

       if(document.getElementById('Corp_0').checked==true){
       var corp= document.getElementById('Corp_0').id.split('_')[1];
       arr.push(0);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      if(document.getElementById('MLA_1').checked==true){
       var mla= document.getElementById('MLA_1').id.split('_')[1];
       arr.push(1);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      if(document.getElementById('MP_2').checked==true){
        var mp= document.getElementById('MP_2').id.split('_')[1];
       arr.push(2);
       Repmap.setVisibleLayers(arr);
       Repmap.refresh();
      }
      }
    </script>

</head>
<body onload="initialize();" onunload="GUnload();">
    <div id="mainWindow" style="width: 100%; height: 100%;">
        <form action="#" onsubmit="showAddress(this.address.value); return false">
        <div id="header">
            <span>Bangalore /</span><span id="subheader"> Select your location to get more information</span>
            <input type="text" size="60" name="address" value="Walton road" style="width: 146px;
                height: 24px;"/>
            <input type="submit" value="Search!" />
        </div>
        </form>
        <div id="accordion2">
<dl class="accordion2" id="slider2">
<dt>Find Complaints</dt>
<dd>
   <span>This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any w</span>
</dd>
<dt>Find Elected Representatives</dt>
<dd>
   <input id="Corp_0" type="radio" name="group2" value="Corporator" onclick="showRep();"/>Corporator<br/>
            <input id="MLA_1" type="radio" name="group2" value="MLA" onclick="showRep();"/>MLA<br/>
            <input id="MP_2" type="radio" name="group2" value="MP" onclick="showRep();"/>MP
</dd>
<dt>Administrative Divisions</dt>
<dd>
            <input id="0" type="radio" name="group1" value="Wards" onclick="showAdmin();"/>Wards<br/>
            <input id="1" type="radio" name="group1" value="AC" onclick="showAdmin();"/>Assembly Constituency
</dd>
</dl>
</div>
        <div id="gmap" class="shadow" style="width: 1260px; height: 790px">
    </div>
    </div>

<script type="text/javascript">
    var slider2=new accordion.slider("slider2");
    slider2.init("slider2",0,"open");

</script>
</body>
</html>

pankajpedram1 · ‎12-13-2011

Marker InfoWindow...

var html = "<div id='MapInfoDiv' style='font-family:cursive; font-size:smaller; border:solid 2px black; width :200px'><table cellpadding='1' cellspacing='1' width='100%'><tr><td>"
                                + "ZONE:</td><td>" + zone
                                + "</td></tr><tr><td>STATE:</td><td>" + state
                                + "</td></tr><tr><td>STORE COUNT:</td><td>" + markers.getAttribute("no_of_stores")
                                + "</td></tr><tr><td>LEASED AREA <br>(1000 sqft):</td><td>" + markers.getAttribute("leased_area_thou_sft")
                                + "</td></tr><tr><td colspan= '2' align='right'><a class='aBig' href='#'"
                                + " onclick=GoogleZoom(\'" + markers.getAttribute("lat") + "," + markers.getAttribute("long") + "'\)>Zoom</a></td></tr></table></div>";
                            marker.bindInfoWindowHtml(html);

EdwardGriffin · ‎10-07-2013

Hiya

How did you get this working? did you modify the code suggested by PMhbostic or did you use PMpankajpedram's suggestions?

I am trying to achieve the same thing i.e. radio buttons with feature layers

cheers

Ed