groundworklondon

Adding layer control - Javascript Google Maps API

Discussion created by groundworklondon on Jul 2, 2010
I am trying to add layer control on a dynamic map service. I am unable to find how the map services can be accessed (which property). Could someone point me in the right direction please.

Many thanks

The code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcFuoUuJrAh91dw-Gwt2WmxQcu3LA5w8Zw45k9l6u7NTjUtogmhSfY61U1oVd873qZJPbPGK-TsViJg" type="text/javascript"></script>
<script src="map_data.php" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>
<script src="map_functions.js" type="text/javascript">




var gmap=null;
//var ov;
var dynamicMap = null;

function initialize()
{

gmap = new GMap2(document.getElementById("gmap"));
var location = new GLatLng(52.618, -1.224780);
gmap.setCenter(location, 6);
gmap.addControl(new GMapTypeControl());
            gmap.addControl(new GLargeMapControl());
            gmap.addControl(new GScaleControl());
            gmap.enableDoubleClickZoom();
            gmap.enableContinuousZoom();
            gmap.enableScrollWheelZoom();

var url = "http://gis.groundwork.org.uk/ArcGIS/rest/services/sandbox/CSTest1/MapServer";
            var ov=new esri.arcgis.gmaps.DynamicMapServiceLayer(url,null,0.75,null);
            GEvent.addListener(ov,"load", function(){
              gmap.addOverlay(ov);
              var toc='';
              var layers=ov.getVisibleLayers() ;
              for (var i=0; i< layers.length; i++){
                toc+='<input type="checkbox" id="layer'+layers[i].id+'"';
                if (layers[i].visible) toc+=' checked="checked"';
                toc+=' onclick="setVisibility()">'+layers[i].name+'<br/>';
}
document.getElementById('toc').innerHTML=toc;
     });
}
         
function setVisibility(){
         var layers=service.getVisibleLayers() ;
          for (var i = 0; i < layers.length; i++) {
            var el=document.getElementById('layer'+layers[i].id);
            layers[i].visible=(el.checked===true);
          }
          ov.refresh();
        }
</script>
</head>

<body onload="initialize();" onunload="GUnload();">
<br/>Use Check box to turn on/off layers in a dynamic map service.
       <table>
         <tr>
           <td valign="top"><div id="toc" style="width:130px;"></div></td>
           <td><div id="gmap" style="width:500px; height:500px; border:1px solid #000;">
        </div></td>
         </tr>
       </table>

</body>
</html>

Outcomes