Class Breaks Renderer on Graphics

jaykapalczynski · ‎05-24-2021

How do I create a Class Breaks Renderer on a Graphic...

I am following this https://community.esri.com/t5/python-questions/create-definition-query/m-p/1060578/thread-id/61196#M...

But it does the below....... but I want a class breaks renderer

function addGraphics(result) {
  graphicsLayer.removeAll();
  result.features.forEach(function (feature) {
    var g = new Graphic({
      geometry: feature.geometry,
      attributes: feature.attributes,
      symbol: {
        type: "simple-marker",
        color: [0, 0, 0],
        outline: {
          width: 2,
          color: [0, 255, 255]
        },
        size: "20px"
      },

Can I do something like this?

      var less1 = new SimpleFillSymbol({
        color: "gray",
        style: "none",
        outline: {
          width: 0,
          color: "white"
        }
      });
      var more1 = new SimpleFillSymbol({
        color: "green",
        style: "solid",
        outline: {
          width: 0.5,
          color: "white"
        }
      });
      var more100 = new SimpleFillSymbol({
        color: "Blue",
        style: "solid",
        outline: {
          width: 0.5,
          color: "white"
        }
      });

	  
      var renderer = new ClassBreaksRenderer({
        field: "SomeField",
        defaultSymbol: new SimpleFillSymbol({
          color: "red",
          outline: {
            width: 0.5,
            color: "white"
          }
        }),
        defaultLabel: "no data",
        classBreakInfos: [
        {
          minValue: 0,
          maxValue: 0.9,
          symbol: less1,
          label: "< 1"
        }, {
          minValue: 1.01,
          maxValue: 50.0,
          symbol: more1,
          label: "1 - 50"
        }, {
          minValue: 50.01,
          maxValue: 100.00,
          symbol: more100,
          label: "> 50"
        }]
      });

function addGraphics(result) {
  graphicsLayer.removeAll();
  result.features.forEach(function (feature) {
    var g = new Graphic({
      geometry: feature.geometry,
      attributes: feature.attributes,
      renderer : renderer

jaykapalczynski · ‎05-28-2021

Solved with the help of ESRI Services...

Set the Source on the New Feature layer to that of graphicsLayer.graphics

I then make sure that I add that New Feature Layer after the code is run to populate the graphics layer.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Query features from a FeatureLayer | Sample | ArcGIS API for JavaScript 4.19</title>

<script>
  var dojoConfig = {
    has: {
      "esri-featurelayer-webgl": 1
    }
  };
</script>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.19/"></script>

<style>
#container {
  width: 100%;
  height: 100%;
  position: relative;
}

#viewDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
        #infoDiv {
          background-color: white;
          color: black;
          padding: 6px;
          width: 400px;
        }

        #results {
          font-weight: bolder;
          padding-top: 10px;
        }
        #drop-downs{
          padding-bottom: 15px;
        }

      </style>

      <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/layers/GraphicsLayer",
          "esri/geometry/geometryEngine",
          "esri/Graphic",
          "esri/widgets/Slider",
		  "esri/symbols/SimpleFillSymbol",
		  "esri/PopupTemplate",
		  "esri/renderers/ClassBreaksRenderer",
		  "esri/renderers/SimpleRenderer"
        ], function(Map, MapView, FeatureLayer, GraphicsLayer, 
	   geometryEngine, Graphic, Slider, 
	   SimpleFillSymbol, PopupTemplate, ClassBreaksRenderer, SimpleRenderer) 
		{
		
          var wellBuffer, wellsGeometries, magnitude;
          var wellTypeSelect = document.getElementById("well-type");
		
          var pointsUrl ="https://xxxx/arcgis/rest/services/Test/Test/FeatureServer/0";
          // historic earthquakes
          var pointsLayer = new FeatureLayer({
            url: pointsUrl,
            outFields: ["*"],
			minScale: 400000,
            visible: false,
            popupTemplate: template
          });
		

          var polygonUrl ="https://xxxx/arcgis/rest/services/Test/Test/FeatureServer/1";
          var polygonLayer = new FeatureLayer({
            url: polygonUrl,
            outFields: ["*"],
            visible: false
          });


          // GraphicsLayer for displaying results
          var resultsPolygonLayer2 = new GraphicsLayer({		  
		  });		  

      var less1 = new SimpleFillSymbol({
        color: "gray",
        style: "none",
		opacity: .5,
        outline: {
          width: 0.1,
          color: "gray"
        }
      });
      var moreseventy = new SimpleFillSymbol({
        color: "Blue",
        style: "solid",
		opacity: .5,
        outline: {
          width: 0.1,
          color: "gray"
        }
      });

	  
	  var fieldChoosen = "";
	  fieldChoosen = "Field 1";
	  
      var rendererPolygon = new ClassBreaksRenderer({
        field: fieldChoosen,
        //normalizationField: "EDUCBASECY",
        defaultSymbol: new SimpleFillSymbol({
          color: "red",
          outline: {
            width: 0.5,
            color: "white"
          }
        }),
        defaultLabel: "no data",
        classBreakInfos: [
        {
          minValue: 0,
          maxValue: 0.9,
          symbol: less1,
          label: "< 1"
        },{
          minValue: 70.01,
          maxValue: 200.00,
          symbol: moreseventy,
          label: "> 70"
        }]
      });

        // create empty FeatureLayer
        const monumentLayer = new FeatureLayer({
          // create an instance of esri/layers/support/Field for each field object
          title: "",
          fields: [
            {
              name: "OBJECTID",
              alias: "ObjectID",
              type: "oid"
            },
            {
              name: "Field1",
              alias: "Field 1",
              type: "string"
            }
          ],
          objectIdField: "OBJECTID",
          geometryType: "polygon",
          spatialReference: { wkid: 3857 },
          source: resultsPolygonLayer2.graphics,
          renderer: rendererPolygon,
          popupTemplate: {
            title: "{OBJECTID}"
          }
        });
		
          // SET THE MIN MAX SCALE TO TURN GRAPHICS LAYERS ON AND OFF BASED ON ZOOM
	      resultsPolygonLayer2.minScale = 400000;

     	  var map = new Map({
            basemap: "dark-gray-vector",
            layers: [pointsLayer, polygonLayer,  resultsPolygonLayer2]
          });

          var view = new MapView({
            container: "viewDiv",
            map: map,
		    center: [-78.989586, 37.566286],
		    zoom: 6
          });
          view.ui.add("infoDiv", "top-right");
		  
          // query all features from the points layer
          view
            .when(function() {
              return pointsLayer.when(function() {
                var query = pointsLayer.createQuery();
                return pointsLayer.queryFeatures(query);
              });
            })
            .then(getValues)
            .then(getUniqueValues)
            .then(addToSelect)
            .then(createBuffer);		  

          function getValues(response) {
            var features = response.features;
            var values = features.map(function(feature) {
              return feature.attributes.common_name;
            });
            return values;
          }
          // return an array of unique values in
          // the STATUS2 field of the wells layer
          function getUniqueValues(values) {
            var uniqueValues = [];
            uniqueValues.push("A Select Species");
            values.forEach(function(item, i) {
              if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "") {
                uniqueValues.push(item);
              }
            });
			uniqueValues.sort();
			return uniqueValues;
          }

          function addToSelect(values) {
            values.sort();
            values.forEach(function(value) {
              var option = document.createElement("option");
              option.text = value;
              wellTypeSelect.add(option);
            });
	    return setWellsDefinitionExpression(wellTypeSelect.value);
          }

          // set the definition expression on the wells
          // layer to reflect the selection of the user
          function setWellsDefinitionExpression(newValue) {
            pointsLayer.definitionExpression = "common_name = '" + newValue + "'";
            if (!pointsLayer.visible) {
              pointsLayer.visible = true;
            }
            return queryForWellGeometries();
          }

          // Get all the geometries of the wells layer
          // the createQuery() method creates a query
          // object that respects the definitionExpression
          // of the layer
          function queryForWellGeometries() {
            var pointsQuery = pointsLayer.createQuery();
            return pointsLayer.queryFeatures(pointsQuery).then(function(response) {
              pointsGeometries = response.features.map(function(feature) {
                return feature.geometry;
              });
              return pointsGeometries;
            });			        		
          }

          var bufferGraphic = null;
          function createBuffer(wellPoints) {
		  		
            //var bufferDistance = distanceSlider.values[0];
            var bufferDistance = 1;
			var wellBuffers = geometryEngine.geodesicBuffer(wellPoints, [bufferDistance], "meters", true);
            wellBuffer = wellBuffers[0];

		queryPolygons2().then(displayResults2);
		zoompolygons();
          }

		  function zoompolygons(){
			// ZOOM TO THE RETURNED FEATURES
			let opts = {
               duration: 5000  // Duration of animation will be 5 seconds
            };

		    pointsLayer.queryExtent().then((response) => {
				// go to the extent of all the graphics in the layer view
				view.goTo({
					target: (response.extent.clone().expand(1.0112))
				}, opts);
		    });
				
		monumentLayer.refresh();
          }


          // set a new definitionExpression on the wells layer
          // and create a new buffer around the new wells
          wellTypeSelect.addEventListener("change", function() {
            var type = event.target.value;
            setWellsDefinitionExpression(type).then(createBuffer);

map.remove(monumentLayer);

          });



          function queryPolygons2() {
            var query = polygonLayer.createQuery();
            query.geometry = wellBuffer;
            query.spatialRelationship = "intersects";
		
            return polygonLayer.queryFeatures(query);
          }
		  
          // display the earthquake query results in the
          // view and print the number of results to the DOM

 
	function displayResults2(results) {
            resultsPolygonLayer2.removeAll();
	
            var features = results.features.map(function(graphic) {
              graphic.symbol = {
                type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
				style: "none",
				outline: {  // autocasts as new SimpleLineSymbol()
				  color: "gray",
				  width: 1
				},
				opacity: .5,
                color: [ 51,51, 204, 0.9 ]
              };

              return graphic;

            });

            var numPolygons = features.length;
            document.getElementById("results").innerHTML = numPolygons + " grids found";

		resultsPolygonLayer2.addMany(features);

// SET THE SOURCE OF THE GRAPHICS LAYER TO THE MONUMENT LAYER			
monumentLayer.source = resultsPolygonLayer2.graphics;
map.remove(monumentLayer);
// ADD THE MONUMNET LAYER TO THE MAP
map.add(monumentLayer);
		  }


		
        }); // END OF MAIN FUNCTION
      </script>
    </head>

    <body>
	<div id="container">
      <div id="viewDiv"></div>
    	<div id="infoDiv" class="esri-widget">
			<div id="drop-downs">
			  Select Species type:
			  <select id="well-type" class="esri-widget"></select>
			</div>
			<div id="results" class="esri-widget"></div>
		  </div>

	</div>
    </body>
  </html>