AnsweredAssumed Answered

Zoom to Layer Extent

Question asked by tfagin on Sep 20, 2018
Latest reply on Sep 20, 2018 by tfagin

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

Outcomes