Assignment 8 ArcGIS API 4.
8
Layers and Renderers
AS.430.619.81 Advanced Web Development
This assignment will introduce renderers in both two and three dimensions.
Step 1: 2D Renderers
1. This assignment builds on the map application you started in module 7: you’ll want to
add all new JavaScript code to the commonMap.js file you created last week. If you
need to see the code again, you can always grab the original from
https://developers.arcgis.com/javascript/latest/sample-code/get-started-
mapview/index.html.
Read the documentation for the SimpleRenderer:
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html
Navigate to the sample and examine the code in the sandbox
https://developers.arcgis.com/javascript/latest/sample-code/visualization-location-simple/index.html
Let’s look at the constructor for a new SimpleRenderer:
There are actually two objects being constructed in this code: a new instance of a
SimpleRenderer and a new instance of a SimpleMarkerSymbol.
Now, navigate to https://developers.arcgis.com/javascript/latest/sample-
code/sandbox/index.html?sample=visualization-location-types and look at the code in the
sandbox.
We have a Major Road layer with 3 desired classifications: Interstate, US Highway and Other
Major Roads. In the code, three instances of a SimpleLineSymbol are created.
A little further down the code, we have the constructor of the UniqueValueRenderer:
As you can see in the code, there are 4 properties for the UniqueValueRenderer: the
defaultSymbol, which is set to the SimpleLineSymbol otherSym, a defaultLabel of Other major
roads, a property called field, which specifies the field used for classification, and the property
uniqueValueInfos, which is an array that holds the properties for the two other road classes.
Navigate to Visualize data with class breaks and look at the code in the sandbox:
https://developers.arcgis.com/javascript/latest/sample-code/visualization-classbreaks/index.html
Again, we can see that multiple instances of a symbol (in this case the SimpleFillSymbol) are
being created. Each instance has a different color, but the same type of color fill (solid) and the
same properties are being set for the outline:
In the construction of the ClassBreaksRenderer object we have similar properties. A field
property indicates the field in the layer used for the class breaks, a normalizationField property
specifies an optional normalization, a defaultSymbol object that is similar to simpleRenderer, a
defaultLabel, and finally an array that contains the class breaks information and tells the
renderer which symbols to use for the breaks.
For all three of these renderers, you can see they are attached to the layer by including them in
the layer property.
To recap: in order to create any renderer, you need to do the following things:
1.) Include the class in the Require function (and create a variable in the callback function)
2.) Create a symbol(s) – can be done separately or inside of the constructor for the renderer
3.) Construct the renderer
4.) Set the renderer as the renderer property in a layer
Now that we have taken a good look at three renderers, let’s include a renderer in the map
application we created in module 7.
Q1. Find any layer hosted online as a service that interests you and add it to your map
application. Symbolize the layer using either a class breaks renderer or a unique value renderer.
Step 2: Data Driven Renderers
Now that we have a good idea of how renderers work, let’s look at a few of the new renderers
available in 4.8.
Navigate to https://developers.arcgis.com/javascript/latest/sample-code/visualization-sm-
color/index.html, read through the sample, and look at the code in the sandbox
Things look pretty different! We can see that some of the new concepts we’ve learned, such as
promises, are being used here. For now, let’s ignore the histogram portion of the code and
focus on the required elements for the rendering.
Specifying parameters is something you will see in a lot of examples in the API reference
documentation. This is done primarily to keep code simple and easier to read, though this
technique also allows you to reuse the same parameters in a different renderer, instead of
attaching them to a single instance. The above code is the same as:
Let’s take a closer look at one particular line of code:
In the beginning of the code, you will see the construction of a new layer object, povLyr.
So we know that this line of code is setting the renderer property of the povLyr. But where is the
response coming from?
If we look back at the ColorRendererCreator, we see response being passed into the function.
This is simply telling the renderer to use the renderer attribute of the response from the
createContinuousRenderer, which was passed the parameters created above. Simply put, we
created some parameters, passed them into a method of the colorRendererCreator, called
createContinuousRenderer, and then we received a response. Within the response, there is an
attribute called “renderer”, which we want to set as the layer’s renderer. This is very similar to
the module where we created objects and called them by their particular attributes.
FYI… You may be wondering where the color scheme is determined in the code. It’s specified
using the theme property:
Q2. Choose any layer hosted as a service and add it to your map, just like in question one, but
this time use a smartMapping creator (like the colorRendererCreator) to symbolize the layer.
Step 3: Visual Variables
Let’s take a closer look at a property you may have seen while looking at the examples: Visual
Variables.
Visual Variables are what define the parameters for data-driven geographic visualization of
numeric data (this comes from the API docs). You can use them to create continuous ramps of
color, size, opacity and rotations using things like the minimum and maximum data values.
So let’s back up. In the first part of the assignment, we manually created all of the symbols,
which gave us the highest level of control with regards to how they would look, but it also was
the most cumbersome. In the second part of the assignment, we picked a theme and let the
data drive the creation of a symbol(s) with minimal input as to how each symbol would look.
With Visual Variables, we have a little of both. We can define a default Symbol, then let the data
drive how that symbol is visualized.
Navigate to https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-
color/index.html and read through the documentation for the sample.
Now look at the code in the sandbox.
You’ll see that a default symbol is created, but the rest of the rendering is done with visual
variables:
Also review the example code for data-driven continuous size, which uses the same logic as
before, only this time using the data to alter the size of a symbol, rather than its color:
https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-size/index.html
Q3. As in previous questions, choose a layer to add to your map application, but this time
symbolize it using visual variables.
Step 4: 3D Renderers
Now let’s look at rendering 3D symbols on a Scene View.
As you did in module 7, create a new, blank application, but this time use a SceneView in your
commonMap.js file, rather than a MapView. You can do this either in Visual Studio or online in
the sandbox here:
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-
sceneview
Before we start, let’s look at some documentation about 3D layers and how they are rendered in
a browser.
First, read through the following blog regarding scene layers:
https://blogs.esri.com/esri/arcgis/2016/09/18/i3s-scene-layers/
If you’re interested, you might also want to read the white paper regarding rendering of 3D
layers: https://portal.opengeospatial.org/files/71232
Next, navigate to https://developers.arcgis.com/javascript/latest/sample-code/visualization-
trees-realistic/index.html and read through the sample documentation.
Open the sandbox and explore the code.
The code to create the renderers and visual variables should look pretty familiar. The one
difference is that, in the previous example, we only had a type property of color. Now, we have
two properties: color and size. These properties will drive how tall and how dark the trees will
appear when rendered in the browser. Also, note that the required classes have changed:
In this particular example, two 3D symbols are being used. The first is simply a 3D point symbol
and the second is referring to an object hosted by ESRI. Try entering the location in your
browser’s address bar to see the JSON file! If this looks confusing to you, don’t worry: we’ll
cover how to read and write JSON in a later module of the class.
Q4. In the blank 3D application you created, add a 2D layer and symbolize it using visual
variables to give the layer a 3D rendering.
Navigate to https://developers.arcgis.com/javascript/latest/sample-code/visualization-buildings-
3d/index.html and read through the sample documentation.
Again, explore the code in the sandbox.
Q5. Locate footprint data for any area that interests you (for example, Florida has several
counties that offer footprint data – Leon County offers theirs through ArcGIS Online). Create a
new 3D web application (either in Visual Studio or the online sandbox) and add extruded
footprints to the map.
When you have completed the assignment, zip your project files (either your
commonMap.js files from Visual Studio or the downloaded HTML files from the online
sandbox) and submit them to Blackboard.
