I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

NirmalSelvaraj — Wed, 29 Jun 2016 03:24:32 GMT

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?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

FC_Basson — Wed, 29 Jun 2016 07:18:59 GMT

You can do it with a Class Break Renderer: ClassBreaksRenderer | API Reference | ArcGIS API for JavaScript 3.17

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

DanPatterson_Retired — Wed, 29 Jun 2016 08:14:30 GMT

only post one version of a question please,... use the share option to widen you selection

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

NirmalSelvaraj — Mon, 04 Jul 2016 07:34:15 GMT

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!

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

NirmalSelvaraj — Mon, 04 Jul 2016 07:36:16 GMT

<!DOCTYPE html>

<html>

<head>

<title>Color Ramp</title>

<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>

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>

</body>

</html>

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

FC_Basson — Mon, 04 Jul 2016 07:36:51 GMT

Your code is not displaying in your post. Please edit with the advanced editor.

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

FC_Basson — Mon, 04 Jul 2016 07:53:39 GMT

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.

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

MuralikrishnaVelaga — Tue, 05 Jul 2016 10:02:25 GMT

Hi,

You can use d3 interpolatergb,cielab....etc functions to generate colro ramp between 2 colors.

Thanks,

Murali

topic Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it? in ArcGIS JavaScript Maps SDK Questions

I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?

Re: I want to dynamically create the color ramp with start end color and start end value to use that in the map. Is their a way to do it?