topic Re: Loading GeoJSON geometry type Polygon FeatureCollection in ArcGIS JavaScript Maps SDK Questions

Loading GeoJSON geometry type Polygon FeatureCollection

JuliermePinheiro — Wed, 06 Feb 2019 19:31:32 GMT

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 ] ] ] } },

Re: Loading GeoJSON geometry type Polygon FeatureCollection

JuliermePinheiro — Wed, 06 Feb 2019 21:29:58 GMT

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.

Re: Loading GeoJSON geometry type Polygon FeatureCollection

Anonymous User — Sun, 12 Dec 2021 16:05:47 GMT

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
      }
   }
}

Re: Loading GeoJSON geometry type Polygon FeatureCollection

JuliermePinheiro — Thu, 07 Feb 2019 11:50:06 GMT

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

Re: Loading GeoJSON geometry type Polygon FeatureCollection

Anonymous User — Sun, 12 Dec 2021 16:05:49 GMT

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

Re: Loading GeoJSON geometry type Polygon FeatureCollection

JuliermePinheiro — Mon, 11 Feb 2019 18:40:08 GMT

HI Fang Li,

I got it working now. I appreciated your time.

Kind regards

Julierme