In this lab you will apply custom styling to a feature layer using the JSON Drawing Info stored with the feature service.
Click this layer and copy the content of the Drawing Info JSON’s renderer
property. You will use this to style your layer below.
Click create_starter_map/index.html and copy the contents to a new jsbin.com.
In JSBin
> HTML
, update the require
statement and function
definition:
require([
"esri/Map",
"esri/views/MapView",
/*** ADD ***/
"esri/layers/FeatureLayer",
"esri/renderers/support/jsonUtils",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer, rendererJsonUtils) {
FeatureLayer
. ...
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.68, 45.52],
zoom: 10
});
/*** ADD ***/
var renderer = rendererJsonUtils.fromJSON({"type":"uniqueValue","field1":"COALIT","defaultSymbol":{"color":[170,170,170,134],"outline":{"color":[153,153,153,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"defaultLabel":"Others","uniqueValueInfos":[{"value":"SEUL","symbol":{"color":[253,127,111,134],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"SEUL"},{"value":"SWNI","symbol":{"color":[126,176,213,134],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"SWNI"},{"value":"EPNO","symbol":{"color":[178,224,97,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"EPNO"},{"value":"NWNW","symbol":{"color":[189,126,190,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"NWNW"},{"value":"NECN","symbol":{"color":[255,181,90,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"NECN"},{"value":"NPNS","symbol":{"color":[255,238,101,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"NPNS"},{"value":"CNN","symbol":{"color":[190,185,219,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"CNN"},{"value":"unclaimed","symbol":{"color":[253,204,229,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"unclaimed"},{"value":"NWNW/SWNI","symbol":{"color":[139,211,199,131],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"NWNW/SWNI"},{"value":"NECN/CNN","symbol":{"color":[203,236,196,134],"outline":{"color":[51,51,51,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},"label":"NECN/CNN"}]});
var featureLayer = new FeatureLayer({
url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched/FeatureServer/0",
renderer: renderer
});
map.add(featureLayer);
Output
panel shows styled neighborhoods.Your app should look something like this: