switch on off map service with checkbox

francescodi_vito · ‎07-23-2013

Hi,
there is any example that show how to turn on off for a single dynamicMapService (ex. http://server/arcgis/rest/root/mapservice/1) with a checkbox?
thanks all

ManojrajTeli · ‎07-23-2013

Here is the example to switch on off the feature layer you
Switch on and off
check this forum helpForum Help

KenBuja · ‎07-23-2013

If you're looking to turn off a single layer within the map service, take a look at nliu's Table of Contents(TOC)/Legend Widget.

francescodi_vito · ‎07-23-2013

If you're looking to turn off a single layer within the map service, take a look at nliu's Table of Contents(TOC)/Legend Widget.

thanks guys for the answer.
I saw these examples but I'm trying to create a layer list for mobile with jquery mobile and using these examples is changed the style of my check box. I'm a flex developer and i'm new of javascript world.
Is there any example for layer list in mobile device?
Thanks

JeffJacobson · ‎07-23-2013

thanks guys for the answer.
I saw these examples but I'm trying to create a layer list for mobile with jquery mobile and using these examples is changed the style of my check box. I'm a flex developer and i'm new of javascript world.
Is there any example for layer list in mobile device?
Thanks

Create a list of layers with HTML.

For each layer there should be a checkbox (input element) and an associated label

Add a data-layerid attribute to the checkbox with the id of the associated layer. (You can call this attribute whatever you want as long as it starts with data-)

Create a single event handler function for the checkboxes' click events. This function will do the following:

Get the layer ID from the data-layerid attribute of the checkbox that was clicked. (The specific checkbox can be accessed in the function via the this keyword.)

Retrieve the associated layer from the map using the layer id.

Either show or hide the layer, depending on if the checkbox is checked or not.

Add the event handler to the checkboxes.

If you don't have to worry about supporting old versions of IE, use addEventListener

If you need to support old versions of IE, use jQuery's event handling code (i think it's called .click())

francescodi_vito · ‎07-24-2013

Create a list of layers with HTML.

For each layer there should be a checkbox (input element) and an associated label

Add a data-layerid attribute to the checkbox with the id of the associated layer. (You can call this attribute whatever you want as long as it starts with data-)

Create a single event handler function for the checkboxes' click events. This function will do the following:

Get the layer ID from the data-layerid attribute of the checkbox that was clicked. (The specific checkbox can be accessed in the function via the this keyword.)

Retrieve the associated layer from the map using the layer id.

Either show or hide the layer, depending on if the checkbox is checked or not.

Add the event handler to the checkboxes.

If you don't have to worry about supporting old versions of IE, use addEventListener

If you need to support old versions of IE, use jQuery's event handling code (i think it's called .click())

Thanks Jeff i try it.

francescodi_vito · ‎07-24-2013

Thanks Jeff i try it.

Hello Jeff,
I wrote these lines of code and in this way can turn on the single layer with mode_ondemand but does not work the function off to hide it.

[HTML]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9, IE=10">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Mobile Gallery</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />

<style type="text/css">
html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
   #mapcontent, #map { width: 100%; height: 100%; padding: 0; position: absolute; z-index: 0;}
    </style>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/"></script>

<script>
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");

    var map;
   function init() {
    map = new esri.Map("map", {
      center: [12.785, 42.372],
      zoom: 4,
      basemap: "streets"
    });
}
function initUphamOne() //Name of the function
{
featureLayerB = new esri.layers.FeatureLayer("http://save.gisaction.org/ArcGIS/rest/services/ABBANDONI/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
map.addLayer(featureLayerB);
}
dojo.ready(init);
</script>
</head>

<body>
//home view
<div data-role="page" id="home">

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#toc" data-role="button" data-icon="bars" data-iconpos="notext"></a>
    <h3>Editing</h3>
</div>


<div data-role="content" id="mapcontent">
    <div id="map"></div>
</div>

</div>

//layer view
<div data-role="page" id="toc">

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#home" data-role="button" data-icon="back" data-iconpos="notext"></a>
    <h3>Layer</h3>
</div>


<div data-role="content">
    <form>
    <fieldset data-role="controlgroup">
        <legend>Vertical:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" onClick="initUphamOne()">
        <label for="checkbox-v-2a">Operation Layer 1</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Operation Layer 2</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Operation Layer 3</label>
    </fieldset>
</form>
</div>

</div>

</body>
</html>

[/HTML]
I need to create a function off?
If i create a function for hide, example

function hideElseB() {
featureLayerB.hide();
}

any help?
thanks

JeffJacobson · ‎07-24-2013

The layer object already has a hide and show method.

Your checkbox click event handler is creating a layer and then adding it to the map each time it is clicked. The layer object only needs to be created once.

The featureLayerB variable should be moved to the same scope as the map variable.

In the click event

Check to see if featureLayerB has a value.
```
if (!featureLayerB) {  }
```

If it hasn't been assigned a value yet, create the layer.

Outside of that if statement, get the checked value of the checkbox (true or false).

If the checkbox is checked,

featureLayerB.show()

, else

featureLayerB.hide()