topic Re: How I can Change the point color based on value from an array in ArcGIS JavaScript Maps SDK Questions

How I can Change the point color based on value from an array

Abdulmajeed__ — Wed, 06 Jan 2021 07:25:21 GMT

Hi everyone ,

I want to change my point color based on the value from an array

the value named as (Temp) in the array .

Here is what I've did so far :

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Tutorials: Create a JavaScript starter app</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.15/"></script> <script> // My Array var locs = [ { "Id" : 1, "long": 46.738586, "lat": 24.774265 , "Temp": 6 }, { "Id" : 2, "long": 48.738586, "lat": 26.774265 , "Temp": 323 }, { "Id" : 3, "long": 50.738586, "lat": 28.774265 , "Temp": 32 } ] require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/geometry/Multipoint", "esri/layers/FeatureLayer", "esri/geometry/Point", "dojo/domReady!" ], function(Map, MapView, Graphic, GraphicsLayer, Point) { var map = new Map({ basemap: "dark-gray" }); var view = new MapView({ container: "viewDiv", map: map, center: [46.738586,24.774265], // longitude, latitude zoom: 6 }); var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); for (i = 0; i < locs.length; i++) { // create a point var Point ={ type: "point", longitude: locs[i].long, latitude: locs[i].lat, Temp: locs[i].Temp, ID : locs[i].Id, }; if(Point.Temp == 6){ var simpleMarkerSymbol = { type: "simple-marker", color: [255, 255, 255 ], // Green outline: { color: [255, 255, 255], // white width: 1 } } }; //*** ADD ***// // Create attributes var attributes = { Name: "My point", // The name of the Location: Point.ID, // The owner of the Temp : Point.Temp }; // Create popup template var popupTemplate = { title: "{Name}", content: "Test <b>{Location}</b> And <b>{Temp}</b>" }; var pointGraphic = new Graphic({ geometry: Point, symbol: simpleMarkerSymbol, //*** ADD ***// attributes: attributes, popupTemplate: popupTemplate }); graphicsLayer.add(pointGraphic); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

Re: How I can Change the point color based on value from an array

shaylavi — Wed, 06 Jan 2021 09:16:13 GMT

Hi Abdul,

You need to use a uniqueValue renderer as explained here:

https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html

Re: How I can Change the point color based on value from an array

Abdulmajeed__ — Wed, 06 Jan 2021 13:25:49 GMT

I didn't get it,

can you give me an example ?

Thanks in advance

Re: How I can Change the point color based on value from an array

shaylavi — Wed, 06 Jan 2021 14:21:57 GMT

In your code, you create a Point, wrap it as a graphic and then add it into a graphic layer.

When creating a graphic you create a symbol definition to determine how the graphic looks like.

Renderers are a more advanced way to define how a group of symbols assigned to graphics/features based on different rules. There are different type of renderers such as scale-based/unique values/classes and more.

Instead of using a simple marker symbol that represents a single marker symbol, you should apply a renderer, which acts in a similar way to a marker symbol but with more advanced functionality, as described in the documentation for renderers.

Since you're using version 4.x of the API, I don't know if renderers can work on a graphic layer - it did work for version 3.x as described here: https://developers.arcgis.com/javascript/3/jshelp/inside_renderers.html

This link explain exactly all you need to know about markers and renderers. The concepts remain the same for both versions.

It could be that in version 4.x you cannot use renderers on graphics but I haven't tested it and it should be very easy to test - you just create a renderer and apply it as the symbol, as shown in the examples at the link above.

In case it doesn't work for graphics, you can convert the graphics to a feature layer of points and apply the renderer. The documentation is filled with examples on how to define a unique value renderer - https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html

There's also a sandbox example for a renderer (defined on a feature layer and not a graphic layer) - https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-location-types

Basically, a renderer is a collection of symbols based on some pre-defined rules.

Re: How I can Change the point color based on value from an array

MattStayner — Fri, 19 Feb 2021 20:53:58 GMT

You can't use a renderer on a GraphicsLayer, "Each graphic must have its own symbol since the GraphicsLayer cannot have an associated renderer". That's a real bummer. It was a nice feature in 3.X.