<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>Generate classed color breaks renderer</title>
<link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
<script src="//js.arcgis.com/3.14/"></script>
</head>
<body class="tundra">
<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="feedback">
<h3>Washington State</h3>
<div id="info">
Select a field to use to create a renderer for the counties in Washington state.
</div>
<div id="legendWrapper"></div>
<div id="fieldWrapper">
Currently selected attribute:
</div>
</div>
</div>
</div>
</body>
</html>
var layer, legend;
require([
"esri/map",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"esri/renderers/smartMapping",
"esri/renderers/jsonUtils",
"dojo/_base/array",
"dojo/dom",
"dojo/dom-construct",
"dojo/data/ItemFileReadStore",
"dijit/form/FilteringSelect",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map,
PopupTemplate,
FeatureLayer,
Legend,
smartMapping,
jsonUtils,
array,
dom,
domConstruct,
ItemFileReadStore,
FilteringSelect,
parser
) {
parser.parse();
function saveLocal(data, field) {
var key = location.pathname + '-' + field;
localStorage.setItem(key, JSON.stringify(data));
}
function getLocal(field) {
var key = location.pathname + '-' + field;
var data = localStorage.getItem(key);
if (data) {
return JSON.parse(data);
} else {
return null;
}
}
var mapOptions = {
basemap: "terrain",
center: [-123.113, 47.035],
zoom: 7,
slider: false
};
var map = new Map("map", mapOptions);
var fieldName = "POP2007";
// the counties map service uses the actual field name as the field alias
// set up an object to use as a lookup table to work with user friendly field names
var fields = {
"POP2007": "Population(2007)",
"POP07_SQMI": "Population/Square Mile(2007)",
"WHITE": "White",
"BLACK": "Black",
"AMERI_ES": "Native Americans",
"HISPANIC": "Hispanic",
"ASIAN": "Asian",
"HAWN_PI": "Native Hawaiian/Pacific Islander",
"MULT_RACE": "Multiple Races",
"OTHER": "Other"
};
var outFields = ["POP2007", "POP07_SQMI", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "HAWN_PI", "OTHER", "MULT_RACE", "HISPANIC", "STATE_NAME", "NAME"];
//create popup
var popupTemplate = new PopupTemplate({
title: "{NAME} County",
fieldInfos: [{
"fieldName": fieldName,
"label": fields[fieldName],
"visible": true,
"format": {
places: 0,
digitSeparator: true
}
}],
showAttachments: true
});
layer = new FeatureLayer("//sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
"id": "Washington",
"infoTemplate": popupTemplate,
"mode": FeatureLayer.MODE_SNAPSHOT,
"outFields": outFields,
"opacity": 0.8
});
//only working with Washington state
layer.setDefinitionExpression("STATE_NAME='Washington'");
map.addLayer(layer);
layer.on("load", function () {
createRenderer(fieldName);
});
function createRenderer(field) {
//smart mapping functionality begins
var data = getLocal(field);
if (data) {
console.log('load renderer from localStorage');
layer.setRenderer(jsonUtils.fromJson(data));
layer.redraw();
createLegend(map, layer, field);
} else {
smartMapping.createClassedColorRenderer({
layer: layer,
field: field,
basemap: map.getBasemap(),
classificationMethod: "quantile"
}).then(function (response) {
console.log('save renderer to localStorage');
saveLocal(response.renderer.toJson(), field);
layer.setRenderer(response.renderer);
layer.redraw();
createLegend(map, layer, field);
});
}
}
//this function gets called when fields are selected to render
function updateAttribute(ch) {
map.infoWindow.hide();
var popupTemplateUpdated = new PopupTemplate({
title: "{NAME} County",
fieldInfos: [{
"fieldName": ch,
"label": fields[ch],
"visible": true,
"format": { places: 0, digitSeparator: true }
}],
showAttachments: true
});
layer.setInfoTemplate(popupTemplateUpdated);
createRenderer(ch);
layer.redraw();
createLegend(map, layer, ch);
}
//Create a legend
function createLegend(map, layer, field) {
//If applicable, destroy previous legend
if (legend) {
legend.destroy();
domConstruct.destroy(dom.byId("legendDiv"));
}
// create a new div for the legend
var legendDiv = domConstruct.create("div", {
id: "legendDiv"
}, dom.byId("legendWrapper"));
legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Census Attribute: " + field
}]
}, legendDiv);
legend.startup();
}
// create a store and a filtering select for the county layer's fields
var fieldNames, fieldStore, fieldSelect;
fieldNames = {
"identifier": "value",
"label": "name",
"items": []
};
array.forEach(outFields, function (f) {
if (array.indexOf(f.split("_"), "NAME") == -1) { // exclude attrs that contain "NAME"
fieldNames.items.push({
"name": fields[f],
"value": f
});
}
});
fieldStore = new ItemFileReadStore({
data: fieldNames
});
fieldSelect = new FilteringSelect({
displayedValue: fieldNames.items[0].name,
value: fieldNames.items[0].value,
name: "fieldsFS",
required: false,
store: fieldStore,
searchAttr: "name",
style: {
"width": "290px",
"fontSize": "12pt",
"color": "#444"
}
}, domConstruct.create("div", null, dom.byId("fieldWrapper")));
fieldSelect.on("change", updateAttribute);
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |