Select to view content in your preferred language

Drawing centroid for polygons

745
1
05-06-2021 07:35 AM
nabsabt
Emerging Contributor

Hi! My task is to draw the centroid of each polygon (in this case the counties of California; later I need to add symbol for them too, but that's not the problem). I've been looking for solution for days, but none seems to be working. I've used the following one, but still runs on error. Is there any way to do it, which would work for me (or to correct this one)?

const map = new Map({
    basemap: "arcgis-topographic"
  });
  const populationRenderer = {
        type: "simple",
        symbol: {
          color: "#BA55D3",
          type: "simple-fill",
          style: "solid"
        },
        visualVariables: [{
          type: "opacity",
          field: "POPULATION",
          stops: [
            { value: 50000opacity: 0.15 },
            { value: 150000opacity: 0.25 },
            { value: 250000opacity: 0.35},
            { value: 400000opacity: 0.45},
            { value: 800000opacity: 0.55},
            { value: 1200000opacity: 0.70},
            { value: 1800000opacity: 0.80},
            { value: 3000000opacity: 0.95}
          ]
        }]

    }

  const centerSymbol = {
    type: "simple-marker",
    style: "square",
    color: "blue",
    size: "8px"
  };
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-105.80543,38.02700],
    zoom: 5
  });
  const popup = {
    "title" : "Popup for age classes",
    "content" : "<b>From age 10 to 14: </b> {AGE_10_14}<br><b>From age 15 to 19: </b> {AGE_15_19}<br><b>From age 20 to 24: </b> {AGE_20_24}<br><b>From age 25 to 34: </b>{AGE_25_34}<br> <b>From age 35 to 44: </b>{AGE_35_44}<br> <b>From age 45 to 54: </b>{AGE_45_54}<br><b>From age 55 to 64: </b> {AGE_55_64}<br><b>From age 65 to 74: </b> {AGE_65_74}<br><b>From age 75 to 84: </b> {AGE_75_84}<br><b>Above age 85: </b> {AGE_85_up}"
  }
  USACounties = new FeatureLayer({
    definitionExpression: "STATE_NAME = 'California'",
    renderer: populationRenderer,
    outFields: ["AGE_10_14""AGE_15_19""AGE_20_24""AGE_25_34""AGE_35_44""AGE_45_54""AGE_55_64""AGE_65_74""AGE_75_84""AGE_85_UP"],
    popupTemplate: popup
  });

  USACounties.load("graphic-add"function(graphic) {
        var centroid = graphic.graphic.geometry.getCentroid();
        //set geometry for the graphic
        graphic.graphic.setGeometry(centroid);
        //set symbol for the graphic
        graphic.graphic.setSymbol(centerSymbol);
});

  map.add(USACounties0);
      });
0 Kudos
1 Reply
ReneRubalcava
Honored Contributor

You can apply a renderer to a polygon layer to display them as points.

const polygonAsPointRenderer = {
    type: "simple",
    symbol: { type: "simple-marker", color: [247, 53, 53, 1] }
}

You can apply visual variables or use unique value renderer to meet your visualization needs too.