layerList - Click Layer - Zoom to Layer

GurneeT — Wed, 29 Jun 2022 21:34:25 GMT

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

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"

href="https://js.arcgis.com/4.24/esri/themes/light/main.css"

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 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);

// }

// });

// 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({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

definitionExpression:"NAME = 'Boulder City'",

title: "Boulder City",

popupTemplate: popupJURISDICTIONPolygon,

visible: true,

opacity: 0.60,

renderer: JURISDICTIONRenderer

});

//HENDERSON

const JURISDICTION_HENDERSON = new FeatureLayer({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

definitionExpression:"NAME = 'City of Henderson'",

title: "Henderson",

popupTemplate: popupJURISDICTIONPolygon,

visible: true,

opacity: 0.60,

renderer: JURISDICTIONRenderer

});

//Las Vegas

const JURISDICTION_LV = new FeatureLayer({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

definitionExpression:"NAME = 'City of Las Vegas'",

title: "Las Vegas",

popupTemplate: popupJURISDICTIONPolygon,

visible: true,

opacity: 0.60,

renderer: JURISDICTIONRenderer

});

//Mesquite

const JURISDICTION_Mesquite = new FeatureLayer({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

definitionExpression:"NAME = 'City of Mesquite'",

title: "Mesquite",

popupTemplate: popupJURISDICTIONPolygon,

visible: true,

opacity: 0.60,

renderer: JURISDICTIONRenderer

});

//Nellis

const JURISDICTION_NELLIS = new FeatureLayer({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

definitionExpression:"NAME = 'Nellis AFB'",

title: "Nellis AFB",

popupTemplate: popupJURISDICTIONPolygon,

visible: true,

opacity: 0.60,

renderer: JURISDICTIONRenderer

});

//North Las Vegas

const JURISDICTION_CNLV = new FeatureLayer({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

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({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

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>

</body>

</html>

Re: layerList - Click Layer - Zoom to Layer

KristianEkenes — Wed, 29 Jun 2022 22:37:08 GMT

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.

Re: layerList - Click Layer - Zoom to Layer

GurneeT — Wed, 29 Jun 2022 22:58:33 GMT

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({

url: "https://gis.rtcsnv.com/arcgis/rest/services/Web/PROD_GISMO/MapServer/10",

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;

topic Re: layerList - Click Layer - Zoom to Layer in ArcGIS JavaScript Maps SDK Questions

layerList - Click Layer - Zoom to Layer

Re: layerList - Click Layer - Zoom to Layer

Re: layerList - Click Layer - Zoom to Layer