GraphisLayer extent ??

[snobrdinrtiste]

i'm trying to use the MapView's .goTo() function to zoom into a GraphicsLayer which containts both a point and a polygon graphic ... ex: mapview.goTo(graphiclayer.graphics)

i've tried skipping the graphicslayer and directly adding the graphics to the mapview ... ex: mapview.graphics.addMany([pointgfx, polygfx]); mapview.goTo(vm.mapview.graphics);

nothing seems to work... can someone point me in the right direction?

[andygup]

That's strange, maybe try a quick test using a single Graphic.geometry? Or, maybe create a separate Graphic's Collection and try injecting that into mapview.goTo()?

[snobrdinrtiste]

tried just adding a single graphic to the mapview and not using a graphiclayer ...

                            var polygonsymbol = {
                                type: "simple-fill", 
                                color: [68, 68, 68, 0.25],
                                style: "solid",
                                outline: { 
                                    color: "#cc0000",
                                    width: 3
                                }
                            };
                            var ncgraphic = new Graphic({
                                geometry: Poly,
                                symbol: polygonsymbol
                            });
                            vm.mapView.graphics.add(ncgraphic);
                            vm.mapView.goTo(ncgraphic.geometry);

the graphic gets added to the mapview but its extent does not get zoomed into the graphic's geometry

also, what do you mean by creating a separate Graphic's Collection? Like a GraphicsLayer? I have tried using the graphicslayer in the beginning and it didn't work

                           var graphiclayer = new GraphicsLayer();
                           var polygonsymbol = {
                                type: "simple-fill", 
                                color: [68, 68, 68, 0.25],
                                style: "solid",
                                outline: { 
                                    color: "#cc0000",
                                    width: 3
                                }
                            };
                            var ncgraphic = new Graphic({
                                geometry: Poly,
                                symbol: polygonsymbol
                            });
                            graphiclayer.graphics.add(ncgraphic);
                            vm.mapView.graphics.add(graphiclayer);
                            vm.mapView.goTo(graphiclayer.graphics);

Now if i use the Instantiated map object (instead of mapview) to set the extent the original Polygon's extent... it zooms in ... like this

                           vm.map.extent = Poly.extent;
                           vm.map.zoom = 10;

however, I want to see BOTH my point and polygon graphics extent in the map

[jwasilgeo]

1. How does AngularJS, Angular, or angular-esri-map play a role in this issue?

2. Can you recreate your described behavior in standalone sample?

I was able to get it to work by adding this quick test line to this sample:

https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html

setTimeout(function() { view.goTo(view.graphics); }, 2000);

[snobrdinrtiste]

wow... so it seems like the mapview needs a couple seconds to register the graphics ... thank you very much ... setting a timeout worked for me too

[jwasilgeo]

@snobrdinrtiste I would advise against relying on setTimeout. That was just for a quick test.

You should rely on view.when... as you continue to work with JSAPI v4.

[snobrdinrtiste]

@jwasilgeo thanks for the heads up... i was actually reading up on that Promise while in my meeting just now... i'll definitely try that out. thanks for all your help!!!!

Edit: Finally got a chance to make the necessary changes and this works ....

               vm.mapView.when(function () {
                     vm.mapView.goTo(vm.mapView.graphics);
                     vm.mapView.zoom = 12;
               });

[andygup]

Here's a good overview of working with promises in the JS API v4 https://developers.arcgis.com/javascript/latest/guide/programming-patterns/#async-data