nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Labeling graphics

deleted-user-yA_w_FC9FKe5

How could you take this example below and and allow the user the ability to label the points by "CITY_NAME". I would like it to be something that could be controlled by a dojo checkbox or toggle button. How can I do this? I've seen examples but I can't seem to find them when I want to try it ;-(

http://jsbin.com/yazoto/1/

Can anyone take a quick look at this and maybe edit it to do this? I've set everything up on a sample that anyone can use.

Thanks,

Find more posts tagged with

Accepted answers

All comments

I would suggest creating a ToggleButton. When clicked, a graphicsLayer is created to store the Text Symbol graphics. When clicked again, it removes the graphicsLayer from the application. Here is an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var findTask, findParams;
      var map, center, zoom;
      var grid, store;
      var textLayer;
    
      require([
        "esri/map",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/Font", 
        "esri/symbols/TextSymbol",
        
        "dijit/form/ToggleButton",  
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
        "dojo/_base/array",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, Graphic, GraphicsLayer, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol,
        ToggleButton, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser, array
      ) {              
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        //registry.byId("showLabels").on("click", doShowLabels);
        
        center = [-83.266, 42.568];
        zoom = 4;
        map = new Map("map", {
          basemap: "gray",
          center: center,
          zoom: zoom
        });

        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/");

        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["areaname","st","pop2000"];
          findParams.outSpatialReference = map.spatialReference;
        });                  
        
        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("cityName").value;
          findTask.execute(findParams, showResults);
        }
        
        function doShowLabels(){
          findParams.searchText = dom.byId("cityName").value;
          findTask.execute(findParams, showLabels);
        }

        function showResults(results) {             
          map.graphics.clear();
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0, 1]), 1), new Color([255, 0, 0, 1])
          );

          //create array of attributes
          var items = arrayUtils.map(results, function (result) {          
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);              
            return result.feature.attributes;
          });

          //Create data object to be used in store
          var data = {
            identifier : "OBJECTID", //This field needs to have unique values
            label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }
        
        function showLabels(results){
          var items = arrayUtils.map(results, function (result) {           
            var geom = result.feature.geometry;          
            var displayText = result.feature.attributes.AREANAME;
              var font = new Font(
                "16pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
             
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
              );
              textSymbol.setOffset(0,18);
              textLayer = new GraphicsLayer();
              textLayer.add(new Graphic(geom, textSymbol));
              map.addLayer(textLayer);
              //map.graphics.add(new Graphic(geom, textSymbol));            
          });
        }

        //Zoom to the parcel when the user clicks a row
        function onRowClickHandler(evt) {         
          var clickedCityName = evt.grid.getItem(evt.rowIndex).OBJECTID;
          var selectedCityName = arrayUtils.filter(map.graphics.graphics, function(graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedCityName);
          });
          if (selectedCityName.length) {
            var center = [selectedCityName[0].geometry.getLongitude(), selectedCityName[0].geometry.getLatitude()];
            var zoom = 15;
            map.centerAndZoom(center, zoom);
          }
        }
        
        new ToggleButton({
          showLabel: true,
          onChange: function(val){         
            if(val == true){
              findTask.execute(findParams, showLabels);
              this.set('label', 'Hide Labels');
           }
           else{                                    
            textLayer.clear();                   
            this.set('label', 'Show Labels');
           }
          },
          label: "Show Labels"
        }, "showLabels");
      });      
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      City: <input type="text" id="cityName" size="60" value="Redlands" />      
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button>
          <button id="showLabels"></button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
        <th field="OBJECTID">ObjectID</th>
          <th field="AREANAME">City</th>
          <th field="ST" >State</th>
          <th field="POP2000">Population</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>

deleted-user-yA_w_FC9FKe5

Another way you can do this is by adding a text symbol to a graphic. Below is an example:

Thanks for the help. How would you hide the labels?

Another way you can do this is by adding a text symbol to a graphic. Below is an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require([
        "esri/map",
        "esri/graphic",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/Font", 
        "esri/symbols/TextSymbol",
          
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, Graphic, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {      
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;
        var labels = [];
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        registry.byId("showLabels").on("click", doShowLabels);
        
        center = [-83.266, 42.568];
        zoom = 4;
        map = new esri.Map("map", {
          basemap: "gray",
          center: center,
          zoom: zoom
        });

        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/");

        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["areaname","st","pop2000"];
          findParams.outSpatialReference = map.spatialReference;
        });                  
        
        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("cityName").value;
          findTask.execute(findParams, showResults);
        }
        
        function doShowLabels(){
          findParams.searchText = dom.byId("cityName").value;
          findTask.execute(findParams, showLabels);
        }

        function showResults(results) {             
          map.graphics.clear();
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0, 1]), 1), new Color([255, 0, 0, 1])
          );

          //create array of attributes
          var items = arrayUtils.map(results, function (result) {          
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);              
            return result.feature.attributes;
          });

          //Create data object to be used in store
          var data = {
            identifier : "OBJECTID", //This field needs to have unique values
            label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }
        
        function showLabels(results){
          var items = arrayUtils.map(results, function (result) {           
            var geom = result.feature.geometry;          
            var displayText = result.feature.attributes.AREANAME;
              var font = new Font(
                "16pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
             
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
              );
              textSymbol.setOffset(0,18);
              map.graphics.add(new Graphic(geom, textSymbol));
            
            //return result.feature.attributes;
          });
        }

        //Zoom to the parcel when the user clicks a row
        function onRowClickHandler(evt) {         
          var clickedCityName = evt.grid.getItem(evt.rowIndex).OBJECTID;
          var selectedCityName = arrayUtils.filter(map.graphics.graphics, function(graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedCityName);
          });
          if (selectedCityName.length) {
            var center = [selectedCityName[0].geometry.getLongitude(), selectedCityName[0].geometry.getLatitude()];
            var zoom = 15;
            map.centerAndZoom(center, zoom);
          }
        }
      });      
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      City: <input type="text" id="cityName" size="60" value="Philadelphia" />      
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button>
          <button id="showLabels" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Show Labels       
          </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
        <th field="OBJECTID">ObjectID</th>
          <th field="AREANAME">City</th>
          <th field="ST" >State</th>
          <th field="POP2000">Population</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>

Michael,

I would recommend not writing it in Legacy but in AMD instead.

This should be able to help you with labeling.

Tim

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.