This sample will walk you through using layers. Prior to starting this, you should be familiar with the Map class and the Map component.
Layers are the fundamental building blocks of a map. All layers inherit properties, methods, and events from the Layer class. A map can include different types of layers, each a collection of spatial data — either as graphics or images — that represents real-world phenomena. Layers may store vector data (discrete features) or raster data (continuous cells or pixels).
Add the Map component
Add a Map component to your HTML and nest the Zoom, Layer List, and Legend components within the map using the slot attribute to adjust their positions as needed.
<arcgis-map>
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-layer-list slot="top-right"></arcgis-layer-list>
<arcgis-legend slot="bottom-left"></arcgis-legend>
</arcgis-map>Configure the Map component and FeatureLayer
Initialize a Map instance with hybrid, a 2D basemap, and get a reference to the Map component you added earlier. Use the url property in your FeatureLayer to point to your desired feature service. This service contains data about tree carbon storage at Warren Wilson College.
// Import Map, FeatureLayer, and PopupTemplate classes from the CDN.
const [Map, FeatureLayer, PopupTemplate] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/layers/FeatureLayer.js",
"@arcgis/core/PopupTemplate.js"
]);
// Create a Map instance, initializing it with a hybrid basemap.
const map = new Map({ basemap: "hybrid" });
// Get a reference to the Map component element.
const viewElement = document.querySelector("arcgis-map");
// Reference the desired feature service in a FeatureLayer instance.
const featureLayer = new FeatureLayer({
// This shows carbon storage of trees at Warren Wilson College.
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});Add the layer to the Map instance then provide that instance to the component via its map property. This connection enables the map to display with all your configurations applied.
// Add the feature layer to your Map class.
map.add(featureLayer);
// Connect the Map instance you configured with the component
// by assigning it to the component's corresponding property.
viewElement.map = map;Customize your PopupTemplate and Zoom
Add the layer's fullExtent to the Map component's goTo method and constraints property. Pass options to the go method to customize the transition and set the min in constraints to control the user's zoom level. These changes animate a zoom to the Feature and restrict navigation to its extent.
// Wait for the layer to be ready for use.
await viewElement.whenLayerView(featureLayer);
// Use the component's goTo method to zoom to the layer. Pass
// the options object to customize the transition. Await this
// so that it doesn't conflict with the minScale constraint.
await viewElement.goTo(featureLayer.fullExtent, { animate: true, duration: 2500 });
// Assign the FeatureLayer instance's fullExtent property to the
// component's geometry property and set minScale. This constrains
// the user's navigation to the layer's defined extent.
viewElement.constraints = {
geometry: featureLayer.fullExtent,
minScale: 10000
};Assign a Popup to the Feature, which you added to the Map instance and displayed through the Map component. The Popup is used to create custom popups. In this case, when a tree is selected, the popup will be titled with the tree's ID, and it will display the tree's crown height and carbon storage.
// Assign the PopupTemplate instance to the layer's popupTemplate
// property. This ensures your custom popup appears when selected.
// Tree ID will be its title. It will also display all the
// attributes added to the fieldInfos array.
featureLayer.popupTemplate = new PopupTemplate({
title: "Tree ID: {Tree_ID}",
content: [
{
type: "fields",
fieldInfos: [
{ fieldName: "Crown_Height", label: "Crown Height (Feet)" },
{ fieldName: "C_Storage", label: "Carbon Storage (kg)" }
]
}
]
});