my buildings aren't extruding in arcgis 3D - arcgis

Question

I'm new to this, but I'm trying to make a 3D map of a street in a semi-obscure Pennsylvania town. I have a geojson file that specifies the real estate parcels and their data, but not heights or elevations of buildings. I'm using ArcGis developer. When the page renders, I get the parcels as seen from the angle I designated, but the buildings don't extrude properly. Since I am modifying code I found online, I have probably included some things that aren't applicable to my page. I've made a codepen, but it doesn't show the extrusion at all: https://codepen.io/lschneiderman/pen/mdVJbOm?editors=0011
I'm getting these error messages:
[esri.layers.graphics.sources.GeoJSONSource] Some fields types couldn't be inferred from the features and were dropped
dojo.js:253 [esri.views.3d.layers.graphics.Graphics3DCore] Graphic in layer 17285dfb501-layer-0 has no symbol and will not render
My HTML:
<div id="viewDiv"></div>
CSS:
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
JS:
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GeoJSONLayer",
"esri/layers/SceneLayer"
], function(Map, SceneView, GeoJSONLayer, SceneLayer) {
const geojsonLayer = new GeoJSONLayer({
url:
"https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson"
});
geojsonLayer.elevationInfo = {
mode: "relative-to-ground",
featureExpressionInfo: {
expression: "$feature.elevation"
},
unit: "feet"
};
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
geojsonLayer.renderer = {
type: "unique-value",
field: "CLASSDESC__asmt",
uniqueValueInfos: [
{
value: "COMMERCIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#D06152"
}
}
]
}
},
{
value: "RESIDENTIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#4A9B89"
}
}
]
}
}
],
visualVariables: [heightVV]
};
const map = new Map({
basemap: "gray-vector",
ground: "world-elevation",
layers: [
geojsonLayer,
new SceneLayer({
url:
"https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Manhattan/SceneServer",
renderer: {
type: "simple",
symbol: {
type: "mesh-3d",
symbolLayers: [
{
type: "fill",
material: {
color: "white"
},
edges: {
type: "solid",
color: [100, 100, 100, 0.5],
size: 0.5
}
}
]
} //end symbol, line 93
} //end renderer
})//end SceneLayer
] //end layers
});
const view = new SceneView({
container: "viewDiv",
map: map
});
view.goTo({
target: [-79.869331, 40.350433], // coordinates of crossing
heading: 90,
tilt: 45,
zoom: 30 // instead of a z-value, we provide the zoom level
}, {
duration: 0 // tell view not to animate camera movement
});
});
Any help would be much appreciated!

Answer 1

The provided sample has the following issues:
Missing CORS headers
The API tries to load the GeoJSON but the browser denies it with the following error message:
Access to fetch at 'https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
You must either host the GeoJSON file on the same host the script is running or add CORS headers to the server hosting the GeoJSON file. For the CodePen below I downloaded the GeoJSON and uploaded it again as a CodePen asset, where CORS headers are properly set to make this work:
const geojsonLayer = new GeoJSONLayer({
url: "https://assets.codepen.io/2969649/parcels-fifth1922.geojson"
});
Missing height attribute for extrusion
The features (in this case parcels) listed in the GeoJSON have no height information. The provided sample uses a size visual variable to extrude the polygons by the height attribute:
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
Because there is no attribute named height, all polygons are extruded 0 feet. You can either add a corresponding attribute to all the features in the GeoJSON or simply define a constant in the sample that will be applied to all extruded polygons:
geojsonLayer.renderer = {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [{
type: "extrude",
size: 50, // extrude all buildings by 50 meters
material: {
color: "#D06152"
}
}]
}
}
See the following CodePen for a working version with the above parcels:
https://codepen.io/arnofiva/pen/474ecc855475ced8d50f3f121988649f?editors=0010
You might want to check out the following ArcGIS API for JavaScript resources:
Sample: extruding building footprints
Fundamentals for Building 3D Web Apps (Youtube)
Practical Guide for Building a 3D Web App from 2D Data (Youtube)