topic Re: Labeling features in ArcGIS JavaScript Maps SDK Questions

Labeling features

AmalHorchi — Sat, 11 Dec 2021 21:18:57 GMT


Hi , 
I want to add labels for my features by attribute "NOM" .


<!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> Population Totale </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

  <style>
    #HomeButton {
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 2;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

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

    #feedback {
      position: absolute;
      height: 390px;
      font-family: arial;
      margin: 5px;
      padding: 10px;
      z-index: 40;
      background: #fff;
      color: #444;
      width: 300px;
      right: 10px;
      top: 10px;
      box-shadow: 0 0 5px #888;
    }

    #legendWrapper {
      padding: 10px 0 0 0;
    }

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

    h3 {
      margin: 0 0 5px 0;
      border-bottom: 1px solid #444;
    }
  </style>
  <script src="http://js.arcgis.com/3.16/"></script>
  <script>
    //global vars
    var layer, legend;
    require([
      "esri/map",
      "esri/dijit/BasemapGallery",
      "esri/dijit/HomeButton",
      "esri/dijit/PopupTemplate",
      "esri/layers/FeatureLayer",
      "esri/dijit/Legend",
      "esri/renderers/smartMapping",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/dom-construct",
      "dojo/data/ItemFileReadStore",
      "dijit/form/FilteringSelect",
      "esri/dijit/Print",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map,
      BasemapGallery,
      HomeButton,
      PopupTemplate,
      FeatureLayer,
      Legend,
      smartMapping,
      array,
      dom,
      domConstruct,
      ItemFileReadStore,
      FilteringSelect,
      Print,
      parser
    ) {
      parser.parse();

      var mapOptions = {
        basemap: "topo",
        center: [11, 34],
        zoom: 6,
        slider: true
      };

      var map = new Map("map", mapOptions);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");

      basemapGallery.startup();
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error: ", msg);
      });

      // map.enableKeyboardNavigation();
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      var printer = new Print({
        map: map,
        url: "http://41.231.36.249/sirgeo/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
        templates: [{
          label: "Map",
          format: "PDF",
          layout: "MAP_ONLY",
          exportOptions: {
            width: 500,
            height: 400,
            dpi: 96
          }
        }, {
          label: "Layout",
          format: "PDF",
          layout: "A4 Portrait",
          layoutOptions: {
            titleText: "My Print",
            authorText: "esri",
            copyrightText: "My Company",
            scalebarUnit: "Miles",
          }
        }]
      }, dom.byId("printButton"));

      printer.startup();

      var fieldName = "PopTot2004";

      // the counties map service uses the actual field name as the field alias
      // set up an object to use as a lookup table to work with user friendly field names

      var fields = {
        "PopTot2004": "Population Totale (2004)",
        "PopTot2005": "Population Totale (2005)",
        "PopTot2006": "Population Totale (2006)",
        "PopTot2007": "Population Totale (2007)",
        "PopTot2008": "Population Totale (2008)",
        "PopTot2009": "Population Totale (2009)",
        "PopTot2010": "Population Totale (2010)",
        "PopTot2011": "Population Totale (2011)",
        "PopTot2012": "Population Totale (2012)",
        "PopTot2013": "Population Totale (2013)",
        "PopTot2014": "Population Totale (2014)",
        "NOM": "NOM"
      };
      var outFields = ["PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007", "PopTot2008", "PopTot2009", "PopTot2010", "PopTot2011", "PopTot2012", "PopTot2013", "PopTot2014", "NOM"];

      //create popup
      var popupTemplate = new PopupTemplate({
        title: "{NOM}",
        fieldInfos: [{
          "fieldName": fieldName,
          "label": fields[fieldName],
          "visible": true,
          "format": {
            places: 0,
            digitSeparator: true
          }
        }],
        showAttachments: true
      });

      layer = new FeatureLayer("http://41.231.36.249/sirgeo/rest/services/SIR-Gouv/demographie_gouv/MapServer/0", {
        "id": "Chad",
        "infoTemplate": popupTemplate,
        "mode": FeatureLayer.MODE_SNAPSHOT,
        "outFields": outFields,
        "opacity": 0.8
      });

      //only working with Washington state
      //layer.setDefinitionExpression("Region='NO'");
      map.addLayer(layer);

      layer.on("load", function() {
        createRenderer(fieldName);
      });

      function createRenderer(field) {
        //smart mapping functionality begins
        smartMapping.createClassedColorRenderer({
          layer: layer,
          field: field,
          basemap: map.getBasemap(),
          classificationMethod: "quantile",
          numClasses: 3,
          //ClassBreakInfo(null, minValue:100000, maxValue:250000),
          showOthers: false
        }).then(function(response) {
          layer.setRenderer(response.renderer);
          layer.redraw();
          createLegend(map, layer, field);
        });
      }

      //this function gets called when fields are selected to render
      function updateAttribute(ch) {
        map.infoWindow.hide();

        var popupTemplateUpdated = new PopupTemplate({
          title: "{NOM}",
          fieldInfos: [{
            "fieldName": ch,
            "label": fields[ch],
            "visible": true,
            "format": {
              places: 0,
              digitSeparator: true
            }
          }],
          showAttachments: true
        });
        layer.setInfoTemplate(popupTemplateUpdated);
        createRenderer(ch);
        layer.redraw();
        createLegend(map, layer, ch);
      }

      //Create a legend
      function createLegend(map, layer, field) {
        //If applicable, destroy previous legend
        if (legend) {
          legend.destroy();
          domConstruct.destroy(dom.byId("legendDiv"));
        }

        // create a new div for the legend
        var legendDiv = domConstruct.create("div", {
          id: "legendDiv"
        }, dom.byId("legendWrapper"));

        legend = new Legend({
          map: map,
          layerInfos: [{
            layer: layer,
            title: "Indicateur: "
          }]
        }, legendDiv);
        legend.startup();
      }

      // create a store and a filtering select for the county layer's fields
      var fieldNames, fieldStore, fieldSelect;
      fieldNames = {
        "identifier": "value",
        "label": "name",
        "items": []
      };
      array.forEach(outFields, function(f) {
        if (array.indexOf(f.split("_"), "NOM") == -1) { // exclude attrs that contain "NAME"
          fieldNames.items.push({
            "name": fields[f],
            "value": f
          });
        }
      });

      fieldStore = new ItemFileReadStore({
        data: fieldNames
      });

      fieldSelect = new FilteringSelect({
        displayedValue: fieldNames.items[0].name,
        value: fieldNames.items[0].value,
        name: "fieldsFS",
        required: false,
        store: fieldStore,
        searchAttr: "name",
        style: {
          "width": "290px",
          "fontSize": "12pt",
          "color": "#444"
        }
      }, domConstruct.create("div", null, dom.byId("fieldWrapper")));
      fieldSelect.on("change", updateAttribute);
    });
  </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">
        <h3>Population Totale(milliers habitants)</h3>
        <div id="info">
          Sélectionnez une année pour une visualisation cartographiqe .
        </div>
        <div id="legendWrapper"></div>
        <div id="fieldWrapper">
          Veuillez choisir l'année
        </div>
        <div id="printButton"></div>
      </div>
    </div>
  </div>
  <div id="HomeButton"></div>
  <div style="position:absolute; left:20px; top:150px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Fond de carte', closable:false, open:false">
      <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
        <div id="basemapGallery"></div>
      </div>
    </div>
  </div>
