topic Re: Class Breaks Renderer on Graphics in ArcGIS JavaScript Maps SDK Questions

Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 00:59:55 GMT

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

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?

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 12:45:11 GMT

I have a polygon FC and Point FC
I start by doing a query on the point FC
I then create a buffer around those points
I then call two functions to query the Polygons that intersect this buffer and then to add the graphics to a graphics layer.

but I want to use a class breaks renderer....do I need to create a new Feature Layer instead of graphics layer to use the class breaks renderer....

If so how do I write the results of the query to the new feature layer?

Re: Class Breaks Renderer on Graphics

JohnGrayson — Tue, 25 May 2021 14:34:01 GMT

You would need to use a FeatureLayer with client-side graphics, and you'd have to use applyEdits() to manage the data being added/removed to/from the layer.

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 14:34:09 GMT

It appears that I need a Feature Layer, as it does not appear a graphics layer can use a Class Breaks Renderer.

So I guess my question is now:

How do I return the results from a query to a new Feature Layer that I can use a renderer on?
I then need to clear and update the Feature Layer every time the query is run.

Does any one know how to do this....Write results of a query to a new Feature Layer rather than a Graphic?

Re: Class Breaks Renderer on Graphics

JohnGrayson — Tue, 25 May 2021 14:46:09 GMT

https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection-edits/

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 15:25:16 GMT

Ok thanks this is making a bit more sense now.....maybe you can shed some light on this part....

Ok i am in the Function createBuffer() that then creates a buffered geometry of a bunch of points.
This then calls the queryPolygons() function that queries the polygon Feature Layer to return the polygons that intersect with the Points (wellbuffer geometry)
My problem is when I then call the addFeatures query using the .then inside createBuffer()
I am passing Polygons and the example uses points: I am trying to capture all the polygons from the query in the addFeatures() function with this:
var returnedPolygons = results.features.map(function(graphic) {});
And then in the same function I need to figure out how to properly define a polygon and not a point

So I am stuck on how to take the retuned polygons, write them to array and then properly add them to the graphics array

ANY thoughts?

I want to use the returnedPolygons variable instead of the data array but this is a polygon and does not have Lat and Long fields like the point example

for (var i=0; i<data.length; i++){ graphic = new Graphic({ geometry: { type: "point", latitude: data[i].LATITUDE, longitude: data[i].LONGITUDE }, attributes: data[i] }); graphics.push(graphic); }

Re: Class Breaks Renderer on Graphics

ReneRubalcava — Tue, 25 May 2021 15:27:09 GMT

This might help, it shows how to copy the schema of a FeatureLayer and copy features to the new layer that you can apply a new renderer to.

https://codepen.io/odoe/pen/QWGRJNg

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 15:36:36 GMT

I know I am getting a return from the Polygon query as I can alert the object:

