Loading GeoJSON geometry type Polygon FeatureCollection

[JuliermePinheiro]

Hi all,

I followed the instruction in here to load earthquakes GeoJSON geometry type:point over a MapView. Now I am using the same code to load a GeoJSON geometry type:polygon over the MapView.  I changed the function createGraphics as shown bellow (Item 3). The GeoJSON file has 19315 features (polygons) and the console is showing the following warning and error messages (Item 1). Find bellow the footPrintRenderer (Item 2).

The console seems to be pointing to renderer error and Layer Graphics. I wonder if someone could help me to figure out what is going wrong. I am not sure if I set the rings correctly. I am following the bases for setting rings: [[[Xo,Yo],[X1,Y1],[X2,Y2],[X3,Y3],[Xo,Yo]]]. Lastly, find a piece of my GeoJSON (Item 4).

Any comment on that will very appreciated.

Thank you very much for your time in advance.

(Item 1)

[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.renderers.HeatmapRenderer', 'esri.renderers.SimpleRenderer', 'esri.renderers.UniqueValueRenderer', 'esri.renderers.ClassBreaksRenderer', or a plain object that can autocast (having .type = 'heatmap', 'simple', 'unique-value', 'class-breaks') 4.10:310:392
[esri.layers.graphics.sources.MemorySource] Encountered 19315 validation errors while loading features
Array(19315) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

(Item 2)

var footPrintRenderer = {
type: "simple-fill",
color: [51, 51, 204, 0.8],
style: "none",
outline: {
color: [0, 0, 255, 0.5],
width: 1.25
}
};

(Item 3)

function createGraphics(response) {

// raw GeoJSON data
var geoJson = response.data;

// Create an array of Graphics from each GeoJson feature
return geoJson.features.map(function(feature, i) {
return {
geometry: new Polygon({
rings: [[
[feature.geometry.coordinates[0], feature.geometry.coordinates[0]],
[feature.geometry.coordinates[1], feature.geometry.coordinates[1]],
[feature.geometry.coordinates[2], feature.geometry.coordinates[2]],
[feature.geometry.coordinates[3], feature.geometry.coordinates[3]],
[feature.geometry.coordinates[0], feature.geometry.coordinates[0]]

]]
// spatialReference: {wkid: 4326} or view.spatialReference
}),
// select only the attribute you care about
attributes:{
ObjectID: i,
imageID: feature.properties.co_seq_ima,
aquisitionDate: feature.properties.dt_coleta,
orbitDirection: feature.properties.no_direcao,
imagingSide: feature.properties.no_lado_im,
product: feature.properties.tp_produto,
indexationDate: feature.properties.dt_indexac,
url: feature.properties.no_caminho,
area: feature.properties.nu_area_km
}
};
});
}

(Item 4)

{
"type": "FeatureCollection",
"name": "cosmo_skymed_footprint",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "co_seq_ima": 16379, "dt_coleta": null, "no_direcao": null, "no_lado_im": null, "tp_produto": "geo_db", "dt_indexac": "2017/01/31 08:40:13.000", "no_caminho": "/imagens/image.tif", "nu_area_km": 3084.1016279290402 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -60.006289926645998, -7.502665927409351 ], [ -60.333370063662102, -7.42908171303827 ], [ -60.2532172368633, -7.07175138748668 ], [ -59.926359542411099, -7.14505950947063 ], [ -60.006289926645998, -7.502665927409351 ] ] ] } },

[JuliermePinheiro]

I also changed the geometry to

 geometry: new Polygon({
                                rings: [
                                        [feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]],
                                        [feature.geometry.coordinates[1][0], feature.geometry.coordinates[1][1]],
                                        [feature.geometry.coordinates[2][0], feature.geometry.coordinates[2][1]],
                                        [feature.geometry.coordinates[3][0], feature.geometry.coordinates[3][1]],
                                        [feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]]

                                ]

But, still not seeing the overlay.

Any additional comment will be very appreciated.

[Anonymous User · Accepted solution]

Hi Julierme,

Item 2 you have in your code is not a valid renderer. It's actually a symbol with the name `footPrintRenderer`.

(Item 2)

var footPrintRenderer = {
   type: "simple-fill",
   color: [51, 51, 204, 0.8],
   style: "none",
   outline: {
      color: [0, 0, 255, 0.5],
      width: 1.25
   }
}

You could try change it to:

var footPrintRenderer = {
   type: "simple", // autocasts as new SimpleRenderer()
   symbol: {
      type: "simple-fill",
      color: [51, 51, 204, 0.8],
      style: "none",
      outline: {
         color: [0, 0, 255, 0.5],
         width: 1.25
      }
   }
}

[JuliermePinheiro]

Dear Fang Li,

Thank you very much for reply.

I got rid of the renderer issue by following your instructions. But I am still stuck trying to load the polygon layer. I configured the function createGraphics as showed bellow, but the polygon layer map still not rendering. Any comment on that will be very appreciated.

function createGraphics(response) {

// raw GeoJSON data
var geoJson = response.data;

// Create an array of Graphics from each GeoJson feature
return geoJson.features.map(function(feature, i) {
return {
geometry: new Polygon({
rings: [[
[feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]],
[feature.geometry.coordinates[1][0], feature.geometry.coordinates[1][1]],
[feature.geometry.coordinates[2][0], feature.geometry.coordinates[2][1]],
[feature.geometry.coordinates[3][0], feature.geometry.coordinates[3][1]],
[feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]]

]]
// spatialReference: {wkid: 4326} or view.spatialReference
}),
// select only the attribute you care about
attributes:{
ObjectID: i,
imageID: feature.properties.co_seq_ima,
product: feature.properties.tp_produto
/*orbitDirection: feature.properties.no_direcao,
imagingSide: feature.properties.no_lado_im,
aquisionDate: feature.properties.dt_coleta,
indexationDate: feature.properties.dt_indexac,
url: feature.properties.no_caminho,
area: feature.properties.nu_area_km*/
}
};
});
}

Kind regards

Julierme

[Anonymous User]

Hi Julierme,

I tried to reproduce the issue with the data you provided and was able to get the app to work. I noticed that you didn't mention how the fields are defined in your app. I wonder if that's the missing piece for you. The code snippet below is how I defined the fields.

var fields = [
   {
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
   },
   {
      name: "co_seq_ima",
      alias: "co_seq_ima",
      type: "integer"
   },{
      name: "nu_area_km",
      alias: "nu_area_km",
      type: "double"
    }
];

If that's not the issue, could you please look at your browser console and see if there's any warning info if not errors? Please see An Anonymous Pen on CodePen  for the entire app. Note: you need to change the data url for it to work.

Fang

[JuliermePinheiro]

HI Fang Li,

I got it working now. I appreciated your time.

Kind regards

Julierme