topic Re: Labels for dynamic layer in ArcGIS JavaScript Maps SDK Questions

Labels for dynamic layer

OndrejFialík — Wed, 20 Jan 2016 09:32:23 GMT

Hello,

how add custom labels to ArcGISDynamicMapServiceLayer? (like FeatureLayer.setLabelingInfo())

Thanks

Ondra

Re: Labels for dynamic layer

RobertScheitlin__GISP — Wed, 20 Jan 2016 13:04:49 GMT

Ondrej,

Sure see the docs for details:

ArcGISDynamicMapServiceLayer | API Reference | ArcGIS API for JavaScript |setInfoTemplates

Re: Labels for dynamic layer

OndrejFialík — Thu, 21 Jan 2016 07:29:57 GMT

But i need clasics labels not templates "click" windows ...

Re: Labels for dynamic layer

EndreStokseth — Thu, 21 Jan 2016 12:23:59 GMT

Hi,

I don't think that possible using ArcGISDynamicMapServiceLayer.

ArcGISDynamicMapServiceLayer does not have the method 'setLabelingInfo'.

You can use a FeatureLayer as described here: Labeling features client-side | Guide | ArcGIS API for JavaScript

I guess the documentation for 'LabelClass' is a bit misleading. I don't understand the property 'labelExpression'..

To add labels to arcGISDynamicMapServiceLayer you can set up labels in you mxd before publishing.

Re: Labels for dynamic layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:33:55 GMT

Ondrej,

Sorry I mis-read your original post. Here is how to label a specific layer of a dynamic map service:

<!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.15/dijit/themes//tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    h3 {
      margin: 0 0 5px 0;
      border-bottom: 1px solid #444;
      text-align: center;
    }

    .shadow {
      -moz-box-shadow: 0 0 5px #888;
      -webkit-box-shadow: 0 0 5px #888;
      box-shadow: 0 0 5px #888;
    }

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

    #feedback {
      background: #fff;
      color: #444;
      font-family: arial;
      left: 30px;
      margin: 5px;
      padding: 10px;
      position: absolute;
      top: 30px;
      width: 300px;
      z-index: 40;
    }

    #note {
      font-size: 80%;
      font-weight: 700;
      padding: 0 0 10px 0;
    }

    #loading {
      visibility: hidden;
    }

    #legendDiv {
      padding: 10px 0 0 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    var app = {};
    require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/request", "esri/config", "esri/tasks/ClassBreaksDefinition", "esri/tasks/AlgorithmicColorRamp",
        "esri/tasks/GenerateRendererParameters", "esri/tasks/GenerateRendererTask",
        "esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
        "esri/symbols/SimpleFillSymbol", "esri/dijit/Legend",
        "dojo/parser", "dojo/_base/array", "esri/Color", "dojo/dom-style",
        "dojo/json", "dojo/dom", "dojo/data/ItemFileReadStore", "dijit/registry",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/FilteringSelect",
        "dojo/domReady!"
      ], function (
      Map,
      ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
      esriRequest, esriConfig,
      ClassBreaksDefinition, AlgorithmicColorRamp,
      GenerateRendererParameters, GenerateRendererTask,
      LayerDrawingOptions, LabelClass, TextSymbol,
      SimpleFillSymbol, Legend,
      parser, arrayUtils, Color, domStyle,
      JSON, dom,
      ItemFileReadStore,
      registry
    ) {
      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 countyFields = esriRequest({
        url: app.dataUrl,
        content: {
          f: "json"
        },
        callbackParamName: "callback"
      });
      countyFields.then(function (resp) {
        var fieldNames, fieldStore;

        fieldNames = {
          identifier: "value",
          label: "name",
          items: []
        };
        arrayUtils.forEach(resp.fields.slice(6, 16), function (f) {
          fieldNames.items.push({
            "name": f.name,
            "value": f.name
          });
        });
        fieldStore = new ItemFileReadStore({
          data: fieldNames
        });
        registry.byId("fieldNames").set("store", fieldStore);
        registry.byId("fieldNames").set("value", "POP2007");
      }, function (err) {
        console.log("failed to get field names: ", err);
      });

      usaLayer.on("update-end", function () {
        domStyle.set("loading", "visibility", "hidden");
      });

      registry.byId("fieldNames").on("change", getData);
      registry.byId("fieldNames").set("value", "POP_2007");

      function getData() {
        var optionsArray = [];
        var drawingOptions = new LayerDrawingOptions();
        var labelClass = new LabelClass({
          labelExpression: '[' + (registry.byId("fieldNames").get("value") || "POP2000") + ']',
          labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
          symbol: new TextSymbol()
        });

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

        optionsArray[2] = drawingOptions;
        app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
        app.map.getLayer("us_counties").show();
      }

      function errorHandler(err) {
        console.log("error: ", JSON.stringify(err));
      }
    });
  </script>
