I have a map in which I will have a collection of polygons. Each polygon will have a value. Based on the min and max value of the polygon, I have to create a color ramp with start and end color and display the polygons with the associated color. Is their a way to do it?
You can do it with a Class Break Renderer: ClassBreaksRenderer | API Reference | ArcGIS API for JavaScript 3.17
Hi I am using this code. I am getting the polygon. But the graphics Layer on load is not fired and even in jquery also its not fired. So the color is not applied. Am I missing anything!
Your code is not displaying in your post. Please edit with the advanced editor.
<!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>Color Ramp</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#info {
position: absolute;
left: 0;
bottom: 0;
padding: 10px;
background-color: #ddd;
font: 14px Segoe UI;
width: 200px;
text-align: center;
border-radius: 0 10px 0 0;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map, collegeLyr, legend, renderer;
require([
"esri/map", "esri/geometry/Circle","esri/dijit/Legend","esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color",
"esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Polygon", "esri/layers/LabelClass", "esri/symbols/Font",
"dojo/dom", "dojo/dom-attr", "dojo/domReady!"
], function (Map, Circle, Legend,FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Color,
Graphic, GraphicsLayer, Polygon, LabelClass, Font,
dom, domAttr
) {
var font = new Font("100pt", Font.STYLE_ITALIC,
Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Courier");
map = new Map("map", {
zoom: 15,
center: [103.854, 1.286],
basemap: "gray"
});
var color = "#45bbc2";// "#45bbc2",
lum = 0.1;
var renderer = new SimpleRenderer({
symbol: new SimpleFillSymbol({
outline: { // makes the outlines of all features consistently light gray
color: "lightgray",
width: 0.5
}
}), // the default symbol defined in step 1
label: "% population in poverty by county", // label for the legend
visualVariables: [{
type: "colorInfo", // indicates this is a color visual variable
field: "propertyVal", // total population in poverty
normalizationField: "propertyVal", // total population
minDataValue: 10, // features where < 10% of the pop in poverty
maxDataValue: 40, // features where > 30% of the pop in poverty
colors: ["#FFFCD4", "#810042"] // will be assigned this color (beige)
// features with values between 0.1 - 0.3 will be assigned
// a color on a ramp between beige and purple proportional
// to where the value falls between 0.1 and 0.3
}]
});
//var layer = new FeatureLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer',{});
var layer = new GraphicsLayer();
layer.id = 'graphicLr1';
var ImageName = "Raffles.jpg";
var polygonSymbol = new SimpleFillSymbol();
var MarinaBay = new Polygon({
"rings": [
[
[103.851, 1.280],
[103.852, 1.282],
[103.854, 1.287],
[103.854, 1.286],
[103.854, 1.281],
[103.858, 1.278],
[103.854, 1.278],
[103.852, 1.279],
[103.851, 1.280]
]
]
});
var Raffles = new Polygon({
"rings": [
[
[103.85127, 1.28396],
[103.84831, 1.28940],
[103.84607, 1.28608],
[103.84820, 1.28242],
[103.84879, 1.28049],
[103.85127, 1.28396]
]
]
});
var Shenton = new Polygon({
"rings": [
[
[103.846, 1.273],
[103.848, 1.276],
[103.849, 1.281],
[103.851, 1.280],
[103.851, 1.278],
[103.850, 1.276],
[103.850, 1.274],
[103.846, 1.273]
]
]
});
var Marina = new Polygon({
"rings": [
[
[103.860, 1.299],
[103.855, 1.291],
[103.857, 1.290],
[103.862, 1.289],
[103.863, 1.291],
[103.863, 1.293],
[103.863, 1.296],
[103.860, 1.299],
]
]
});
var s = new SimpleFillSymbol({
outline: { // makes the outlines of all features consistently light gray
color: "lightgray",
width: 0.5
}
});
var graphic1 = new Graphic(Shenton, s);
graphic1.setAttributes({
propertyId: 1,
propertyVal: 10
});
var graphic2 = new Graphic(Raffles, s);
graphic2.setAttributes({
propertyId: 2,
propertyVal: 20
});
var graphic3 = new Graphic(MarinaBay, s);
graphic3.setAttributes({
propertyId: 3,
propertyVal: 30
});
var graphic4 = new Graphic(Marina, s);
graphic4.setAttributes({
propertyId: 4,
propertyVal: 40
});
console.log('g1 :' + layer);
layer.add(graphic1);
layer.add(graphic2);
layer.add(graphic3);
layer.add(graphic4);
//gl.setRenderer(renderer);
//map.addLayer(gl);
var legend = new Legend({
map: map,
layerInfos: [{ title: "test tr", layer: layer }]
}, "legend");
layer.setRenderer(renderer);
map.addLayer(layer);
layer.on("load", function(){
console.log('lr load');
legend.startup();
});
$( document ).ready(function() {
$('#graphicLr1_layer').load(function()
{
console.log('jq lr load');
layer.setRenderer(renderer);
map.addLayer(layer);
legend.startup();
});
});
});
</script>
</head>
<body>
<div id="map"></div>
<div id="info"><div id="legend"></div></div>
</body>
</html>
Now I don't understand what you are trying to do Your original question stated you want a color ramp, but in your code you are applying a fill symbol. Please read the documentation on the ClassBreakRenderer first and play around with it.
Tip: don't run the jQuery $(document).ready within the require function. You can create the layer listener functions right after you have initialised the layer. I would also be careful of building code around dynamically created DOM elements like the graphics layer. You have set the renderer for the layer already and don't need to wait for the document load to run it again.
only post one version of a question please,... use the share option to widen you selection
Hi,
You can use d3 interpolatergb,cielab....etc functions to generate colro ramp between 2 colors.
Thanks,
Murali