topic Re: TextSymbol Location in ArcGIS JavaScript Maps SDK Questions

TextSymbol Location

AllenHoward — Sat, 11 Dec 2021 06:22:15 GMT

Please forgive me for what is probably a totally newbie question, but the programmer who started this project left and I am really under the gun. I have looked at every sample I could find, and have searched the forum to no avail.

We are able to pull up all of the properties within a (user-defined) radius of the center of our subject property.

What I need to do is to place text near the center of each of the properties that fall within the radius. (HCAD_NUM, Site Address, etc. from the ShapeFile)

I see how to get the extents for the map, but how to determine the location and size of the individual plots escapes me.

I would also like to determine the width of the individual plots so I can adjust the fonts size and, perhaps text rotation so the text doesn't leak over onto other properties. (Desired Text is shown in red)

My failed attempt to add text is at the very bottom.

require([
  "esri/map",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/QueryTask",
  "esri/tasks/query",
  "dojo/dom", 
  "dojo/on",
  "esri/layers/FeatureLayer",
  "esri/Color",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/geometry/Extent",
  "dojo/parser",
  "esri/geometry/Circle",
 "esri/units",
  "esri/symbols/Font",
  "esri/symbols/TextSymbol",
  "esri/layers/LabelClass",
      "esri/config",
      "esri/graphic",
      "esri/tasks/GeometryService",
      "esri/tasks/BufferParameters",
      "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol",


  "dojo/domReady!"],

  function (Map, ArcGISDynamicMapServiceLayer, QueryTask,
  Query, dom, on, FeatureLayer, Color, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Extent, parser, Circle, Units, Font, TextSymbol)
  {

    parser.parse();

    //map = new Map("map");


    map = new Map("map", {
        //extent: bbox,
        showLabels: true //very important that this must be set to true!   
    });

    var baseLayer = new ArcGISDynamicMapServiceLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer");
    map.addLayer(baseLayer);

    var countyLayer = new FeatureLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/0");
    var outline = new SimpleLineSymbol("solid", new Color([255, 255, 255, 1]), 2);
    var fill = new SimpleFillSymbol("solid", outline, new Color([255, 255, 0, 0.5]));
    countyLayer.setRenderer(new SimpleRenderer(fill));
    map.addLayer(countyLayer);


     //Query the parcels layer for the subject property
    queryTask = new QueryTask("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/1");
    query = new Query();
    query.returnGeometry = true;
    query.outFields = ["HCAD_NUM", "LocAddr"];


    //Set up a callback for when the get details button is pressed.
    function execute()
    {
      query.where = "HCAD_NUM = '" + dom.byId("hcad_num").value + "'";
      queryTask.execute(query, foundSubject);
    }
    on(dom.byId("execute"), "click", execute);

    //Set up a query for
    function foundSubject(results)
    {
        var f = results.features;
        //new Circle(center, options?) https://developers.arcgis.com/javascript/jsapi/circle-amd.html
        circle = new Circle({ center: f[0].geometry.getExtent().getCenter(), radius: dom.byId("distance").value, radiusUnit: Units.FEET });

        //Execute a new query that searches for all properties around subject
        var areaQuery = new Query();
        areaQuery.geometry = circle.getExtent();
        areaQuery.returnGeometry = true;
        areaQuery.outFields = ["HCAD_NUM", "LocAddr"];
        queryTask.execute(areaQuery, showResults);
    }


    function showResults(results)
    {
      var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
      new Color([0, 0, 0]), 1.0), new Color([180, 180, 180, 1])
      );

      map.graphics.clear();
      var resultFeatures = results.features;

        //Zoom to parcel
      var ex = esri.graphicsExtent(resultFeatures);
      map.setExtent(ex);

      for (var i = 0, il = resultFeatures.length; i < il; i++) {
          var graphic = resultFeatures;

          graphic.setSymbol(symbol);

          var featureAttributes = graphic.attributes;
          var resultItems = [];
          for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
          }
          resultItems.push("<br>");       


          map.graphics.add(graphic);

          var textSymbol = new TextSymbol(featureAttributes[attr]);

          map.graphics.add(textSymbol);

      }

      dom.byId("info").innerHTML = resultItems.join("");
    }
});

