Community

layerList - Click Layer - Zoom to Layer

430
2
06-29-2022 02:34 PM
GurneeT
by
New Contributor
‎06-29-2022 02:34 PM

I am trying to enable the functionality of when the user clicks on a layer in the layerList the map zooms to that layer. This seems like a simple task but I have been unable to figure this one out. New to the Javascript environment. Found lot of helpful sites but none that addressed this one directly. Any help would be appreciated.

<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 | Sample | ArcGIS API for JavaScript
      4.24
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
    />
    <script src="https://js.arcgis.com/4.24/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/tasks/GeometryService",
        "esri/Graphic",
        "esri/widgets/BasemapGallery",
        "esri/widgets/BasemapToggle",
        "esri/widgets/Expand",
        "esri/widgets/LayerList",
        "esri/layers/GroupLayer",
        ],(
        Map,
        MapView,
        FeatureLayer,
        GraphicsLayer,
        GeometryService,
        Graphic,
        BasemapGallery,
        BasemapToggle,
        Expand,
        LayerList,
        GroupLayer,
        ) =>
       
        {const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 11,
          center: [-115.16487854541005, 36.1559643474511] // longitude, latitude
        });

        // Add the Basemap Gallery widget
         const basemapGallery = new BasemapGallery({
          view: view
        });
       
         // Add the Expand Gallery widget to the top-right corner of the view
        const bgExpand = new Expand({
            view,
            content: new BasemapGallery({ view }),
            expandIconClass: "esri-icon-basemap"
         });

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

         //Add Layer List ----------------------------------------------------------------------------------------------------------------------------
          view.when(() => {
          const layerList = new LayerList({
            view: view,
        });

// // COULDN'T GET THIS TO WORK - 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 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);
// }
// }
// });


          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-left");
        });

        //Define Popup for JURISDICTION Polygon -----------------------------------------------------------------------------------------------------------------
        const popupJURISDICTIONPolygon = {
            title: "JURISDICTION",
            content:"<b><u>{NAME}</u></b> "                            
        }

        const popupCCJURISPolygon = {
            title: "JURISDICTION",
            content:"<b><u>Clark County</u></b> "                            
          }

        // Create the JURISDICTION Renderer ----------------------------------------------------------------------------------------------------------------
        let JURISDICTIONRenderer = {
                      type: "unique-value",  // autocasts as new UniqueValueRenderer()
                      field: "PLACE",
                      uniqueValueInfos: [
                      {
                          value: "10",
                          symbol: {
                              type: "simple-fill",
                              color: "red"
                          }
                        },{
                          value: "60",
                          symbol: {
                              type: "simple-fill",
                              color: "green"
                          }
                        },{
                          value: "65",
                          symbol: {
                              type: "simple-fill",
                              color: "blue"
                          }
                        },{
                          value: "71",
                          symbol: {
                              type: "simple-fill",
                              color: "purple"
                          }
                        },{
                          value: "77",
                          symbol: {
                              type: "simple-fill",
                              color: "brown"
                          }
                        },{
                          value: "80",
                          symbol: {
                              type: "simple-fill",
                              color: "yellow"
                          }
                        },{
                          value: "0",
                          symbol: {
                              type: "simple-fill",
                              color: "orange"
                          }
                        },
                      ]
                    };

        //Jurisdiction feature layer by Entity
          //BOULDER CITY
          const JURISDICTION_BC = new FeatureLayer({
            definitionExpression:"NAME = 'Boulder City'",
            title: "Boulder City",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //HENDERSON
          const JURISDICTION_HENDERSON = new FeatureLayer({
            definitionExpression:"NAME = 'City of Henderson'",
            title: "Henderson",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //Las Vegas
          const JURISDICTION_LV = new FeatureLayer({
            definitionExpression:"NAME = 'City of Las Vegas'",
            title: "Las Vegas",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //Mesquite
          const JURISDICTION_Mesquite = new FeatureLayer({
            definitionExpression:"NAME = 'City of Mesquite'",
            title: "Mesquite",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //Nellis
          const JURISDICTION_NELLIS = new FeatureLayer({
            definitionExpression:"NAME = 'Nellis AFB'",
            title: "Nellis AFB",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //North Las Vegas
          const JURISDICTION_CNLV = new FeatureLayer({
            definitionExpression:"NAME = 'City of North Las Vegas'",
            title: "North Las Vegas",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          //Clark County
          const JURISDICTION_CC = new FeatureLayer({
            definitionExpression:"NAME = ''",
            title: "Clark County",
            popupTemplate: popupCCJURISPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });
       
          /********************************
          // Create JURISDICTION GroupLayer
          *********************************/

          const JURISDICITONGroupLayer = new GroupLayer({
            title: "Jurisdictions",
            visible: true,
            visibilityMode: "exclusive",
            layers: [JURISDICTION_NELLIS, JURISDICTION_Mesquite, JURISDICTION_BC, JURISDICTION_CNLV,
            JURISDICTION_HENDERSON, JURISDICTION_LV, JURISDICTION_CC,],
            opacity: 0.60
          });
     
        // ADD LAYERS TO MAP -------------------------------------------------------------------------------------------------------------------------------------------------------------

            map.addMany([JURISDICITONGroupLayer]);    
        })        
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
0 Kudos
2 Replies
KristianEkenes
by Esri Regular Contributor
Esri Regular Contributor
‎06-29-2022 03:37 PM

Have you seen this example? https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-queryextent/ It looks like you should be using queryExtent rather than getting the fullExtent of the layer. This way you can avoid projection engine as well. queryExtent will give you the full extent of the layer in the spatial reference of the view.

0 Kudos
GurneeT
by
New Contributor
‎06-29-2022 03:58 PM

Thanks for responding.  I have added the queryExtent code but that simply changes my initial extent to which ever layer I added the code to.

//HENDERSON
          const JURISDICTION_HENDERSON = new FeatureLayer({
            definitionExpression:"NAME = 'City of Henderson'",
            title: "Henderson",
            popupTemplate: popupJURISDICTIONPolygon,
            visible: true,
            opacity: 0.60,
            renderer: JURISDICTIONRenderer
          });

          JURISDICTION_HENDERSON.when(() => {
                    return JURISDICTION_HENDERSON.queryExtent();
                })
                .then((response) => {
                    view.goTo(response.extent);
                 });
 
I have visited that ESRI example before but all the definitionexpressions / subexpressions made me question if that was the right path. I feel like the following snippet from that example might have something to do with solving my problem :
 

layerList.on("trigger-action", (event) => {
const actionId = event.action.id;
const layer = event.item.layer;

const subExpression = expressions.find((item) => {
return item.id === actionId;
}).expression;

 

0 Kudos