Polygon's label not shown

504
1
09-20-2017 01:32 PM
AzariaszTrzciński
New Contributor III

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Reply
ThomasSolow
Regular Contributor

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