Re: TextSymbol Location

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:22:17 GMT

Allen,

Sounds like that you are looking for is the extent of the graphic you want to label. Using the extent would give you the centerpoint to label on and the width and height of the bounding extent of the graphic.

So in your for loop of the results you would do

var ext = graphic.geometry.getExtent();
var gWidth = ext.getWidth();
var gHeight = ext.getHeight();
var gCenter = ext.getCenter();

Re: TextSymbol Location

AllenHoward — Fri, 05 Feb 2016 20:19:18 GMT

Thanks, Robert.

I am sorry I took so long. I have been wrestling with this thing since you wrote, and was hoping to have an intelligent reply... But no luck.

This has been a very humbling experience to say the least.

I was able to use your suggestion without error, and was able to place "Hello World" all around the map, but I can't get the parcel outlines and labels to show up at the same time.

Still wrestling.

Re: TextSymbol Location

RobertScheitlin__GISP — Fri, 05 Feb 2016 20:28:22 GMT

Allen,

Can you provide your full html file for me to go over?

Re: TextSymbol Location

AllenHoward — Sat, 11 Dec 2021 06:22:20 GMT

It is an aspx page, but should run as a simple HTML

Thank you so much! The county doesn't provide labels in the Shape File, so I have to "wing it" on the text.

I am hoping to include the HCAD_NUM from the query instead of "Hello, world" as the text, but haven't had any luck with that, either.

P.S. if you comment out the "graphic.setSymbol(AcctText);" you can see the outlines of the parcels.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="map.aspx.vb" Inherits="map" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <link href="Styles/Tundra.css" rel="stylesheet" />
    <link href="Styles/ESRI.css" rel="stylesheet" />

    <script src="https://js.arcgis.com/3.15/"></script>
    <script>

        //Avoids cross site scripting warnings
        require(["esri/config"], function (esriConfig) {

            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com");
            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:8080");
            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:80");
            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:443");
            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:6080");
            esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:6443");

        });

        require([
          "esri/map",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "dojo/dom",
          "dojo/on",
          "esri/layers/FeatureLayer",
          "esri/Color",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/renderers/SimpleRenderer",
          "esri/geometry/Extent",
          "dojo/parser",
          "esri/geometry/Circle",
          "esri/units",
          "esri/symbols/Font",
          "esri/symbols/TextSymbol",
          "esri/config",
          "esri/tasks/GeometryService",
          "esri/tasks/BufferParameters",
          "esri/toolbars/draw",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/graphic",
          "esri/geometry/Point",
          "esri/layers/LabelClass",
          "dojo/domReady!"],

          function (Map, ArcGISDynamicMapServiceLayer, QueryTask,
          Query, dom, on, FeatureLayer, Color, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Extent, parser, Circle, Units, Font, TextSymbol, Graphic, Point, LabelClass) {

              parser.parse();

              map = new Map("map", {
                  showLabels: true
              });

              var baseLayer = new ArcGISDynamicMapServiceLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer");
              map.addLayer(baseLayer);

              var countyLayer = new FeatureLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/0");
              var outline = new SimpleLineSymbol("solid", new Color([255, 255, 255, 1]), 2);
              var fill = new SimpleFillSymbol("solid", outline, new Color([255, 255, 0, 0.5]));
              countyLayer.setRenderer(new SimpleRenderer(fill));
              map.addLayer(countyLayer);


              //Query the parcels layer for the subject property
              queryTask = new QueryTask("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/1");
              query = new Query();
              query.returnGeometry = true;
              query.outFields = ["HCAD_NUM", "LocAddr"];


              //Set up a callback for when the get details button is pressed.
              function execute() {
                  query.where = "HCAD_NUM = '" + dom.byId("hcad_num").value + "'";
                  queryTask.execute(query, foundSubject);
              }
              on(dom.byId("execute"), "click", execute);

              //Set up a query for
              function foundSubject(results) {
                  var f = results.features;
                  //new Circle(center, options?) https://developers.arcgis.com/javascript/jsapi/circle-amd.html
                  circle = new Circle({ center: f[0].geometry.getExtent().getCenter(), radius: dom.byId("distance").value, radiusUnit: Units.FEET });

                  //Execute a new query that searches for all properties around subject
                  var areaQuery = new Query();
                  areaQuery.geometry = circle.getExtent();
                  areaQuery.returnGeometry = true;
                  areaQuery.outFields = ["HCAD_NUM", "LocAddr"];
                  queryTask.execute(areaQuery, showResults);
              }


              function showResults(results) {
                  var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                  new Color([0, 0, 0]), 1.0), new Color([180, 180, 180, 1])
                  );

                  map.graphics.clear();
                  var resultFeatures = results.features;

                  //Zoom to parcel
                  var ex = esri.graphicsExtent(resultFeatures);

                  map.setExtent(ex);

                  var font = new Font();
                  font.setSize("7pt");
                  font.setWeight(Font.WEIGHT_BOLD);

                  var Textcolor = new Color();
                  Textcolor.setColor([255, 0, 0]);

                  for (var i = 0, il = resultFeatures.length; i < il; i++) {
                      var graphic = resultFeatures;

                      //var ext = graphic.geometry.getExtent();
                      //var gWidth = ext.getWidth();
                      //var gHeight = ext.getHeight();
                      //var gCenter = ext.getCenter();

                      var AcctText = new TextSymbol();
                      AcctText.setFont(font);
                      AcctText.setColor(Textcolor);
                      AcctText.setText("Hello, World");

                      graphic.setSymbol(symbol);
                      graphic.setSymbol(AcctText);

                      var featureAttributes = graphic.attributes;
                      var resultItems = [];
                      for (var attr in featureAttributes) {
                          resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
                      }
                      resultItems.push("<br>");

                      map.graphics.add(graphic);


                  }

                  dom.byId("info").innerHTML = resultItems.join("");
              }
          });


    </script>
    <title>CTN GIS</title>

    <style type="text/css">
        #distance {
            width: 75px;
        }
    </style>

