Drawing centroid for polygons

nabsabt · ‎05-06-2021

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: 50000, opacity: 0.15 },

{ value: 150000, opacity: 0.25 },

{ value: 250000, opacity: 0.35},

{ value: 400000, opacity: 0.45},

{ value: 800000, opacity: 0.55},

{ value: 1200000, opacity: 0.70},

{ value: 1800000, opacity: 0.80},

{ value: 3000000, opacity: 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" : "From age 10 to 14: {AGE_10_14} From age 15 to 19: {AGE_15_19} From age 20 to 24: {AGE_20_24} From age 25 to 34: {AGE_25_34} From age 35 to 44: {AGE_35_44} From age 45 to 54: {AGE_45_54} From age 55 to 64: {AGE_55_64} From age 65 to 74: {AGE_65_74} From age 75 to 84: {AGE_75_84} Above age 85: {AGE_85_up}"

}

USACounties = new FeatureLayer({

url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureSe...",

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(USACounties, 0);

});

ReneRubalcava · ‎05-06-2021

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.