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