topic Re: Zoom to Layer Extent in ArcGIS JavaScript Maps SDK Questions

Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 15:26:23 GMT

I am trying to create a function to zoom to the extent of a layer. I have found a good example here, but my JavaScript skills and knowledge of the JSAPI is just not good enough to cannibalize and shoehorn this into my simple example (I only attempt my hand at it about once every eight months or so). Rather than further bumbling the code (and after seeking additional examples to no avail), I thought I would seek assistance from others much more knowledgeable than I.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.7</title>
<style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script ></script>

<script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/support/webMercatorUtils",
      "esri/widgets/Search",
      "esri/widgets/Locate",
      "esri/widgets/Expand",
      "esri/layers/TileLayer",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "dojo/dom",
      "dojo/domReady!"
    ], function(Map, MapView, webMercatorUtils, Search, Locate, Expand, TileLayer, LayerList, BasemapGallery, dom) {

      var droneimage1 = new TileLayer({
          url: "https://tiles.arcgis.com/tiles/3xOwF6p0r7IHIjfn/arcgis/rest/services/a010002_1/MapServer",
          title: "Drone Image"
       });


      var map = new Map({
        basemap: "streets",
        layers: [droneimage1]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-103.064, 36.175] // longitude, latitude
      });


      function showCoordinates(evt) {
        var point = view.toMap({x: evt.x, y: evt.y});
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
      }

      view.when(function(){
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

      // create a search widget
       var searchWidget = new Search({
        view: view
      });

      // create the locate widget
      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });


      // Add the search widget to the top right corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });



      // create a layer list widget
      var layerList = new LayerList({
        view: view,

   // executes for each ListItem in the LayerList
       listItemCreatedFunction: function (event) {

   // The event object contains properties of the
     // layer in the LayerList widget.
    var item = event.item;

     // set an action for zooming to the full extent of the layer
              item.actionsSections = [[{
                title: "Zoom to layer",
                className: "esri-icon-zoom-out-fixed",
                id: "full-extent"
              }]];
            }

      });
      view.ui.add(layerList, "bottom-left");





      // Create a BasemapGallery widget instance and set
      // its container to a div element

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget

      var bgExpand = new Expand({
        view: view,
        content: basemapGallery
      });

      // Add the expand instance to the ui

      view.ui.add(bgExpand, "top-left");



    });
</script>
</head>

<body>
<div id="viewDiv"></div>
<span id="info" style="position:absolute; right:25px; bottom: 25px; color:#000000; font-size: 12px; z-index:50;"></span>
</body>
</html>

Thanks,

Todd

Re: Zoom to Layer Extent

RobertScheitlin__GISP — Thu, 20 Sep 2018 15:50:21 GMT

Todd,

You are already zoomed to the fullExtent of the droneimage1 layer. based on the fullExtent property of that layer.

Re: Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 15:57:45 GMT

Robert,

I appreciate your reply and your willingness to always help newbies like me on these issues.

In this instance, I am merely using one layer and attempting to get a handle on the code before adding additional layers. So, while the map is currently at the extent of droneimage1 layer, this will not always be the case and I wish to enable users to use this functionality on other layers in a layer list, as well (which will all be in different locations and have different spatial extents).

Thanks,

Todd

Re: Zoom to Layer Extent

RobertScheitlin__GISP — Thu, 20 Sep 2018 15:59:34 GMT

Todd,

When you click on the ellipses next to the layer in the layer list widget you get the option to zoom to layer.

Re: Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 16:03:53 GMT

Yes, but it doesn't work. If you zoom anywhere else in the map and click it, it does nothing.

Re: Zoom to Layer Extent

RobertScheitlin__GISP — Thu, 20 Sep 2018 16:08:58 GMT

Only for that layer type though. If you were to add a FeatureLayer or a MapImageLayer it does work

Re: Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 16:16:52 GMT

Ah, OK, so my issue is this is a TileLayer rather than a FeatureLayer of MapImageLayer? (Smacks forehead.)
OK, I will see what I can do if this is, indeed, the case.

Once again, I truly appreciate your assistance.

Todd

Re: Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 16:32:20 GMT

I have added a FeatureLayer and still get nothing...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.7</title>
<style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>

