nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

switch on off map service with checkbox

francescodi_vito

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

Find more posts tagged with

Accepted answers

All comments

JeffJacobson

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

francescodi_vito

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

francescodi_vito

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.

JeffJacobson

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

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

kenbuja

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.

ManojrajTeli

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.