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).
Configure the Renderer and FeatureLayer
Customize the symbol style, size breakpoints, and legend title by setting up a SimpleRenderer.
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady(); // Wait for the properties to be ready.
// Configure the renderer to alter the symbol style, size breaks, and legend.
const outline = { color: "#A9A9A9", width: 0.5 }; // autocasts as new SimpleLineSymbol()
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
// autocasts as new SimpleMarkerSymbol()
symbol: { type: "simple-marker", size: 6, color: "#13EB0C", outline },
visualVariables: [
{
type: "size", // autocasts as new SizeVariable()
field: "C_Storage",
legendOptions: { title: "Carbon Storage" },
stops: [
{ value: 1000, size: 4, label: "<1000" },
{ value: 4000, size: 12, label: "4000" },
{ value: 8000, size: 20, label: "8000" },
{ value: 10000, size: 26, label: "10,000" },
{ value: 13000, size: 30, label: ">13,000" },
],
},
],
};Point the FeatureLayer to the desired feature service using its url property. This particular service contains data about tree carbon storage at Warren Wilson College. Set the number formatting and labels using fieldConfigurations. The popupTemplate will use these configurations for all the fields you specified to display in its fieldInfos array. Apply all symbol customizations by adding the renderer to the layer.
const fieldFormat = { type: "number", useGrouping: "always" };
const fieldInfos = [{ fieldName: "Crown_Height" }, { fieldName: "C_Storage" }];
const featureLayer = new FeatureLayer({
// Point to the Warren Wilson College tree carbon storage service.
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
// Define the number formatting and labels for popup values.
fieldConfigurations: [
{ name: "Crown_Height", alias: "Crown Height (ft)", fieldFormat },
{ name: "C_Storage", alias: "Carbon Storage (kg)", fieldFormat },
],
// Order smaller features on top of larger features based on carbon storage.
orderBy: [{ field: "C_Storage" }], // defaults to ascending
popupTemplate: {
title: "Tree ID: {Tree_ID}", // Specify the popup title.
content: [{ type: "fields", fieldInfos }], // Specify the fields to display.
},
renderer, // Add the renderer to load the symbol configuration.
});Include the layer in the map by using the add method on the component's map property. Now, when a feature is selected, a popup shows the tree’s ID as the title along with its crown height and carbon storage. Wait for the layer to be fully loaded before utilizing it.
viewElement.map.add(featureLayer); // Use the map property to add the layer.
await viewElement.whenLayerView(featureLayer); // Wait for the layer to be usable.Configure the Zoom and Constraints
Add the layer's fullExtent to the Map component's goTo method and constraints property. Customize the zoom animation by passing options to go. Next, set the min in constraints to limit how far a user can zoom out. Together, these steps will animate a zoom to the Feature and then restrict navigation to the defined extent and scale.
// Zoom to the layer's full extent and customize the animation.
await viewElement.goTo(featureLayer.fullExtent, { animate: true, duration: 2500 });
// Constrain navigation to the layer's full extent.
viewElement.constraints = { geometry: featureLayer.fullExtent, minScale: 10000 };