topic Re: Selecting a single layer in ArcGIS JavaScript Maps SDK Questions

Selecting a single layer

SaurabhRohilla — Tue, 09 Feb 2016 08:46:57 GMT

Actually i am making a layer list . I am able to get all layers at one time.I am accessing map service layers.Anyone knows how to get only one layer at a time?

Re: Selecting a single layer

RobertScheitlin__GISP — Tue, 09 Feb 2016 13:21:28 GMT

Saurabh,

Not sure I understand your question. If you are asking how to set the visibility of a particular layer in a ynamic map service layer then you would use setVisibleLayers method:

ArcGISDynamicMapServiceLayer | API Reference | ArcGIS API for JavaScript | setVisibleLayers

Re: Selecting a single layer

SaurabhRohilla — Wed, 10 Feb 2016 06:42:45 GMT

Robert

Thanks for reply.Actually i am new to GIS ,so can you share sample code for that?

Re: Selecting a single layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:34:19 GMT

Saurabh,

Sure here is a sample:

<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Testing sublayer visibility">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.15/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer"
      ], function (
        Map, ArcGISDynamicMapServiceLayer) {

        map = new Map("mapDiv", {
          basemap: "topo",
          zoom: 10,
          center: [-98.258, 38.236]
        });


        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
        map.addLayer(dynamicMapServiceLayer);

        dynamicMapServiceLayer.setVisibleLayers([0,1,3,5]);
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>

Re: Selecting a single layer

SaurabhRohilla — Fri, 12 Feb 2016 05:53:03 GMT

Robert,

Thanks.Its working absolutely fine.But when i used this for my webmapservice its not working.

I am adding layers with ArcGISTiledMapServiceLayer .

Reference :

var TiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

But if i replace ArcGISDynamicMapServiceLayer with ArcGISTiledMapServiceLayer in the code , the layers are not switchable. So it means that setVisibleLayers method only works with ArcGISDynamicMapServiceLayer.??

Re: Selecting a single layer

nita14 — Fri, 12 Feb 2016 12:16:12 GMT

Hi Saurabh,

there is no way to set visibility to each layer in ArcGISTiledMapServiceLayer since it is just a static 'snapshot' of your data (just like image). You can only set transparency or visibility to the whole service. See TiledMapServiceLayer | API Reference | ArcGIS API for JavaScript for reference.

Regards,

Adam

Re: Selecting a single layer

SaurabhRohilla — Mon, 15 Feb 2016 06:08:04 GMT

Hi Nicinski,

Thanks for your response.It helps me a lot.

Re: Selecting a single layer

SaurabhRohilla — Wed, 17 Feb 2016 11:30:57 GMT

Hi Nicinski,

One more thing .Actually i am facing problem in writing the classes for require.

Refer code:

require([

"esri/map",

"esri/dijit/Scalebar",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/toolbars/navigation",

"dojo/on",

"dojo/parser",

"esri/dijit/OverviewMap",

"dijit/registry",

"esri/tasks/QueryTask",

"esri/tasks/query",

"esri/symbols/SimpleMarkerSymbol",

"esri/InfoTemplate",

"dojo/_base/Color",

"dijit/Toolbar",

"dijit/form/Button",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/Ready"

], function(Map, Scalebar,ArcGISDynamicMapServiceLayer,Navigation, on, parser,OverviewMap, registry, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color)

Can you please tell me the hierarachy of classes, which to write first and which one to last?

Re: Selecting a single layer

SaurabhRohilla — Wed, 17 Feb 2016 11:31:26 GMT

Hi Robert,

One more thing .Actually i am facing problem in writing the classes for require.

Refer code:

require([

"esri/map",

"esri/dijit/Scalebar",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/toolbars/navigation",

"dojo/on",

"dojo/parser",

"esri/dijit/OverviewMap",

"dijit/registry",

"esri/tasks/QueryTask",

"esri/tasks/query",

"esri/symbols/SimpleMarkerSymbol",

"esri/InfoTemplate",

"dojo/_base/Color",

"dijit/Toolbar",

"dijit/form/Button",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/Ready"

], function(Map, Scalebar,ArcGISDynamicMapServiceLayer,Navigation, on, parser,OverviewMap, registry, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color)

Can you please tell me the hierarachy of classes, which to write first and which one to last?

Re: Selecting a single layer

thejuskambi — Wed, 17 Feb 2016 13:35:16 GMT

Hello Saurabh,

I dont think it matter what order you add a require as long as the require and parameters are in same order. If a module has a dependency on another module, it will get it with its own require.

Thejus

Re: Selecting a single layer

SaurabhRohilla — Thu, 18 Feb 2016 04:53:06 GMT

Hi Thejus,

Actually i got sample for following functionalities on arcgis for javascript api website .

1.Zoom by area

2.coordinates

3.center at xy

4.Measurement

5.scale

6.custom scale

7.query task

8.Overview

All are working fine separately.But when i tried to join all functionalities on single html file,all are working but Measurement widget is not working properly.Can you please Look into this .

Refer code:

<!DOCTYPE html>

<html>

<head>

<title>Map with scalebar</title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

#map{padding:0;}

.zoominIcon {

width: 16px;

height: 16px;

}

.zoomoutIcon {

width: 16px;

height: 16px;

}

.zoomfullextIcon {

width: 16px;

height: 16px;

}

.zoomprevIcon {

width: 16px;

height: 16px;

}

.zoomnextIcon {

width: 16px;

height: 16px;

}

.panIcon {

width: 16px;

height: 16px;

}

.deactivateIcon {

width: 16px;

height: 16px;

}

#Pane1{

width:240px;

}

.claro .dijitTitlePaneTitle {

background: #fff;

font-weight:600;

border: none;

border-bottom:solid 1px #29201A;

border-top:solid 1px #29201A;

}

.claro .dijitTitlePaneTitleHover {

background:#eee;

}

.claro .dijitTitlePaneTitleActive {

background:#808775;

}

.claro .dijitTitlePaneContentOuter {

border-right: none;

border-bottom: none;

border-left: none;

}

</style>

var map;

require([

"esri/map",

"esri/dijit/Scalebar",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/toolbars/navigation",

"dojo/on",

"dojo/parser",

"esri/dijit/OverviewMap",

"dijit/registry",

"esri/tasks/QueryTask",

"esri/tasks/query",

"esri/symbols/SimpleMarkerSymbol",

"esri/InfoTemplate",

"dojo/_base/Color",

"dijit/Toolbar",

"dijit/form/Button",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/keys",

"esri/config",

"esri/sniff",

"esri/SnappingManager",

"esri/dijit/Measurement",

"esri/layers/FeatureLayer",

"esri/renderers/SimpleRenderer",

"esri/tasks/GeometryService",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"dijit/TitlePane",

"dijit/form/CheckBox",

"dojo/domReady!"

], function(Map, Scalebar,ArcGISDynamicMapServiceLayer,Navigation, on, parser,OverviewMap, registry, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color , keys,esriConfig, has,SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol) {

//create map and add layer

parser.parse();

var navToolbar;

map = new Map("map");

var myTiledMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

map.addLayer(myTiledMapServiceLayer);

navToolbar = new Navigation(map);

on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

registry.byId("zoomin").on("click", function () {

navToolbar.activate(Navigation.ZOOM_IN);

});

registry.byId("zoomout").on("click", function () {

navToolbar.activate(Navigation.ZOOM_OUT);

});

registry.byId("zoomfullext").on("click", function () {

navToolbar.zoomToFullExtent();

});

registry.byId("zoomprev").on("click", function () {

navToolbar.zoomToPrevExtent();

});

registry.byId("zoomnext").on("click", function () {

navToolbar.zoomToNextExtent();

});

registry.byId("pan").on("click", function () {

navToolbar.activate(Navigation.PAN);

});

registry.byId("deactivate").on("click", function () {

navToolbar.deactivate();

});

function extentHistoryChangeHandler () {

registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();

registry.byId("zoomnext").disabled = navToolbar.isLastExtent();

}

map.on("load", function() {

//after map loads, connect to listen to mouse move & drag events

map.on("mouse-move", showCoordinates);

map.on("mouse-drag", showCoordinates);

});

//initialize query task

queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

//initialize query

query = new Query();

query.returnGeometry = true;

query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

//initialize InfoTemplate

infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

//create symbol for selected features

symbol = new SimpleMarkerSymbol();

symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);

symbol.setSize(20);

symbol.setColor(new Color([255,255,0,0.05]));

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

var overviewMapDijit = new OverviewMap({

map: map,

visible: true

});

overviewMapDijit.startup();

});

function executeQueryTask(population) {

//set query based on what user typed in for population;

query.where = "POP1990 > " + population;

//execute query

queryTask.execute(query,showResults);

}

function showResults(featureSet) {

//remove all graphics on the maps graphics layer

map.graphics.clear();

//Performance enhancer - assign featureSet array to a single variable.

var resultFeatures = featureSet.features;

alert(resultFeatures.length);

//Loop through each feature returned

for (var i=0, il=resultFeatures.length; i<il; i++) {

//Get the current feature from the featureSet.

//Feature is a graphic

var graphic = resultFeatures;

graphic.setSymbol(symbol);

//Set the infoTemplate.

graphic.setInfoTemplate(infoTemplate);

//Add graphic to the map graphics layer.

map.graphics.add(graphic);

}

function zoomTo(a,b,c)

{

map.centerAndZoom(new esri.geometry.Point(a,b),c);

}

function showCoordinates(evt) {

document.getElementById("info").innerHTML = evt.mapPoint.x.toFixed(3) + ", " + evt.mapPoint.y.toFixed(3);

}

function setScale(a)

{

map.setScale(a);

}

function centerScreen()

{

dojo.connect(map,"onClick",abc);

function abc(evt)

{

map.centerAt(evt.mapPoint);

}

</script>

</head>

<body>

<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>

<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>

<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>

<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>

</div>

US city population greater than : <input type="text" id="population" value="10" />

</div>

<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"

style="width:100%; height:100%;">

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

</div>

X coordinate: <input type="text" id="text1"></br>

Y coordinate: <input type="text" id="text2"></br>

ZOOM Level: <input type="text" id="text3"></br>

Scale 1 :<input type="text" id="text4"></br>

</body>

</html>

Re: Selecting a single layer

thejuskambi — Sat, 11 Dec 2021 17:34:22 GMT

Like I mentioned in my previous reply. The order of the require and parameters must match. In you case it was not correct. Below is the correct require for you page.

require([
                "esri/map",
                "esri/dijit/Scalebar",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/toolbars/navigation",
                "dojo/on",
                "dojo/parser",
                "esri/dijit/OverviewMap",
                "dijit/registry",
                "esri/tasks/QueryTask",
                "esri/tasks/query",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/InfoTemplate",
                "dojo/_base/Color",
                "dojo/keys",
                "esri/config",
                "esri/sniff",
                "esri/SnappingManager",
                "esri/dijit/Measurement",
                "esri/layers/FeatureLayer",
                "esri/renderers/SimpleRenderer",
                "esri/tasks/GeometryService",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "dijit/TitlePane",
                "dijit/form/CheckBox",
                "dijit/Toolbar",
                "dijit/form/Button",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dojo/domReady!"
            ], function (Map,
                    Scalebar,
                    ArcGISDynamicMapServiceLayer,
                    Navigation,
                    on,
                    parser,
                    OverviewMap,
                    registry,
                    QueryTask,
                    Query,
                    SimpleMarkerSymbol,
                    InfoTemplate,
                    Color,
                    keys,
                    esriConfig,
                    has,
                    SnappingManager,
                    Measurement,
                    FeatureLayer,
                    SimpleRenderer,
                    GeometryService,
                    SimpleLineSymbol,
                    SimpleFillSymbol) {

Re: Selecting a single layer

SaurabhRohilla — Fri, 19 Feb 2016 12:06:48 GMT

Hi Thejus,

Now its working fine.Thanks a lot for your response.