graphicsUtils in 4.6 ??

Question

I am trying to get the extent of my GraphicsLayer which contains a Point and a Polygon so I can zoom into on the map.

I don't see any mention of graphicsUtils in the 4.6 API  ... then I came across this migration matrix...

Functionality matrix | ArcGIS API for JavaScript 4.6

So when is graphicsUtils coming again?

or is there another way to get the extent of all the graphics in a GraphicLayer?

DerekLoi · Answer

Robert,

I see that your example directly adds the graphics to the mapview and skips instantiating the GraphicsLayer object ... i'll try that and see how it goes... thanks

Derek

rscheitlin · Answer

Derek, The View.goTo(mygraphiclayer.graphics); works fine for me. Here is a sample that works as well. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Intro to graphics - 4.6</title> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "dojo/domReady!" ], function( Map, MapView, Graphic, ) { var map = new Map({ basemap: "hybrid" }); var view = new MapView({ center: [-80, 35], container: "viewDiv", map: map, zoom: 3 }); /************************* * Create a point graphic *************************/ // First create a point geometry (this is the location of the Titanic) var point = { type: "point", // autocasts as new Point() longitude: -49.97, latitude: 41.73 }; // Create a symbol for drawing the point var markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } }; // Create a graphic and add the geometry and symbol to it var pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol }); /**************************** * Create a polyline graphic ****************************/ // First create a line geometry (this is the Keystone pipeline) var polyline = { type: "polyline", // autocasts as new Polyline() paths: [ [-111.30, 52.68], [-98, 49.5], [-93.94, 29.89] ] }; // Create a symbol for drawing the line var lineSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [226, 119, 40], width: 4 }; // Create an object for storing attributes related to the line var lineAtt = { Name: "Keystone Pipeline", Owner: "TransCanada", Length: "3,456 km" }; /******************************************* * Create a new graphic and add the geometry, * symbol, and attributes to it. You may also * add a simple PopupTemplate to the graphic. * This allows users to view the graphic's * attributes when it is clicked. ******************************************/ var polylineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol, attributes: lineAtt, popupTemplate: { // autocasts as new PopupTemplate() title: "{Name}", content: [{ type: "fields", fieldInfos: [{ fieldName: "Name" }, { fieldName: "Owner" }, { fieldName: "Length" }] }] } }); /*************************** * Create a polygon graphic ***************************/ // Create a polygon geometry var polygon = { type: "polygon", // autocasts as new Polygon() rings: [ [-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3] ] }; // Create a symbol for rendering the graphic var fillSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [227, 139, 79, 0.8], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 1 } }; // Add the geometry and symbol to a new graphic var polygonGraphic = new Graphic({ geometry: polygon, symbol: fillSymbol }); // Add the graphics to the view's graphics layer view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]); setTimeout(function(){ view.goTo(view.graphics); },2000); }); </script> </head> <body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DerekLoi · Answer

btw... i see that there is a .goTo() method that takes an array of graphics... i've tried mapview.goTo(mygraphiclayer.graphics) ... doesn't work ... do i have to set other options?

are there any examples of using the goTo() method with an array of graphics?