Hi Dan,You're right in that the API puts it on the developer to sort out values for a unique value renderer. If you're coming from ArcGIS Desktop, this probably seems like a lot of work. But it can be done with a few lines of JS code. Here's a modified version of the unique value renderer sample that gets unique values for a field, generates a color ramp and then builds a unique value renderer using the unique values and colors from the ramp:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Unique Value Renderer</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css">
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
var map;
dojo.ready(function() {
var bounds = new esri.geometry.Extent({"xmin":-14558502,"ymin":2799695,"xmax":-6731350,"ymax":6713271,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {
extent: bounds,
slider: false
});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle("none");
defaultSymbol.outline.setStyle("none");
// query for attribute values then find uniques
var layerUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1";
var field = "SUB_REGION";
var qt = new esri.tasks.QueryTask(layerUrl);
var q = new esri.tasks.Query();
q.returnGeometry = false;
q.outFields = [ field ];
q.where = "1=1";
var result = qt.execute(q);
result.then(function(response) {
var uniques = [];
dojo.forEach(response.features, function(f) {
if ( dojo.indexOf(uniques, f.attributes[field]) === -1 ) {
uniques.push(f.attributes[field]);
}
});
// generate a color ramp
var ramp = createRamp(uniques.length);
//create renderer
var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, field);
// add values to the renderer with symbols using colors from the color ramp
dojo.forEach(ramp, function(c, idx) {
var symbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color(c));
// symbol.outline.setColor(c);
renderer.addValue(uniques[idx], symbol)
});
// create the feature layer
var featureLayer = new esri.layers.FeatureLayer(layerUrl, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: [ field ]
});
featureLayer.setRenderer(renderer);
// finally, add the layer to the map
map.addLayer(featureLayer);
console.log("added feature layer");
}, function(err) {
console.log("query task to get attributes failed");
});
function createRamp(count) {
var index = 0;
var factor = parseInt(360/count);
var colors = [];
while ( index < count ) {
var hue = index * factor
colors.push(color_from_hue(hue));
index += 1;
}
return colors;
}
// source: http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/
function color_from_hue(hue) {
var h = hue/60;
var c = 255;
var x = (1 - Math.abs(h%2 - 1))*255;
var color;
var i = Math.floor(h);
if (i == 0) color = rgb_to_hex(c, x, 0);
else if (i == 1) color = rgb_to_hex(x, c, 0);
else if (i == 2) color = rgb_to_hex(0, c, x);
else if (i == 3) color = rgb_to_hex(0, x, c);
else if (i == 4) color = rgb_to_hex(x, 0, c);
else color = rgb_to_hex(c, 0, x);
return color;
}
function rgb_to_hex(red, green, blue) {
var h = ((red << 16) | (green << 8) | (blue)).toString(16);
// add the beginning zeros
while (h.length < 6) h = '0' + h;
return '#' + h;
} // end functions from rainbowcoding.com
});
</script>
</head>
<body>
<div id="map" class="claro" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>
</html>
On JSFiddle: http://jsfiddle.net/xgzT2/
