Simple Zoom

269
7
Jump to solution
05-19-2020 11:14 AM
jaykapalczynski
Frequent Contributor

Just looking for a simple zoom ... 

I don't think I need to query anything....I am adding a feature to a graphics layer....then want to zoom to that Graphics Layer

Thoughts?

    var mapright = new Map({
        basemap: "dark-gray",
        layers: [resultsLayer2, resultsLayer4]
    });

    var viewright = new MapView({
        container: "viewDivright",
        map: mapright 
    });


    function displayResultsUniqueID(results) {

        var features2 = results.features.map(function (graphic) {
            graphic.symbol = {
                type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                color: [51, 51, 204, 0.9],
                style: "solid",
                outline: {  // autocasts as new SimpleLineSymbol()
                    color: "white",
                    width: 1
                }
            };
            return graphic;
        });
        window.resultsLayer2.addMany(features2);

        viewright.goTo(features2.Extent);
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Jay,

  Then this is one way. Get the extent of the geometries and that extents center and use that is the target.

var featGeoms = features2.map(function(gra){
  return gra.geometry;
});
var union = geometryEngine.union(featGeoms);‍‍

var opts = {
   duration: 5000 // Duration of animation will be 5 seconds
};

viewright.goTo({
    target: union.extent.center,
    zoom: 7
}, opts)
  .catch(function (error) {
  if (error.name !== "AbortError") {
   console.error(error);
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

7 Replies
jaykapalczynski
Frequent Contributor

This is all the code that is relevant I think

    var PolygonsUrl = "https://xxxx/arcgis/rest/services/Test/Poly/FeatureServer/0";
    window.PolygonsLayer = new FeatureLayer({
        url: PolygonsUrl,
        outFields: ["*"],
        visible: true
    });
    window.resultsLayer2 = new GraphicsLayer({
        id: "resultsLayer2",
        opacity: .5
    });
    var mapright = new Map({
        basemap: "dark-gray",
        layers: [resultsLayer2, resultsLayer4]
    });
    var viewright = new MapView({
        container: "viewDivright",
        map: mapright
    });

    function queryMultipartPolyongUniqueID4(feature) {
        var str = feature;
        //alert(str);
        var query = "";
        query = window.MultiPartPolygonsLayer.createQuery();
        query.where = "ID = '" + str + "'"; // "1a35172e071f4a33b191172a9b4b02ae";
        return window.PolygonsLayer.queryFeatures(query);
    }

    function displayResultsUniqueID(results) {
        var features2 = results.features.map(function (graphic) {
            graphic.symbol = {
                type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                color: [51, 51, 204, 0.9],
                style: "solid",
                outline: {  // autocasts as new SimpleLineSymbol()
                    color: "white",
                    width: 1
                }
            };
            return graphic;
        });
        window.resultsLayer2.addMany(features2);

        viewright.goTo(features2.Extent);
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jay,

   Looks like features2 is an array of graphics if that is the case then an array does not have an extent property.

just use:

viewright.goTo(features2);
0 Kudos
jaykapalczynski
Frequent Contributor

If I want to do something like this how to I define the graphics Layer...this does not seem to work

        viewright.goTo({
            target: features2,
            zoom: 7
        }, opts)
            .catch(function (error) {
                if (error.name !== "AbortError") {
                    console.error(error);
                }
            });‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jay,

   I'm confused. If you are sending an array of graphics then you will normally zoom to the extent of that graphics array. So are you saying that you want to zoom to zoom level seven and that the view centered on the graphics array?

0 Kudos
jaykapalczynski
Frequent Contributor

Looking to zoom to the graphics layer which works but want to zoom back just a bit....it zooms to the actual geometry but to close for my liking

so maybe an expand?

and use a duration to zoom to those features

var opts = {
   duration: 5000 // Duration of animation will be 5 seconds
};

viewright.goTo({
    target: features2,
    zoom: 7
}, opts)
  .catch(function (error) {
  if (error.name !== "AbortError") {
   console.error(error);
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jay,

  Then this is one way. Get the extent of the geometries and that extents center and use that is the target.

var featGeoms = features2.map(function(gra){
  return gra.geometry;
});
var union = geometryEngine.union(featGeoms);‍‍

var opts = {
   duration: 5000 // Duration of animation will be 5 seconds
};

viewright.goTo({
    target: union.extent.center,
    zoom: 7
}, opts)
  .catch(function (error) {
  if (error.name !== "AbortError") {
   console.error(error);
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
jaykapalczynski
Frequent Contributor

Thanks once again .... didnt know I had to grab the geometries first....CHEERS

0 Kudos