Labeling graphics

deleted-user-yA_w_FC9FKe5 · ‎05-28-2014

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,

TimWitt · ‎05-28-2014

Michael,

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

This should be able to help you with labeling.

Tim

JakeSkinner · ‎05-28-2014

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>

deleted-user-yA_w_FC9FKe5 · ‎05-28-2014

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?

JakeSkinner · ‎05-29-2014

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>