Select to view content in your preferred language

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

2688
4
Jump to solution
01-05-2021 11:25 PM
Abdulmajeed__
New Contributor

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>

 

1 Solution

Accepted Solutions
shaylavi
Esri Contributor

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

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

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

Shay

View solution in original post

4 Replies
shaylavi
Esri Contributor

Hi Abdul,

You need to use a uniqueValue renderer as explained here:

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

 

Shay
Abdulmajeed__
New Contributor

I didn't get it,

can you give me an example ?

 

Thanks in advance  

shaylavi
Esri Contributor

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

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

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

Shay
MattStayner
Frequent Contributor

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.

0 Kudos