view.goTo method doesn't succeed

1956
6
Jump to solution
02-08-2021 01:48 AM
MichaelBoschert
New Contributor III

Hello,

I tried to develope a map with JS API4 that shows several features depending on the used url.

So if you call "https://serverurl/Map.html?fs=Feature1 i would like the map to zoom to that features.
My problem is, that the map doesn't zoom to the feature. I think it could be a spatial reference problem but i'm not able to fix it.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Bebauungsplan Protoyp API4</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.18/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/layers/ImageryLayer",
      "esri/widgets/LayerList",
      "esri/widgets/Search",
      "esri/portal/Portal",
      "esri/layers/Layer",
      "esri/layers/MapImageLayer",
      "esri/layers/ImageryLayer",
      "esri/Basemap",
      "esri/geometry/Extent",
      "esri/geometry/SpatialReference"
    ], function(
        Map,
        MapView,
        FeatureLayer,
        ImageryLayer,
        LayerList,
        Search,
        Portal,
        Layer,
        MapImageLayer,
        ImageryLayer,
        Basemap,
        Extent,
        SpatialReference
      )
    {

      if ('URLSearchParams' in window) { // Feature detection (URLSearchParams is not supported by Internet Explorer)
        var url = new URL(document.URL);
        var search_params = url.searchParams;
        if(search_params.has('fs')) {
          var url_bplan = search_params.get('fs');
          var expr = "bemerkung = '"+url_bplan+"'";
        } else {
          expr1 = "leer";
        }
      };

      var bplan_feature = new FeatureLayer({
        url: "https://serverurl/FeatureServer/1",
        outFields: ["*"],
        definitionExpression : expr,
        title : "Layer",
      });

      var baselayer = new ImageryLayer({
        // URL to the imagery service
        url: "https://serverurl/ImageServer",
        wkid: 25832
      });

      var basemap = new Basemap({
        baseLayers: [baselayer],
        title: "Luftbild 2020"
      })

      var map = new Map({
        basemap: basemap,
      });

      var view = new MapView({
        container: "viewDiv",
        map: map
      });


      map.add(bplan_feature);
      view.goTo(bplan_feature);


      //add layerlist
      var layerList = new LayerList({
        view: view,
        selectionEnabled : true
      });

      view.ui.add(layerList, {
      position: "top-right",
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

 

What you see is just a part of the script but I think one can see the problem. Using the goTo Method results in nothing.  Features and Basemap are all in 25832 UTM

Thanks for your help

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

You also have to wait until the featureLayer is created:

 

view.whenLayerView(featureLayer)
  .then(() => {
    view.goTo(featureLayer.fullExtent);
});

 

 

View solution in original post

6 Replies
KenBuja
MVP Esteemed Contributor

The target property of view.goTo has to be a lat/long, a geometry, a graphic, or a Viewpoint. You're providing it a FeatureLayer. Try

view.goTo(bplan_feature.fullExtent);

 

MichaelBoschert
New Contributor III

Thanks for your reply!

I tried that already but still the same behaviour. The coordinate-system is projected, does that affect?

0 Kudos
KenBuja
MVP Esteemed Contributor

You also have to wait until the featureLayer is created:

 

view.whenLayerView(featureLayer)
  .then(() => {
    view.goTo(featureLayer.fullExtent);
});

 

 

MichaelBoschert
New Contributor III

Thanks,

now it works when using the topo-vector basemap. But it still doesn`t work when using the custom basemap.

0 Kudos
KenBuja
MVP Esteemed Contributor

It looks like you'll have to project the extent to the basemap's spatial reference using GeometryService

MichaelBoschert
New Contributor III

Using the following code snippet resulted in succes!

      view.whenLayerView(bplan_feature).then(function(layerView) {
        layerView.watch("updating", function(val) {
// wait for the layer view to finish updating
        if (!val) {
          layerView.queryExtent().then(function(response) {
  // go to the extent of all the graphics in the layer view
      view.goTo(response.extent);
      });
    }
    });
    });

Thanks for your help KenBuja!

0 Kudos