</body>

</html>

Re: Labeling features

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:19:02 GMT

Amal,

Here is your code with labeling added.

<!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> Population Totale </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

  <style>
    #HomeButton {
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 2;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

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

    #feedback {
      position: absolute;
      height: 390px;
      font-family: arial;
      margin: 5px;
      padding: 10px;
      z-index: 40;
      background: #fff;
      color: #444;
      width: 300px;
      right: 10px;
      top: 10px;
      box-shadow: 0 0 5px #888;
    }

    #legendWrapper {
      padding: 10px 0 0 0;
    }

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

    h3 {
      margin: 0 0 5px 0;
      border-bottom: 1px solid #444;
    }
  </style>
  <script src="http://js.arcgis.com/3.16/"></script>
  <script>
    //global vars
    var layer, legend;
    require([
      "esri/map",
      "esri/dijit/BasemapGallery",
      "esri/dijit/HomeButton",
      "esri/dijit/PopupTemplate",
      "esri/layers/FeatureLayer",
      "esri/dijit/Legend",
      "esri/renderers/smartMapping",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/dom-construct",
      "dojo/data/ItemFileReadStore",
      "dijit/form/FilteringSelect",
      "esri/dijit/Print",
      "esri/layers/LabelClass",
      "esri/symbols/TextSymbol",
      "esri/Color",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map,
      BasemapGallery,
      HomeButton,
      PopupTemplate,
      FeatureLayer,
      Legend,
      smartMapping,
      array,
      dom,
      domConstruct,
      ItemFileReadStore,
      FilteringSelect,
      Print,
      LabelClass,
      TextSymbol,
      Color,
      parser
    ) {
      parser.parse();

      var mapOptions = {
        basemap: "topo",
        center: [11, 34],
        zoom: 6,
        slider: true,
        showLabels : true //very important that this must be set to true!
      };

      var map = new Map("map", mapOptions);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");

      basemapGallery.startup();
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error: ", msg);
      });

      // map.enableKeyboardNavigation();
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      var printer = new Print({
        map: map,
        url: "http://41.231.36.249/sirgeo/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
        templates: [{
          label: "Map",
          format: "PDF",
          layout: "MAP_ONLY",
          exportOptions: {
            width: 500,
            height: 400,
            dpi: 96
          }
        }, {
          label: "Layout",
          format: "PDF",
          layout: "A4 Portrait",
          layoutOptions: {
            titleText: "My Print",
            authorText: "esri",
            copyrightText: "My Company",
            scalebarUnit: "Miles",
          }
        }]
      }, dom.byId("printButton"));

      printer.startup();

      var fieldName = "PopTot2004";

      // the counties map service uses the actual field name as the field alias
      // set up an object to use as a lookup table to work with user friendly field names

      var fields = {
        "PopTot2004": "Population Totale (2004)",
        "PopTot2005": "Population Totale (2005)",
        "PopTot2006": "Population Totale (2006)",
        "PopTot2007": "Population Totale (2007)",
        "PopTot2008": "Population Totale (2008)",
        "PopTot2009": "Population Totale (2009)",
        "PopTot2010": "Population Totale (2010)",
        "PopTot2011": "Population Totale (2011)",
        "PopTot2012": "Population Totale (2012)",
        "PopTot2013": "Population Totale (2013)",
        "PopTot2014": "Population Totale (2014)",
        "NOM": "NOM"
      };
      var outFields = ["PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007", "PopTot2008", "PopTot2009", "PopTot2010", "PopTot2011", "PopTot2012", "PopTot2013", "PopTot2014", "NOM"];

      //create popup
      var popupTemplate = new PopupTemplate({
        title: "{NOM}",
        fieldInfos: [{
          "fieldName": fieldName,
          "label": fields[fieldName],
          "visible": true,
          "format": {
            places: 0,
            digitSeparator: true
          }
        }],
        showAttachments: true
      });

      layer = new FeatureLayer("http://41.231.36.249/sirgeo/rest/services/SIR-Gouv/demographie_gouv/MapServer/0", {
        "id": "Chad",
        "infoTemplate": popupTemplate,
        "mode": FeatureLayer.MODE_SNAPSHOT,
        "outFields": outFields,
        "opacity": 0.8
      });

      // create a text symbol to define the style of labels
      var fLabel = new TextSymbol().setColor(new Color("#666"));
      fLabel.font.setSize("14pt");
      fLabel.font.setFamily("arial");

      //this is the very least of what should be set within the JSON
      var json = {
        "labelExpressionInfo": {"value": "{NOM}"}
      };

      //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
      var labelClass = new LabelClass(json);
      labelClass.symbol = fLabel; // symbol also can be set in LabelClass' json
      layer.setLabelingInfo([labelClass]);

      map.addLayer(layer);

      layer.on("load", function() {
        createRenderer(fieldName);
      });

      function createRenderer(field) {
        //smart mapping functionality begins
        smartMapping.createClassedColorRenderer({
          layer: layer,
          field: field,
          basemap: map.getBasemap(),
          classificationMethod: "quantile",
          numClasses: 3,
          //ClassBreakInfo(null, minValue:100000, maxValue:250000),
          showOthers: false
        }).then(function(response) {
          layer.setRenderer(response.renderer);
          layer.redraw();
          createLegend(map, layer, field);
        });
      }

      //this function gets called when fields are selected to render
      function updateAttribute(ch) {
        map.infoWindow.hide();

        var popupTemplateUpdated = new PopupTemplate({
          title: "{NOM}",
          fieldInfos: [{
            "fieldName": ch,
            "label": fields[ch],
            "visible": true,
            "format": {
              places: 0,
              digitSeparator: true
            }
          }],
          showAttachments: true
        });
        layer.setInfoTemplate(popupTemplateUpdated);
        createRenderer(ch);
        layer.redraw();
        createLegend(map, layer, ch);
      }

      //Create a legend
      function createLegend(map, layer, field) {
        //If applicable, destroy previous legend
        if (legend) {
          legend.destroy();
          domConstruct.destroy(dom.byId("legendDiv"));
        }

        // create a new div for the legend
        var legendDiv = domConstruct.create("div", {
          id: "legendDiv"
        }, dom.byId("legendWrapper"));

        legend = new Legend({
          map: map,
          layerInfos: [{
            layer: layer,
            title: "Indicateur: "
          }]
        }, legendDiv);
        legend.startup();
      }

      // create a store and a filtering select for the county layer's fields
      var fieldNames, fieldStore, fieldSelect;
      fieldNames = {
        "identifier": "value",
        "label": "name",
        "items": []
      };
      array.forEach(outFields, function(f) {
        if (array.indexOf(f.split("_"), "NOM") == -1) { // exclude attrs that contain "NAME"
          fieldNames.items.push({
            "name": fields[f],
            "value": f
          });
        }
      });

      fieldStore = new ItemFileReadStore({
        data: fieldNames
      });

      fieldSelect = new FilteringSelect({
        displayedValue: fieldNames.items[0].name,
        value: fieldNames.items[0].value,
        name: "fieldsFS",
        required: false,
        store: fieldStore,
        searchAttr: "name",
        style: {
          "width": "290px",
          "fontSize": "12pt",
          "color": "#444"
        }
      }, domConstruct.create("div", null, dom.byId("fieldWrapper")));
      fieldSelect.on("change", updateAttribute);
    });
  </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">
        <h3>Population Totale(milliers habitants)</h3>
        <div id="info">
          Sélectionnez une année pour une visualisation cartographiqe .
        </div>
        <div id="legendWrapper"></div>
        <div id="fieldWrapper">
          Veuillez choisir l'année
        </div>
        <div id="printButton"></div>
      </div>
    </div>
  </div>
  <div id="HomeButton"></div>
  <div style="position:absolute; left:20px; top:150px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Fond de carte', closable:false, open:false">
      <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
        <div id="basemapGallery"></div>
      </div>
    </div>
  </div>
</body>

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

Re: Labeling features

AmalHorchi — Fri, 02 Mar 2018 14:08:47 GMT

Hi Robert ,

thank you so much .