Easiest way to label a dynamic service layer

BrandonPrice · ‎05-29-2018

What is the least complex way to label a arcgisdynamic service layer that is using a map service comprised of two grids covering two counties with a minzoom of 40000? The label would be the id for each grid. Let me know if more information is needed.

RobertScheitlin__GISP · ‎05-30-2018

Brandon,

Here is a sample.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      margin: 0;
      padding: 0;
    }

  </style>

  <script src="https://js.arcgis.com/3.24/"></script>
  <script>
    var app = {};
    require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
      Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
      LayerDrawingOptions, LabelClass, TextSymbol, parser
    ) {
      parser.parse();

      app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
      app.defaultFrom = "#ffffcc";
      app.defaultTo = "#006837";

      app.map = new Map("map", {
        center: [-85.787, 39.782],
        zoom: 9,
        slider: false
      });

      var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
      app.map.addLayer(basemap);
      var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");

      urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
        id: "us_counties",
        opacity: 0.7,
        visible: false
      });
      usaLayer.setVisibleLayers([2]);
      app.map.addLayer(usaLayer);

      var optionsArray = [];
      var drawingOptions = new LayerDrawingOptions();
      var labelClass = new LabelClass({
        labelExpression: '[' +  "POP2000" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: new TextSymbol(),
        minScale: 840000
      });

      drawingOptions.labelingInfo = [labelClass];
      drawingOptions.showLabels = true;

      optionsArray[2] = drawingOptions;
      app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
      app.map.getLayer("us_counties").show();
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-30-2018

Brandon,

Here is a sample.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      margin: 0;
      padding: 0;
    }

  </style>

  <script src="https://js.arcgis.com/3.24/"></script>
  <script>
    var app = {};
    require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
      Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
      LayerDrawingOptions, LabelClass, TextSymbol, parser
    ) {
      parser.parse();

      app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
      app.defaultFrom = "#ffffcc";
      app.defaultTo = "#006837";

      app.map = new Map("map", {
        center: [-85.787, 39.782],
        zoom: 9,
        slider: false
      });

      var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
      app.map.addLayer(basemap);
      var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");

      urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
        id: "us_counties",
        opacity: 0.7,
        visible: false
      });
      usaLayer.setVisibleLayers([2]);
      app.map.addLayer(usaLayer);

      var optionsArray = [];
      var drawingOptions = new LayerDrawingOptions();
      var labelClass = new LabelClass({
        labelExpression: '[' +  "POP2000" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: new TextSymbol(),
        minScale: 840000
      });

      drawingOptions.labelingInfo = [labelClass];
      drawingOptions.showLabels = true;

      optionsArray[2] = drawingOptions;
      app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
      app.map.getLayer("us_counties").show();
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrandonPrice · ‎06-02-2018

my version is as follows:

Both set visible layers in the array are shown in the map although the label only shows for the 3rd layer in the array. Also the halo settings are not shown. What am I missing?

urlDyn = "https://sv07gdchfeat10.ct.dot.ca.gov/server/rest/services/D7Geospatial/CirgisLariacIndex2018";
      homelandSecurity = new ArcGISDynamicMapServiceLayer(urlDyn, {
        id: "index_filenames",
        opacity: 0.7,
        visible: true
      });
      homelandSecurity.setVisibleLayers([1,3]);
      map.addLayer(homelandSecurity);

      var optionsArray = [];
      var drawingOptions = new LayerDrawingOptions();
      var labelClass = new LabelClass({
        labelExpression: '[' +  "FILENAME" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: new TextSymbol({
                  haloSize: 2, 
                  haloColor: [255,255,255]
               }),
        minScale: 30000
      });

      drawingOptions.labelingInfo = [labelClass];
      drawingOptions.showLabels = true;

      optionsArray[1,3] = drawingOptions;
      map.getLayer("index_filenames").setLayerDrawingOptions(optionsArray);      
      map.getLayer("index_filenames").show();
      });

RobertScheitlin__GISP · ‎06-03-2018

Brandon,

Do both layers in the map service have the same field name "FILENAME"?

BrandonPrice · ‎06-04-2018

Yes

BrandonPrice · ‎06-04-2018

exact same casing also

BrandonPrice · ‎06-04-2018

This should work then right?

