Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
BlendRenderer - Los Angeles housing status
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample displays housing status concentrations throughout the Greater Los Angeles area. Red indicating renter-occupied, green is vacant, whereas blue represents owner-occupied housing. The more opaque the color, the higher the concentration for that specific type of housing. More information on working with the BlendRenderer can be found here.Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>BlendRenderer: Los Angeles housing status</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#meta {
position: absolute;
left: 20px;
bottom: 20px;
width: 20em;
height: 16em;
z-index: 40;
background: #ffffff;
color: #777777;
padding: 5px;
border: 2px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: arial;
font-size: 0.9em;
}
#meta h3 {
color: #666666;
font-size: 1.1em;
padding: 0px;
margin: 0px;
display: inline-block;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/Color", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer", "esri/map", "esri/renderers/BlendRenderer",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
], function (Color, PopupTemplate, FeatureLayer, Map, BlendRenderer, SimpleFillSymbol, SimpleLineSymbol){
map = new Map("map", {
basemap: "topo", //"topo"
center: [-118.40, 34.06],
zoom: 12
});
//Set the blendRenderer's parameters
var blendRendererParams = {
//blendMode:"overlay" //By default, it uses "source-over", uncomment to display different mode
//See: http://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
symbol: new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(0)),
fields: [
{
field: "OWNER_CY",
color: new Color([0, 0, 255])
}, {
field: "RENTER_CY",
color: new Color([255, 0, 0])
}, {
field: "VACANT_CY",
color: new Color([0, 255, 0])
}
],
opacityStops: [
{
value: .1,
opacity: 0
},
{
value: 1,
opacity: .7
}
],
normalizationField: "TOTHU_CY"
};
//Create the PopupTemplate to be used to display demographic info
var template = new PopupTemplate({
"title": "Housing Status by Census Block",
"fieldInfos": [
{
"fieldName": "OWNER_CY",
"label": "Number of Owner Occupied Houses",
"visible": true,
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "RENTER_CY",
"label": "Number of Renter Occupied Houses",
"visible": true,
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "VACANT_CY",
"label": "Number of Vacant Houses",
"visible": true,
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "TOTHU_CY",
"label": "Total Housing Units",
"visible": true,
"format": {
"places": 0,
"digitSeparator": true
}
}
]
});
var layerUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Blocks%20near%20Wilshire%20enriched%20with%20Key%20Facts/FeatureServer/0";
var renderer = new BlendRenderer(blendRendererParams);
layer = new FeatureLayer(layerUrl, {
id: "blendedLayer",
outFields: ["TOTHU_CY", "RENTER_CY", "OWNER_CY", "VACANT_CY"],
opacity: 1,
definitionExpression: "TOTHU_CY > 0",
infoTemplate: template
});
layer.setRenderer(renderer);
map.addLayer(layer);
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="meta">
<h3>Los Angeles housing status displayed using a BlendRenderer</h3>
<br>
<br>This sample displays housing status concentrations throughout the Greater Los Angeles area.
<ul>
<li>Red: Renter occupied</li>
<li>Blue: Owner occupied</li>
<li>Green: Vacant</li>
</ul>
The more opaque the color, the higher the concentration for that housing status.
</div>
</div>
</div>
</body>
</html>