Polygon features are not rendering properly in Feature layer

PrashantR — Fri, 25 Aug 2023 09:37:10 GMT

Arcgis JS API Version - 4.26.

I have created a feature layer which show polygon feature. The polygons are drawn on the map alright but when I zoom in little some weird boxes starts to show in the middle of the polygons. Attached the screenshot.

Also, if I click on the empty area inside the polygon the hittest also do not return that feature in the result.

Is there any way to fix this? Added my code below.

<html>

<head>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require(["esri/Map",

"esri/views/MapView",

"esri/Basemap",

"esri/layers/VectorTileLayer",

"esri/layers/FeatureLayer",

"esri/Graphic",

"esri/widgets/Legend"], (Map,

MapView,

Basemap,

VectorTileLayer,

FeatureLayer,

Graphic,

Legend) => {

const map = new Map({

basemap: new Basemap({

baseLayers: [

new VectorTileLayer({

portalItem: { id: "474f0cb226884dd68f707ab0f2f1aa10" }

})

referenceLayers: [

new VectorTileLayer({

portalItem: { id: "1768e8369a214dfab4e2167d5c5f2454" }

})

]

})

});

const view = new MapView({

center: [-80, 35],

container: "viewDiv",

map: map,

zoom: 3

});

// Create a symbol for drawing the point

const markerSymbol = {

type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

color: [0, 0, 0],

outline: {

// autocasts as new SimpleLineSymbol()

color: [255, 255, 255],

width: 2

}

};

let data = [

{

"geometry": {

"type": "polyline",

"paths": [

[

-75.004,

42.506

[

-73.779,

41.14

[

-74.864,

39.817

[

-80.704,

37.787

[

-84.127,

40.442

[

-75.004,

42.506

]

"attributes": {

"id": "1234",

}

];

const testLayer = new FeatureLayer({

title: "Test layer",

visible: true,

fields: [

{ name: "objectId", type: "oid" }

objectIdField: "objectId",

geometryType: "polyline",

spatialReference: { wkid: 4326 },

source: data,

renderer: {

type: 'simple',

symbol: {

type: 'simple-fill',

color: [179, 5, 5, 0.1],

outline: {

width: 0.7,

color: "#B30505"

}

});

map.add(testLayer);

});

</script>

</head>

<body>

</body>

</html>

Re: Polygon features are not rendering properly in Feature layer

ReneRubalcava — Fri, 25 Aug 2023 13:23:58 GMT

The issue is you are trying to use a simple-fill renderer (for polygons) on polyline features. You can change it to simple-line and it will work as expected.

https://codepen.io/odoe/pen/gOZaXGx?editors=1000

renderer: { type: 'simple', symbol: { type: 'simple-line', color: [179, 5, 5], style: "solid", width: 2, } }

Re: Polygon features are not rendering properly in Feature layer

PrashantR — Mon, 28 Aug 2023 04:25:10 GMT

@ReneRubalcava Thanks for the quick response!

Actually, I want to show these polygons with different colors as show in the example. With simple-line renderer I want be able to do it.

Re: Polygon features are not rendering properly in Feature layer

PrashantR — Thu, 23 Nov 2023 02:55:17 GMT

I changed the geometry type from "polyline" to "polygon" and it fixed the issue.

@ReneRubalcava

topic Polygon features are not rendering properly in Feature layer in ArcGIS JavaScript Maps SDK Questions

Polygon features are not rendering properly in Feature layer

Re: Polygon features are not rendering properly in Feature layer

Re: Polygon features are not rendering properly in Feature layer

Re: Polygon features are not rendering properly in Feature layer