</head>

<body class="tundra">
  <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 id="feedback" class="shadow">
        <h3>Change the Attribute Field Used to Render Data</h3>
        <div id="info">
          <div id="note">
            Note: This sample requires an ArcGIS Server version 10.1 map service to generate a renderer.
          </div>

          <!-- filtering select -->
          <label for="fieldNames">Render based on: </label>
          <select id="fieldNames" name="baseSym" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="style:'width:200px;'">
          </select>

          <img id="loading" src="http://dl.dropbox.com/u/2654618/loading_black.gif" />

          <div id="legendDiv"></div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Re: Labels for dynamic layer

OndrejFialík — Fri, 22 Jan 2016 08:45:10 GMT

Works great, thaks a lot

Re: Labels for dynamic layer

shilpakaramar — Tue, 11 May 2021 06:44:27 GMT

Hi @RobertScheitlin__GISP

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?

Re: Labels for dynamic layer

RobertScheitlin__GISP — Wed, 12 May 2021 15:07:14 GMT

@shilpakaramar

Here is that sample updated with changes commented in the 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>Add Shapefile</title> <link rel="stylesheet" href="https://js.arcgis.com/3.36/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/fileupload.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.36/esri/css/esri.css"> <script src="https://js.arcgis.com/3.36/"></script> <script> var map; require([ "esri/config", "esri/InfoTemplate", "esri/map", "esri/request", "esri/geometry/scaleUtils", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", //Added modules "esri/symbols/TextSymbol", "esri/layers/LabelClass", //end add modules "dojo/dom", "dojo/json", "dojo/on", "dojo/parser", "dojo/sniff", "dojo/_base/array", "esri/Color", "dojo/_base/lang", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( esriConfig, InfoTemplate, Map, request, scaleUtils, FeatureLayer, SimpleRenderer, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, TextSymbol, LabelClass, dom, JSON, on, parser, sniff, arrayUtils, Color, lang ) { parser.parse(); var portalUrl = "https://www.arcgis.com"; esriConfig.defaults.io.proxyUrl = "/proxy/"; on(dom.byId("uploadForm"), "change", function (event) { var fileName = event.target.value.toLowerCase(); if (sniff("ie")) { //filename is full path in IE so extract the file name var arr = fileName.split("\\"); fileName = arr[arr.length - 1]; } if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user generateFeatureCollection(fileName); } else { dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>'; } }); map = new Map("mapCanvas", { basemap: "gray-vector", center: [-41.647, 36.41], zoom: 2, slider: false, //Set the map to show labels showLabels : true //very important that this must be set to true! }); function generateFeatureCollection (fileName) { var name = fileName.split("."); //Chrome and IE add c:\fakepath to the value - we need to remove it //See this link for more info: http://davidwalsh.name/fakepath name = name[0].replace("c:\\fakepath\\", ""); dom.byId('upload-status').innerHTML = '<b>Loading… </b>' + name; //Define the input params for generate see the rest doc for details //http://www.arcgis.com/apidocs/rest/index.html?generate.html var params = { 'name': name, 'targetSR': map.spatialReference, 'maxRecordCount': 1000, 'enforceInputFileSizeLimit': true, 'enforceOutputJsonSizeLimit': true }; //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters //This should work well when using web mercator. var extent = scaleUtils.getExtentForScale(map, 40000); var resolution = extent.getWidth() / map.width; params.generalize = true; params.maxAllowableOffset = resolution; params.reducePrecision = true; params.numberOfDigitsAfterDecimal = 0; var myContent = { 'filetype': 'shapefile', 'publishParameters': JSON.stringify(params), 'f': 'json', 'callback.html': 'textarea' }; //use the rest generate operation to generate a feature collection from the zipped shapefile request({ url: portalUrl + '/sharing/rest/content/features/generate', content: myContent, form: dom.byId('uploadForm'), handleAs: 'json', load: lang.hitch(this, function (response) { if (response.error) { errorHandler(response.error); return; } var layerName = response.featureCollection.layers[0].layerDefinition.name; dom.byId('upload-status').innerHTML = '<b>Loaded: </b>' + layerName; addShapefileToMap(response.featureCollection); }), error: lang.hitch(this, errorHandler) }); } function errorHandler (error) { dom.byId('upload-status').innerHTML = "<p style='color:red'>" + error.message + "</p>"; } function addShapefileToMap (featureCollection) { //add the shapefile to the map and zoom to the feature collection extent //If you want to persist the feature collection when you reload browser you could store the collection in //local storage by serializing the layer using featureLayer.toJson() see the 'Feature Collection in Local Storage' sample //for an example of how to work with local storage. var fullExtent; var layers = []; arrayUtils.forEach(featureCollection.layers, function (layer) { var infoTemplate = new InfoTemplate("Details", "${*}"); var featureLayer = new FeatureLayer(layer, { infoTemplate: infoTemplate, outFields: ["*"] }); //associate the feature with the popup on click to enable highlight and zoom to featureLayer.on('click', function (event) { map.infoWindow.setFeatures([event.graphic]); }); //Start code to set labels // create a text symbol to define the style of labels var sColor = new Color("#666"); var sLabel = new TextSymbol().setColor(sColor); sLabel.font.setSize("14pt"); sLabel.font.setFamily("arial"); //this is the very least of what should be set within the JSON var json = { "labelExpressionInfo": {"value": "{YourDesiredFieldName}"} }; //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array) var labelClass = new LabelClass(json); labelClass.symbol = sLabel; // symbol also can be set in LabelClass' json featureLayer.setLabelingInfo([ labelClass ]); //end changes //change default symbol if desired. Comment this out and the layer will draw with the default symbology changeRenderer(featureLayer); fullExtent = fullExtent ? fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent; layers.push(featureLayer); }); map.addLayers(layers); map.setExtent(fullExtent.expand(1.25), true); dom.byId('upload-status').innerHTML = ""; } function changeRenderer (layer) { //change the default symbol for the feature collection for polygons and points var symbol = null; switch (layer.geometryType) { case 'esriGeometryPoint': symbol = new PictureMarkerSymbol({ 'angle': 0, 'xoffset': 0, 'yoffset': 0, 'type': 'esriPMS', 'url': 'https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 'contentType': 'image/png', 'width': 20, 'height': 20 }); break; case 'esriGeometryPolygon': symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25])); break; } if (symbol) { layer.setRenderer(new SimpleRenderer(symbol)); } } }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;"> <div data-dojo-type="dijit/layout/ContentPane" id="rightPane" data-dojo-props="region:'right'"> <div style='padding-left:4px;'> <p> Add a zipped shapefile to the map.</p><p>Visit the <a target='_blank' href="https://doc.arcgis.com/en/arcgis-online/reference/shapefiles.htm">Shapefiles</a> help topic for information and limitations.</p> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div class="field"> <label class="file-upload"> <span><strong>Add File</strong></span> <input type="file" name="file" id="inFile" /> </label> </div> </form> <span class="file-upload-status" style="opacity:1;" id="upload-status"></span> <div id="fileInfo"> </div> </div> </div> <div id="mapCanvas" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> </div> </body> </html>

Re: Labels for dynamic layer

shilpakaramar — Thu, 13 May 2021 04:13:33 GMT

Hi @RobertScheitlin__GISP , Thanks for the reply

It seems the solution you provided is for feature layers.. But I want to display labels of shape file in dynamicmapservice. My code is as follows:

EsriDynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer( MapserviceURL, { 'id': "mapId" }); $scope.map.addLayer(EsriDynamicLayer); EsriDynamicLayer.on("load", initOperationalLayer); function initOperationalLayer() { var dynamicLayerInfos = []; var options = []; var dataSource = new esri.layers.TableDataSource(); var layerSource = new esri.layers.LayerDataSource(); var dynamicLayerInfo = new esri.layers.DynamicLayerInfo(); var drawingOptions = new esri.layers.LayerDrawingOptions(); dataSource.workspaceId = workspaceId dataSource.dataSourceName = layerSource.dataSource = dataSource; dynamicLayerInfo.id = 1; dynamicLayerInfo.name = shapefileName; dynamicLayerInfo.source = layerSource; dynamicLayerInfo.defaultVisibility = true; dynamicLayerInfos.push(dynamicLayerInfo); var labelClass = new LabelClass({ labelExpression: "[label]", //i want to show a label field which is in shapefile symbol: new TextSymbol(), labelPlacement: "above-center", minScale: 840000 }); drawingOptions.labelingInfo = [labelClass]; drawingOptions.showLabels = true; options[1] = drawingOptions; EsriDynamicLayer.setDynamicLayerInfos(dynamicLayerInfos, true); EsriDynamicLayer.setLayerDrawingOptions(options); }

can you help me out in this?

Re: Labels for dynamic layer

RobertScheitlin__GISP — Thu, 13 May 2021 13:03:29 GMT

@shilpakaramar , You had an image that showed the add shapefile sample, so that is why I provided that code to you. So if you are working with ArcGISDynamicMapServiceLayer then the original solution code provided on this thread is what you need. There are several this to pay attention to. When working with ArcGISDynamicMapServiceLayer you use "labelExpression" verses "labelExpressionInfo" that only works with FeatureLayers. Next is that when specifying the field name to label you use curly brackets around the field name.

var json = { "labelExpression": {"value": "{label}"} //notice the curly brackets around the field name. }; var labelClass = new LabelClass(json);

Re: Labels for dynamic layer

shilpakaramar — Thu, 13 May 2021 13:58:42 GMT

@RobertScheitlin__GISP

I tried like you suggested but also labels are not showing in map.

Re: Labels for dynamic layer

RobertScheitlin__GISP — Thu, 13 May 2021 14:46:58 GMT

var options = []; var json = { "labelExpression": "{label}" } var labelClass = new LabelClass(json); drawingOptions.labelingInfo = [labelClass]; option.push(drawingOptions); EsriDynamicLayer.setLayerDrawingOptions(options);

Re: Labels for dynamic layer

shilpakaramar — Thu, 13 May 2021 15:41:05 GMT

I tried this as well but labels were not visible

var options = []; var json = { "labelExpression": "{label}" } var labelClass = new LabelClass(json); drawingOptions.labelingInfo = [labelClass]; drawingOptions.showLables = true; options.push(drawingOptions); EsriDynamicLayer.setLayerDrawingOptions(options);

Re: Labels for dynamic layer

shilpakaramar — Tue, 18 May 2021 06:12:41 GMT

@RobertScheitlin__GISP any solution for this?

Re: Labels for dynamic layer

RobertScheitlin__GISP — Tue, 18 May 2021 10:07:47 GMT

@shilpakaramar No I am out of suggestions.