I recently upgraded from ArcGIS Javascript 4.8 to 4.15, and it broke the generation of my client-side Feature Layers.
I was wondering what was causing this code to display the improper symbol. I want a solid grey polygon, but it gives me a polygon with no fill for some reason.
I also want the proper attributes being shown up in the popupTemplate but it says undefined for both fields.
Notes about my code. Before the update, I defined the symbol and popupTemplate for the graphic and defined the renderer as such:
renderer: { type: "simple" }
But that didn't work so I've been tinkering trying to see where the issue is.
Debugging on both FireFox and Chrome.
Below is my code:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Testing Layer Issues</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.15/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/geometry/Polygon", "esri/Graphic" ], function(Map, MapView, FeatureLayer, Polygon, Graphic) { var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "viewDiv", map: map, center: [-115, 54.5], zoom: 6 }); var rings = [[-12501210, 8357231], [-12490077, 8357231], [-12490077, 8367861], [-12467811, 8367861], [-12467811, 8389121], [-12478944, 8389121], [-12478944, 8378491], [-12501210, 8378491], [-12501210, 8357231] ]; var greyPolygonAtt = { Name: "No Road Infrastructure", Message: "This area has insufficient road infrastructure for transportation" }; var greyPolygonGraphic = new Graphic({ geometry: new Polygon({ hasZ: false, hasM: false, rings: rings, spatialReference: 102100 }), attributes: greyPolygonAtt, }); var fields = [{ name: "OBJECTID", alias: "OBJECTID", type: "oid" }]; var greyGraphics = [ greyPolygonGraphics ]; var greyLayer = new FeatureLayer({ source: greyGraphics, fields: fields, // required objectIdField: "OBJECTID", geometryType: "polygon", popupTemplate: { title: "{Name}", content: "{Message}" }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [150, 150, 150, 1], outline: { color: [150, 150, 150, 1], width: "1px" }, style: "solid" } } }); map.add(greyLayer); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Sebastian,
You had several issues in your code.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Testing Layer Issues</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/Graphic"
], function (Map, MapView, FeatureLayer, Polygon, Graphic) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-115, 54.5],
zoom: 6
});
var rings = [
[-12501210, 8357231],
[-12490077, 8357231],
[-12490077, 8367861],
[-12467811, 8367861],
[-12467811, 8389121],
[-12478944, 8389121],
[-12478944, 8378491],
[-12501210, 8378491],
[-12501210, 8357231]
];
var greyPolygonAtt = {
Name: "No Road Infrastructure",
Message: "This area has insufficient road infrastructure for transportation"
};
var greyPolygonGraphic = new Graphic({
geometry: new Polygon({
rings: rings.reverse(),
spatialReference: 102100
}),
attributes: greyPolygonAtt
});
var greyGraphics = [greyPolygonGraphic];
var greyLayer = new FeatureLayer({
source: greyGraphics,
objectIdField: "OBJECTID",
fields: [{
name: "OBJECTID",
type: "oid"
}, {
name: "Name",
type: "string"
}, {
name: "Message",
type: "string"
}],
geometryType: "polygon",
popupTemplate: {
title: "{Name}",
content: "{Message}"
},
renderer: {
type: "simple",
symbol:
{
type: "simple-fill",
color: [150, 150, 150, 1],
outline: {
color: [150, 150, 150, 1],
width: "1px"
},
style: "solid"
}
}
});
map.add(greyLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>