Polygon's label not shown

AzariaszTrzciński · ‎09-20-2017

Hello, i'm trying add label to polygon. Something gone wrong and polygon's label doesn't show up. I took a example from: https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=util_label_point

Can anybody explain me where problem/ bug is?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Map test</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
 "esri/Map",
  "esri/views/MapView",
  "esri/layers/MapImageLayer",
  "esri/Graphic",
  "esri/tasks/GeometryService",
  "esri/geometry/Point",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/geometry/Polyline",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/Font",
  "esri/symbols/TextSymbol",
  "esri/geometry/Polygon",
  "esri/symbols/SimpleFillSymbol",
  "dojo/domReady!"
], function(Map, MapView, MapImageLayer,
      Graphic, GeometryService, 
       Point, SimpleMarkerSymbol,
      Polyline, SimpleLineSymbol, Font, TextSymbol,
      Polygon, SimpleFillSymbol
       
) {
var layer = new MapImageLayer({
     url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
});
var map = new Map({
     basemap: "topo"
});
geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var view = new MapView({
    container: "viewDiv",  
    map: map,
     center: [23.5454615,54.569436],
    zoom: 16
  });
  
   // Create a symbol for rendering the graphic
  var sym = new SimpleFillSymbol({
    color: [255, 0, 0, 0.1],
    outline: {
      color: [255, 0, 0],
      width: 1
    }
  }); 
   
var polygon1 = new Polygon({
rings: [
[23.545460, 54.569436],
[23.545463, 54.568627],
[23.545120, 54.568618],
[23.545109, 54.569436],
[23.545460, 54.569436]]});
var polygonGraphic1 = new Graphic({geometry: polygon1, symbol: sym});
view.graphics.add(polygonGraphic1);
var geometries=[polygonGraphic1];

//----- NOT WORKING ----------
geometryService.labelPoints(geometries, function(labelPoints) { // callback
     var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
     array.forEach(labelPoints, function(labelPoint) {
          var textSymbol = new TextSymbol("foo",  font, new Color([0, 0, 0]));
          var labelPointGraphic = new Graphic(labelPoint, textSymbol);
          view.graphics.add(labelPointGraphic);
     });
}); 
// ---------------------------

map.add(layer);
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ThomasSolow · ‎09-20-2017

There's a few errors in your code, mainly that labelPoints wants an array of polygon geometries, not an array of graphics, and you should also use .then after you call .labelPoints, like this: JS Bin - Collaborative JavaScript Debugging

You also need to pull in Font and Color if you're going to use those modules. But you generally don't need to pull that stuff in as the 4.XX API introduces autocasting.

Even after I fixed those issues, the callback passed in to labelPoints is not getting called. My feeling is that there's some minor issue that I'm overlooking: some of the code behind the GeometryService requests is a little finicky and has some inconsistencies with the rest of the codebase. I'll take a look tomorrow and see if I can find the exact place it's failing.

I would suggest that you could get away with using the centroid of each polygon to place labels. This won't be perfect (and presumably findLabels does a better a job) but you should usually be able to use the centroid, or even the center of the extent: JS Bin - Collaborative JavaScript Debugging