topic Re: switch on off map service with checkbox in ArcGIS JavaScript Maps SDK Questions

switch on off map service with checkbox

francescodi_vito — Tue, 23 Jul 2013 08:53:05 GMT

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

Re: switch on off map service with checkbox

ManojrajTeli — Tue, 23 Jul 2013 10:41:15 GMT

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

Re: switch on off map service with checkbox

KenBuja — Tue, 23 Jul 2013 11:41:31 GMT

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.

Re: switch on off map service with checkbox

francescodi_vito — Tue, 23 Jul 2013 14:56:29 GMT

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

Re: switch on off map service with checkbox

JeffJacobson — Tue, 23 Jul 2013 15:25:43 GMT

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())

Re: switch on off map service with checkbox

francescodi_vito — Wed, 24 Jul 2013 11:25:00 GMT

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.

Re: switch on off map service with checkbox

francescodi_vito — Wed, 24 Jul 2013 15:26:57 GMT

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

Re: switch on off map service with checkbox

JeffJacobson — Wed, 24 Jul 2013 23:22:05 GMT

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()