The ArcGIS API 4.x for JavaScript offers developers a set of capabilities, that when combined, can give you mapping visualization super powers: symbols, renderers, Arcade, and definition expressions. This blog post provides a quick introduction into how these can be used together to create amazing maps.
For our demos, we’ll be using a point-based feature service that represents a single day’s pickup and delivery data for a New York City taxi service.
Symbols. Symbols are the bread and butter of mapping. Every map has some type of symbology on it such as roads, cities, parks, boundaries, bodies of water, labels, and more. They come in 2D, 3D, as well as endless colors, shapes and sizes. The ArcGIS API for JavaScript offers many different types of symbols including SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, PointSymbol3D, LineSymbol3D and more. Here is an example showing a SimpleMarkerSymbol, which will display a small black circle:
const sms = new SimpleMarkerSymbol({
size: 6,
color: "black"
})
Renderers. Renderers tell your application how to visually represent each feature on a FeatureLayer, SceneLayer, MapImageLayer, CSVLayer or StreamLayer. Renderers iterate through all features and apply their logic through the use of…you guessed it, symbols!
Here’s an example of an aptly named SimpleRenderer. This example of a SimpleRenderer loops thru all features in a FeatureLayer and assigns to each one a small black circle defined by a SimpleMarkerSymbol.
const pointRenderer = new SimpleRenderer({
symbol: new SimpleMarkerSymbol({
size: 6,
color: "black",
outline: {
width: 0.5,
color: "white"
}
})
});
let featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/NYC_Taxi_Data_Snapshot/FeatureServ...",
renderer: pointRenderer
});
RENDERER DEMO
Arcade. Arcade turns already powerful mapping renderers into super renderers. Arcade lets you use expressions, written in JavaScript, to apply additional calculations against the attributes from each feature in a layer. Those calculation results can then be used within a renderer to directly manipulate symbology. So, just a quick recap: we are talking about Renderers + Arcade + Symbology!
As a renderer loops thru each feature in a layer, it applies the Arcade expression. Arcade can access each feature's attributes using the pattern $feature.FIELD_NAME. You can use Arcade's built in functions and also plain old JavaScript to work with the values. Field names are located in the REST endpoint directory of your service. Here's an example using our New York City Taxi feature service:
renderer.valueExpression = "$feature.Fare_amount / $feature.Trip_distance";
Let’s look at a live demo. This app uses Arcade to do simple date/time calculations on each feature and then applies them using the valueExpression property inside a UniqueValueRenderer. The UniqueValueRenderer takes the Boolean string values returned from the Arcade expression and then applies the appropriate symbol.
ARCADE DEMO
You can learn more about Arcade here.
Definition Expressions. And, last but not least, definition expressions. These are a SQL where clause that filters features in the layer. Only features that match the definition expression will be displayed, and you can combine these with symbols, renderers and Arcade. To illustrate this final concept, let’s take our Arcade demo app from above, pull all the concepts together that we have talked about so far, and apply a simple definition expression so that the map will now only show taxi fares that totaled over $50.
definitionExpression: "Total_amount > 50"
PUTTING IT ALL TOGETHER DEMO
Wrap-up
That concludes our whirlwind tour, and this post barely touches the surface of the visualization capabilities in the ArcGIS API 4.x for JavaScript. By themselves, these built-in capabilities are powerful, and when you combine them, you can create some amazing visualizations. If you have a few more minutes, definitely check out the API samples for more ideas. We encourage you to try out these concepts and let us know about the great work you are doing.
