In the past year, we added some powerful, innovative, easy-to-use graphic drawing functionality in the ArcGIS API for JavaScript. Along with existing capabilities of the API, now you can easily create effective data visualizations on the map with a few lines of code. In this blog series, we will walk through various visualization capabilities in the API, and learn how you can utilize them to visualize your data.
Prerequisites
- Create a sample map application. See this tutorial if you don’t know how to do so yet.
- Publish a feature service hosted on ArcGIS.com or to your own ArcGIS Server. Follow this link to see how to do this on ArcGIS.com.
Add your data as a feature layer to a map (view sample)
You can create a feature layer with the service URL, and add the layer to the map.
var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
map.addLayer(layer);
A feature layer has default drawing properties, which are used to render your data layer on map.
Style your data with renderers
Renderers determine how a feature layer is drawn on a map. In the previous step, we already know that the default drawing properties are used to draw a feature layer. However, we should not let the default limit the representation of our data.
The ArcGIS API for JavaScript provides various renderers which you can implement from client-side. This is where you can get started to create the most effective visualizations for your data.
A good way to determine which renderer to use is to ask questions about the purpose of the map. You create good renderers to answer specific questions.
For example, with this National Park Service units dataset, we can ask questions such as:
- Where are the national park service units in the U.S.?
- What is the type of each national park service unit?
- How many visitors were in each national park service unit?
The first renderer we are introducing, simple renderer, is good for answering your where questions. It draw all features with the sample symbol.
Simple renderer (view sample)
To use simple renderer, we first create a symbol. Simple marker symbol is suitable for point data. For other geometry types (line, polygon), other symbols are available. See Symbolizing graphics with renderers in JavaScript API SDK for details.
var symbol = new SimpleMarkerSymbol();
symbol.setColor(new Color("#ffa500"));
Then we pass this symbol info a simple renderer instance, and apply this renderer on the layer.
var renderer = new SimpleRenderer(symbol);
layer.setRenderer(renderer);
Afterward, you can see the new symbol and the new renderer are applied on the map.
This is how you can make a simple web map application and make a visualization for your data. Starting from the next post, we will look at other renderers and explore what we can do with each of them.
