Easiest way to label a dynamic service layer

1515
11
Jump to solution
05-29-2018 08:55 PM
BrandonPrice
Occasional Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

11 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

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();
      });
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Brandon,

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

0 Kudos
BrandonPrice
Occasional Contributor

Yes

0 Kudos
BrandonPrice
Occasional Contributor

exact same casing also

0 Kudos
BrandonPrice
Occasional Contributor

This should work then right?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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