Extrude building footprints based on real world heights

Loading sample here...

This sample demonstrates how to extrude building footprints (polygon features) in 3D based on a real-world height stored in an attribute field. In some cases users only want to know where features are located, such as project areas, roads, buildings, etc. The data may be stored in a single layer where all features must be visualizaed with the same symbol or as unique types.

In this case, we'll use a UniqueValueRenderer to shade each feature based on it's building type. We'll also use visual variables to extrude each feature based on a numeric attribute.

Prior to completing the following steps, you should be familiar with views, Map, and FeatureLayer. If necessary, complete the following tutorials first:

The basic components of this app, such as creating instances of the Map and MapView classes and understanding HTML and CSS structure will not be reviewed. See the tutorials listed above if you need to familiarize yourself with those components in this application. As a general rule the introductory principles discussed in the tutorials above apply to most samples in the documentation.

1. Create a symbol for each type

While all symbol types are supported in 3D SceneViews, it is recommended to only use 3D symbols when working in SceneViews.

Because features in the building footprints layer are polygons, we need to create a PolygonSymbol3D for each type of building that will have a different color. PolygonSymbol3D along with all other 3D symbols is a container that holds one or more symbol layers. It is the Symbol3DLayer classes that define the color and size of 3D symbols.

In this case we need to add an ExtrudeSymbol3DLayer to the PolygonSymbol3D so that we can extrude the polygons from the surface.

To read more in depth about 3D symbols and their relationship to symbol layers, see the documentation for Symbol3D, Symbol3DLayer, and their subclasses. An example is provided below.

// 3D polygon symbol for residential buildings
var resSym = new PolygonSymbol3D({
  symbolLayers: [  // add an ExtrudeSymbol3DLayer to the symbolLayers array and set the color
    new ExtrudeSymbol3DLayer({
      material: {
        color: "#FC921F"  // orange
      }
    })
  ]
});

// 3D polygon symbol for condos
var condoSym = new PolygonSymbol3D({
  symbolLayers: [  // add an ExtrudeSymbol3DLayer to the symbolLayers array and set the color
    new ExtrudeSymbol3DLayer({
      material: {
        color: "#9E559C"  // purple
      }
    })
  ]
});

2. Create an instance of UniqueValueRenderer

We must use a UniqueValueRenderer when defining how features should be visualized based on field values. Up to three fields may be used to create various combinations of types. In this case we're shading features with different colors based on one field: DESCLU.

var renderer = new UniqueValueRenderer({
  // the default symbol indidates all other building types
  defaultSymbol: new PolygonSymbol3D({
    symbolLayers: [new ExtrudeSymbol3DLayer({
      material: {
        color: "#A7C636"  // green
      }
    })]
  }),
  defaultLabel: "Other",
  field: "DESCLU"  // building type
});

3. Match unique values with each symbol

You can match symbols with unique field values in one of two ways: Using uniqueValueInfos in the constructor...

var renderer = new UniqueValueRenderer({
  // the default symbol indidates all other building types
  defaultSymbol: new PolygonSymbol3D({
    symbolLayers: [new ExtrudeSymbol3DLayer({
      material: {
        color: "#A7C636"  // green
      }
    })]
  }),
  defaultLabel: "Other",
  field: "DESCLU",

  // match symbols to unique values here
  uniqueValueInfos: [
  {
    value: "Residential",
    symbol: resSym,
    label: "Residential"
  }, {
    value: "Residential Condominium",
    symbol: condoSym,
    label: "Condominium"
  }]
});

Or with the addUniqueValueInfo() method.

hwyRenderer.addUniqueValueInfo("Residential", resSym);

4. Add a size visual variable to extrude real-world heights

Finally, to extrude the real-world heights of each building, we'll add a size visual variable to the visualVariables array in the renderer. This requires only three properties: the type, field name, and valueUnit if the extrusion value is in any unit other than meters. Since values were measured in feet, we must indicate that in the variable.

var renderer = new UniqueValueRenderer({

  // set properties from previous steps here

  // define size visual variable based on heigh values in a field
  visualVariables: [{
    type: "size",
    field: "ELEVATION",
    valueUnit: "feet"  // converts and extrudes all data values in feet
  }]
});

5. Summary

Once the renderer is defined, you can set it on the layer and the view will automatically update. Click the sandbox button below to see the full code of this app.

Explore in the sandbox JS Bin View live

6. Additional visualization tutorials and samples

Sample search results

Title	Sample

There were no match results from your search criteria.