</head>
<body class="tundra">
    Account: <input type="text" id="hcad_num" value="1122030000018" /> Radius: <input type="text" id="distance" value="500" />
    <input id="execute" type="button" value="Show Map" />
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">


      </div>
<br /><br />
<div>
<div id="map"  
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">
</div>
</div>
<br /><br />
</body>
</html>

Re: TextSymbol Location

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:22:23 GMT

Allen,

Maybe this will get you started:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

  <link rel="stylesheet" href="https://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    //Avoids cross site scripting warnings
    require(["esri/config"], function (esriConfig) {

      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com");
      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:8080");
      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:80");
      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:443");
      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:6080");
      esriConfig.defaults.io.corsEnabledServers.push("arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com:6443");

    });
    var map;

    require([
          "esri/map",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "dojo/dom",
          "dojo/on",
          "esri/layers/FeatureLayer",
          "esri/Color",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/renderers/SimpleRenderer",
          "esri/geometry/Extent",
          "dojo/parser",
          "esri/geometry/Circle",
          "esri/units",
          "esri/symbols/Font",
          "esri/symbols/TextSymbol",
          "esri/config",
          "esri/tasks/GeometryService",
          "esri/tasks/BufferParameters",
          "esri/toolbars/draw",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/graphic",
          "esri/geometry/Point",
          "esri/layers/LabelClass",
          "dijit/layout/ContentPane",
          "dojo/domReady!"],

      function (Map, ArcGISDynamicMapServiceLayer, QueryTask,
        Query, dom, on, FeatureLayer, Color, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Extent, parser, Circle, Units, Font, TextSymbol,
        esriConfig, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol,
        Graphic, Point, LabelClass) {

        parser.parse();

        map = new Map("mapDiv", {
          showLabels: true
        });

        var baseLayer = new ArcGISDynamicMapServiceLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer");
        map.addLayer(baseLayer);

        var countyLayer = new FeatureLayer("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/0");
        var outline = new SimpleLineSymbol("solid", new Color([255, 255, 255, 1]), 2);
        var fill = new SimpleFillSymbol("solid", outline, new Color([255, 255, 0, 0.5]));
        countyLayer.setRenderer(new SimpleRenderer(fill));
        map.addLayer(countyLayer);


        //Query the parcels layer for the subject property
        queryTask = new QueryTask("https://arcgis-ctngis-1263207624.us-west-2.elb.amazonaws.com/arcgis/rest/services/HCAD/CADDataAndParcels/MapServer/1");
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["HCAD_NUM", "LocAddr"];


        //Set up a callback for when the get details button is pressed.
        function execute() {
          query.where = "HCAD_NUM = '" + dom.byId("hcad_num").value + "'";
          queryTask.execute(query, foundSubject);
        }
        on(dom.byId("execute"), "click", execute);

        //Set up a query for
        function foundSubject(results) {
          var f = results.features;
          //new Circle(center, options?) https://developers.arcgis.com/javascript/jsapi/circle-amd.html
          circle = new Circle({
            center: f[0].geometry.getExtent().getCenter(),
            radius: dom.byId("distance").value,
            radiusUnit: Units.FEET
          });

          //Execute a new query that searches for all properties around subject
          var areaQuery = new Query();
          areaQuery.geometry = circle.getExtent();
          areaQuery.returnGeometry = true;
          areaQuery.outFields = ["HCAD_NUM", "LocAddr"];
          queryTask.execute(areaQuery, showResults);
        }


        function showResults(results) {
          var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0, 0, 0]), 1.0), new Color([180, 180, 180, 1])
          );

          map.graphics.clear();
          var resultFeatures = results.features;

          //Zoom to parcel
          var ex = esri.graphicsExtent(resultFeatures);

          map.setExtent(ex);

          var font = new Font();
          font.setSize("7pt");
          font.setWeight(Font.WEIGHT_BOLD);

          var Textcolor = new Color();
          Textcolor.setColor([255, 0, 0]);

          for (var i = 0, il = resultFeatures.length; i < il; i++) {
            var graphic = resultFeatures;

            var ext = graphic.geometry.getExtent();
            //var gWidth = ext.getWidth();
            //var gHeight = ext.getHeight();
            var gCenter = ext.getCenter();

            var AcctText = new TextSymbol();
            AcctText.setFont(font);
            AcctText.setColor(Textcolor);
            AcctText.setText(graphic.attributes.HCAD_NUM);

            graphic.setSymbol(symbol);
            var gra = new Graphic(gCenter,AcctText)

            var featureAttributes = graphic.attributes;
            var resultItems = [];
            for (var attr in featureAttributes) {
              resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
            }
            resultItems.push("<br>");

            map.graphics.add(graphic);
            map.graphics.add(gra);
          }

          dom.byId("info").innerHTML = resultItems.join("");
        }
      });
  </script>
  <title>CTN GIS</title>

  <style type="text/css">
    #distance {
      width: 75px;
    }
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>

</head>

<body class="tundra">
  Account:
  <input type="text" id="hcad_num" value="1122030000018" /> Radius:
  <input type="text" id="distance" value="500" />
  <input id="execute" type="button" value="Show Map" />
  <br />
  <br />
  <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
  <br />
  <br />
  <div id="mapDiv"></div>
</body>

</html>

Re: TextSymbol Location

AllenHoward — Mon, 08 Feb 2016 17:04:30 GMT

You are a genius! I've been wrestling with this off and on since I sent it. Featurelayers, on and on... Thanks a million!

Re: TextSymbol Location

RobertScheitlin__GISP — Mon, 08 Feb 2016 17:10:39 GMT

Allen,

You are welcome. Don't forget to mark this question as answered.