<script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/support/webMercatorUtils",
      "esri/widgets/Search",
      "esri/widgets/Locate",
      "esri/widgets/Expand",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "dojo/dom",
      "dojo/domReady!"
    ], function(Map, MapView, webMercatorUtils, Search, Locate, Expand, TileLayer, FeatureLayer, LayerList, BasemapGallery, dom) {

      var droneimage1 = new TileLayer({
          url: "https://tiles.arcgis.com/tiles/3xOwF6p0r7IHIjfn/arcgis/rest/services/a010002_1/MapServer",
          title: "Drone Image"
       });

       var eco = new FeatureLayer({
          url: "http://services.arcgis.com/3xOwF6p0r7IHIjfn/arcgis/rest/services/OK_LevelIII_Ecoregions/FeatureServer",
          title: "Oklahoma Ecoregions"
       });


      var map = new Map({
        basemap: "streets",
        layers: [droneimage1, eco]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-103.064, 36.175] // longitude, latitude
      });


      function showCoordinates(evt) {
        var point = view.toMap({x: evt.x, y: evt.y});
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
      }

      view.when(function(){
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

      // create a search widget
       var searchWidget = new Search({
        view: view
      });

      // create the locate widget
      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });


      // Add the search widget to the top right corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });



      // create a layer list widget
      var layerList = new LayerList({
        view: view,

   // executes for each ListItem in the LayerList
       listItemCreatedFunction: function (event) {

   // The event object contains properties of the
     // layer in the LayerList widget.
    var item = event.item;

     // set an action for zooming to the full extent of the layer
              item.actionsSections = [[{
                title: "Zoom to layer",
                className: "esri-icon-zoom-out-fixed",
                id: "full-extent"
              }]];
            }

      });
      view.ui.add(layerList, "bottom-left");





      // Create a BasemapGallery widget instance and set
      // its container to a div element

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget

      var bgExpand = new Expand({
        view: view,
        content: basemapGallery
      });

      // Add the expand instance to the ui

      view.ui.add(bgExpand, "top-left");



    });
</script>
</head>

<body>
<div id="viewDiv"></div>
<span id="info" style="position:absolute; right:25px; bottom: 25px; color:#000000; font-size: 12px; z-index:50;"></span>
</body>
</html>

Re: Zoom to Layer Extent

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:49:21 GMT

Todd,

Sorry I missed that you were missing the actual zoom to layer code.

Here is your example fixed:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to MapView - Create a 2D map - 4.8</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/support/webMercatorUtils",
      "esri/widgets/Search",
      "esri/widgets/Locate",
      "esri/widgets/Expand",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "dojo/dom",
      "dojo/domReady!"
    ], function(Map, MapView, webMercatorUtils, Search, Locate, Expand, TileLayer, FeatureLayer, LayerList, BasemapGallery,
      GeometryService, ProjectParameters, dom) {

      var droneimage1 = new TileLayer({
        url: "https://tiles.arcgis.com/tiles/3xOwF6p0r7IHIjfn/arcgis/rest/services/a010002_1/MapServer",
        title: "Drone Image"
      });
      var eco = new FeatureLayer({
        url: "http://services.arcgis.com/3xOwF6p0r7IHIjfn/arcgis/rest/services/OK_LevelIII_Ecoregions/FeatureServer",
        title: "Oklahoma Ecoregions"
      });


      var map = new Map({
        basemap: "streets",
        layers: [droneimage1, eco]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-103.064, 36.175] // longitude, latitude
      });

      function showCoordinates(evt) {
        var point = view.toMap({
          x: evt.x,
          y: evt.y
        });
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
      }

      view.when(function() {
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
      });

      // create a search widget
      var searchWidget = new Search({
        view: view
      });

      // create the locate widget
      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      // Add the search widget to the top right corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });

      // create a layer list widget
      var layerList = new LayerList({
        view: view,

        // executes for each ListItem in the LayerList
        listItemCreatedFunction: function(event) {

          // The event object contains properties of the
          // layer in the LayerList widget.
          var item = event.item;

          // set an action for zooming to the full extent of the layer
          item.actionsSections = [
            [{
              title: "Zoom to layer",
              className: "esri-icon-zoom-out-fixed",
              id: "full-extent"
            }]
          ];
        }

      });
      layerList.on("trigger-action", function(event) {
        // Capture the action id.
        var id = event.action.id;

        if (id === "full-extent") {
          // if the full-extent action is triggered then navigate
          // to the full extent of the visible layer
          if(event.item.layer.fullExtent.spatialReference !== view.spatialReference){
            var geomSer = new GeometryService({url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});
            var params = new ProjectParameters({
              geometries: [event.item.layer.fullExtent],
              outSpatialReference: view.spatialReference
            });
            geomSer.project(params).then(function(results){
              view.goTo(results[0]);
            });
          }else{
            view.goTo(event.item.layer.fullExtent);
          }
        }
      });

      view.ui.add(layerList, "bottom-left");

      // Create a BasemapGallery widget instance and set
      // its container to a div element
      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget
      var bgExpand = new Expand({
        view: view,
        content: basemapGallery
      });

      // Add the expand instance to the ui
      view.ui.add(bgExpand, "top-left");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <span id="info" style="position:absolute; right:25px; bottom: 25px; color:#000000; font-size: 12px; z-index:50;"></span>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Zoom to Layer Extent

ToddFagin — Thu, 20 Sep 2018 17:47:58 GMT

Your tenacity and willingness to help is amazing. I greatly appreciate it. This is exactly what I needed.

Again, thank you. You've saved me from multiple binds before and today is no different.

Todd