RobertScheitlin__GISP · ‎06-05-2018

Brandon,

No

optionsArray[1,3] = drawingOptions;

is not valid code.

You would need

optionsArray[1] = drawingOptions;
optionsArray[3] = drawingOptions;

But I would use a whole other LayerDrawingOptions class for the other layer.

Here is another working sample labeling two different layers:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      margin: 0;
      padding: 0;
    }

  </style>

  <script src="https://js.arcgis.com/3.24/"></script>
  <script>
    var app = {};
    require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
      Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
      LayerDrawingOptions, LabelClass, TextSymbol, parser
    ) {
      parser.parse();

      app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
      app.defaultFrom = "#ffffcc";
      app.defaultTo = "#006837";

      app.map = new Map("map", {
        center: [-85.787, 39.782],
        zoom: 9,
        slider: false
      });

      var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
      app.map.addLayer(basemap);
      var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");

      urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
        id: "us_counties",
        opacity: 0.7,
        visible: false
      });
      usaLayer.setVisibleLayers([1,3]);
      app.map.addLayer(usaLayer);

      var optionsArray = [];
      var drawingOptions = new LayerDrawingOptions();
      var labelClass = new LabelClass({
        labelExpression: '[' +  "POP2000" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: new TextSymbol(),
        maxScale: 840000
      });

      drawingOptions.labelingInfo = [labelClass];
      drawingOptions.showLabels = true;

      var labelClass2 = new LabelClass({
        labelExpression: '[' +  "POP2000" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: new TextSymbol(),
        minScale: 540000
      });

      var drawingOptions2 = new LayerDrawingOptions();
      drawingOptions2.labelingInfo = [labelClass2];
      drawingOptions2.showLabels = true;


      optionsArray[1] = drawingOptions2;
      optionsArray[3] = drawingOptions;
      app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
      app.map.getLayer("us_counties").show();
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrandonPrice · ‎06-06-2018

Thanks Robert. I can't get the halos to show.

var homelandSecurity = new ArcGISDynamicMapServiceLayer("https://sv07gdchfeat10.ct.dot.ca.gov/server/rest/services/D7Geospatial/CirgisLariacIndex2018/MapServ...", {
id: "index_filenames",
visible: true
}); //D7 Server

homelandSecurity.setVisibleLayers([1,3]);
map.addLayer(homelandSecurity);

var optionsArray = [];
var drawingOptions = new LayerDrawingOptions();

var labelClass = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol({
type: "esriTS",
color: [0,0,0],
haloColor: [0,245,255],
haloSize: 2,
"font": {
"family": "Arial",
"weight": "bold",
"size": "14px"
}
}),
minScale: 35000
});

drawingOptions.labelingInfo = [labelClass];
drawingOptions.showLabels = true;

var labelClass2 = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol({
"type": "esriTS",
"color": [0,0,0],
"haloColor": [0,245,255],
"haloSize": 2,
"font": {
"family": "Arial",
"weight": "bold",
"size": "14px"
}
}),
minScale: 35000
});

var drawingOptions2 = new LayerDrawingOptions();
drawingOptions2.labelingInfo = [labelClass2];
drawingOptions2.showLabels = true;

optionsArray[1] = drawingOptions;
optionsArray[3] = drawingOptions2;
map.getLayer("index_filenames").setLayerDrawingOptions(optionsArray);
map.getLayer("index_filenames").show()

RobertScheitlin__GISP · ‎06-06-2018

Brandon,

Replace your:

var labelClass2 = new LabelClass({
  labelExpression: '[' + "FILENAME" + ']',
  labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
  symbol: new TextSymbol({
    "type": "esriTS", 
    "color": [0,0,0],
    "haloColor": [0,245,255],
    "haloSize": 2,
    "font": { 
      "family": "Arial",
      "weight": "bold",
      "size": "14px" 
    }
  }),
  minScale: 35000
}); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

with:

      var labelClass2 = new LabelClass({
        labelExpression: '[' +  "FILENAME" + ']',
        labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
        symbol: {
          "type": "esriTS",
          "color": [0,0,0],
          "haloColor": [0,245,255],
          "haloSize": 2,
          "font": {
            "family": "Arial",
            "size": "14px",
            "weight": "bold"
          }
        },
        minScale: 35000
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