Selecting a single layer

2750
12
Jump to solution
02-09-2016 12:46 AM
SaurabhRohilla
New Contributor II

Hi

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?

0 Kudos
12 Replies
SaurabhRohilla
New Contributor II

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>

<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>Map with scalebar</title>

<link rel="stylesheet" type="text/css" href="localhost URL"/>

<link rel="stylesheet" type="text/css" href="localhost URL" />

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

    <script type="text/javascript" src="localhost URL"></script>

    <script type="text/javascript">

      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/Map...");

  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/Map...");

  //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 class="claro">

<body>

<div id="navToolbar" data-dojo-type="dijit/Toolbar">

      <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>

      <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>

      <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="pan" data-dojo-props="iconClass:'panIcon'">Pan</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" />

  <input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />

  <div id="map" style="width:800px; height:800px; border:1px solid #000;">

<span id="info" style="position:right; left:15px; bottom:5px; color:#000; z-index:50;"></span>

</div>

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

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

<div style="position:absolute; right:20px; top:10px; z-Index:999;">

          <div id="Pane1" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false,                      open:false">

            <div id="measurementDiv"></div>

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

          </div>

        </div>

</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>

<input type="button" value="zoom" onClick="zoomTo(document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value)"></br>

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

<input type="button" value="set Scale" onClick="setScale(document.getElementById('text4').value)"></br>

<input type="button" value="centerAt" onClick="centerScreen()"><br/>

</body> 

</html>

0 Kudos
thejuskambi
Occasional Contributor III

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) {
SaurabhRohilla
New Contributor II

Hi Thejus,

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

0 Kudos