topic Re: Easiest way to label a dynamic service layer in ArcGIS JavaScript Maps SDK Questions

Easiest way to label a dynamic service layer

BrandonPrice — Wed, 30 May 2018 03:55:52 GMT

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.

Re: Easiest way to label a dynamic service layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:35:20 GMT

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

Re: Easiest way to label a dynamic service layer

BrandonPrice — Sat, 11 Dec 2021 09:35:23 GMT

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

Re: Easiest way to label a dynamic service layer

RobertScheitlin__GISP — Sun, 03 Jun 2018 19:48:35 GMT

Brandon,

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

Re: Easiest way to label a dynamic service layer

BrandonPrice — Mon, 04 Jun 2018 16:25:11 GMT

Yes

Re: Easiest way to label a dynamic service layer

BrandonPrice — Mon, 04 Jun 2018 16:25:38 GMT

exact same casing also

Re: Easiest way to label a dynamic service layer

BrandonPrice — Tue, 05 Jun 2018 03:13:59 GMT

This should work then right?

Re: Easiest way to label a dynamic service layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:35:26 GMT

Brandon,

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

Re: Easiest way to label a dynamic service layer

BrandonPrice — Wed, 06 Jun 2018 22:01:16 GMT

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/MapServer", {
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()

Re: Easiest way to label a dynamic service layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:35:29 GMT

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
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Easiest way to label a dynamic service layer

BrandonPrice — Thu, 07 Jun 2018 14:18:00 GMT

oh I see. This worked. Thanks Robert for your help.

Re: Easiest way to label a dynamic service layer

shilpakaramar — Wed, 12 May 2021 05:50:02 GMT

How to show a custom labels from the shape file in dynamic map service?

I want to show a label(one which is inside red color box) which is in the info window.

Can you help me how to achieve that?