function addFeatures(results){ var returnedPolygons = results; alert(JSON.stringify(returnedPolygons));

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Tue, 25 May 2021 17:15:02 GMT

I think something is wrong here....

I alert the correct number of polygons from the Rowcount varaible

but when I alert the addEdits I get nothing in the array but the schema.

// create an array of graphics based on the data above var graphics = []; var graphic; var rowcount = 0; for (var i=0; i < returnedPolygons.length; i++){ graphic = new Graphic({ geometry: { type: "polygon" }, attributes: returnedPolygons[i] }); graphics.push(graphic); rowcount = rowcount + 1; } alert ("Rowcount: " + rowcount); // addEdits object tells applyEdits that you want to add the features const addEdits = { addFeatures: graphics }; alert ("add edits: " + (JSON.stringify(addEdits)));

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Fri, 28 May 2021 11:29:34 GMT

I know I am close....if you have a second....I am getting returned results for the polygon search...it says they are added to the Feature Layer in the console but nothing is showing up....

I am at a loss here....hopefully someone can point out my mistake....why are the returned polygons not showing up in the map

Simply select a species in the drop down and give a couple seconds to draw

In the last alert I am only seeing schema and not values to update....which is why I think there is nothing rendering

If you select a species from the drop down select "Dunlin" as there are only 26 of them and wont only get in the loop 26 times.

Maybe a projection issues...the Feature Layer data is UTM zone 17, map I tried to make the same

UPDATED WTITH NEW CODE....

<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; } .slider{ width: 100%; height: 60px; } #drop-downs{ padding-bottom: 15px; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 20px; height: 20px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </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) { // HERE IS THE EXAMPLE // https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayer-query var wellBuffer, wellsGeometries, magnitude; var wellTypeSelect = document.getElementById("well-type"); var less1 = new SimpleFillSymbol({ color: "gray", style: "none", outline: { width: 0, color: "white" } }); var less10 = new SimpleFillSymbol({ color: "green", style: "solid", outline: { width: 0.5, color: "white" } }); var less30 = new SimpleFillSymbol({ color: "orange", style: "solid", outline: { width: 0.5, color: "white" } }); var more30 = new SimpleFillSymbol({ color: "red", style: "solid", outline: { width: 0.5, color: "white" } }); var more100 = new SimpleFillSymbol({ color: "Blue", style: "solid", outline: { width: 0.5, color: "white" } }); var rendererPolygon = new ClassBreaksRenderer({ field: "AcadianFlycatcher", //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: 0, maxValue: 10.0, symbol: less10, label: "< 10" }, { minValue: 10.01, maxValue: 30.00, symbol: less30, label: "10 - 30" }, { minValue: 30.01, maxValue: 50.0, symbol: more30, label: "30 - 50%" }, { minValue: 50.01, maxValue: 100.00, symbol: more100, label: "> 100" }] }); //Spatial Reference: 102100 (3857) // wkid: 4326 var pointsUrl ="https://xxxxxxx/arcgis/rest/services/Test/Polygon_Test/FeatureServer/0"; // historic earthquakes var pointsLayer = new FeatureLayer({ url: pointsUrl, spatialReference: { wkid: 3857 }, outFields: ["*"], //minScale: 400000, visible: false }); var polygonUrl ="https://xxxxxxx/arcgis/rest/services/Test/Polygon_Test/FeatureServer/1"; // historic earthquakes var polygonLayer = new FeatureLayer({ url: polygonUrl, spatialReference: { wkid: 3857 }, outFields: ["*"], visible: false }); let rendererNew = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 255, 128, 0, 0.5 ], outline: { // autocasts as new SimpleLineSymbol() width: 1, color: "white" } } }; // create empty FeatureLayer const monumentLayer = new FeatureLayer({ // create an instance of esri/layers/support/Field for each field object title: "National Monuments", fields: [ { name: "OBJECTID", alias: "ObjectID", type: "oid" }, { name: "AcadianFlycatcher", alias: "AcadianFlycatcher", type: "string" } ], objectIdField: "OBJECTID", geometryType: "polygon", spatialReference: { wkid: 3857 }, source: [], // adding an empty feature collection renderer: rendererNew, popupTemplate: { title: "{Name}" } }); var map = new Map({ basemap: "dark-gray-vector", layers: [pointsLayer, polygonLayer, monumentLayer] }); var view = new MapView({ container: "viewDiv", map: map, center: [-78.989586, 37.566286], zoom: 6, spatialReference: { wkid: 3857 } }); view.ui.add("infoDiv", "top-right"); const removeBtn = document.getElementById("remove"); removeBtn.addEventListener("click", removeFeatures); // 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); // return an array of all the values in the // STATUS2 field of the wells layer 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; } // Add the unique values to the wells type // select element. This will allow the user // to filter wells by type. 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 = 1 var wellBuffers = geometryEngine.geodesicBuffer(wellPoints, [bufferDistance], "meters", true); wellBuffer = wellBuffers[0]; queryPolygons().then(addFeatures); } 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); }); } // 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); }); function queryPolygons() { var query = polygonLayer.createQuery(); //query.where = "mag >= " + magSlider.values[0]; query.geometry = wellBuffer; query.spatialRelationship = "intersects"; return polygonLayer.queryFeatures(query); } // fires when "Add Features" button is clicked function addFeatures(results){ // data to be added to the map var returnedPolygons = results; //var returnedPolygons = results.features.map(function(graphic){}); var returnedPolygons2 = results.features; //alert(JSON.stringify(returnedPolygons)); var data = (JSON.stringify(returnedPolygons2)); alert ("Returned Polygons Results Length: " + returnedPolygons2.length); alert ("Returned JSON stringify Results: " + data); alert ("Returned JSON stringify Count: " + data.length); //alert (returnedPolygons); let obj = returnedPolygons2; let entries = Object.entries(obj); //console.log(entries); const data2 = [ { LATITUDE: 32.6735, LONGITUDE: -83.2425, TYPE: "National Monument", NAME: "Cabrillo National Monument" }, { LATITUDE: 34.2234, LONGITUDE: -79.5590, TYPE: "National Monument", NAME: "Cesar E. Chavez National Monument" }, { LATITUDE: 37.6251, LONGITUDE: -82.0850, TYPE: "National Monument", NAME: "Devils Postpile National Monument" } ]; // create an array of graphics based on the data above var graphics = []; var graphic; var rowcount = 0; for (var i=0; i < entries.length; i++){ graphic = new Graphic({ geometry: { type: "polygon" }, attributes: entries[i] }); graphics.push(graphic); rowcount = rowcount + 1; alert(JSON.stringify(graphic)); } alert ("stringify Graphic: " + (JSON.stringify(graphics))); alert ("Rowcount: " + rowcount); // addEdits object tells applyEdits that you want to add the features const addEdits = { addFeatures: graphics }; alert ("add edits: " + (JSON.stringify(addEdits))); // apply the edits to the layer applyEditsToLayer(addEdits); } function applyEditsToLayer(edits) { alert("in applyEditsToLayer Function"); alert("edits results: " + (edits)); monumentLayer .applyEdits(edits) .then(function(results) { // if edits were removed if (results.deleteFeatureResults.length > 0){ console.log( results.deleteFeatureResults.length, "features have been removed" ); //addBtn.disabled = false; //removeBtn.disabled = true; } // if features were added - call queryFeatures to return // newly added graphics if (results.addFeatureResults.length > 0){ var objectIds = []; results.addFeatureResults.forEach(function(item) { objectIds.push(item.objectId); }); // query the newly added features from the layer monumentLayer .queryFeatures({ objectIds: objectIds }) .then(function(results){ console.log( results.features.length, "features have been added." ); //addBtn.disabled = true; //removeBtn.disabled = false; }) } }) .catch(function(error) { console.log(error); }); zoompolygons(); } // fires when "Remove Features" button clicked function removeFeatures(){ // query for the features you want to remove monumentLayer.queryFeatures().then(function(results){ // edits object tells apply edits that you want to delete the features const deleteEdits = { deleteFeatures: results.features }; // apply edits to the layer applyEditsToLayer(deleteEdits); }); } }); // 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> <button class="esri-button" id="remove">Remove 7 Features</button> <div id="results" class="esri-widget"></div> </div> </div> </body> </html>

Re: Class Breaks Renderer on Graphics

jaykapalczynski — Fri, 28 May 2021 13:38:35 GMT

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.