arcgis-feature-templates-legacy

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

A function that can be defined to disable specific template items within the component. The function takes an object containing a layer and template. If the function returns true, the item is disabled.

Indicates whether the list of available feature template items should scroll within its containing element.

A defined function used to help filter template items within the component. A custom function can be used to aid when searching for templates. It takes a function which passes in an object containing a name property of the template item.

// Filter and display templates only if their labels contain the word `Street`
function myFilterFunction(filter) {
  let containsName = filter.label.includes("Street");
  return containsName;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  visibleElements: {
    filter: false, // disable the default filter UI
  },
  layers: [featureLayer], // in this example, one layer is used
  filterFunction: myFilterFunction
});

Text used to filter items.

It is possible to group template items. This can aid in managing various template items and how they display within the component. The values are discussed below.

Type	Description	Example
layer	This is the default grouping. Groups template items by layers.
geometry	Groups template items by geometry type.
none	The component displays everything in one list with no grouping.
GroupByFunction	Custom function that takes an object containing a FeatureTemplate and FeatureLayer.

// This example shows using a function to check if
// the layer title contains the word 'military'. If so,
// return a group of items called "All Military Templates"
function customGroup(grouping) {
  // Consolidate all military layers
  if (grouping.layer.title.toLowerCase().indexOf("military") > -1) {
    return "All Military Templates"
  }
// Otherwise, group by layer title
  return grouping.layer.title;
}

// Create the FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers,
  groupBy: customGroup
});

Since

ArcGIS Maps SDK for JavaScript 4.20

Indicates the heading level to use for the labels of grouped feature templates. By default, the group label is rendered as a level 4 heading (e.g. <h4>Group label</h4>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• Heading Elements

// Group label will render as an <h3>
featureTemplates.headingLevel = 3;

Indicates whether the templates filter displays.

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

• Calcite Icons

The component's default label.

An array of FeatureLayers to display within the component. The order in which these layers are set in the array dictates how they display within the component.

// The layers to display within the widget
let militaryUnits = new FeatureLayer({
  url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/2"
});

let militaryHostile = new FeatureLayer({
  url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6"
});

let layers = [militaryUnits, militaryHostile];

// Create FeatureTemplates widget
templates = new FeatureTemplates({
  container: "templatesDiv",
  layers: layers
});

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

• Associate components with a Map or Scene component

Specifies the selection behavior of list items. The "single" selection mode keeps the clicked list item selected. Whereas, "none" does not preserve the selection after clicking the list item.

The current state of the component.

A reference to the MapView or SceneView.

Creates a promise that resolves once the component is fully loaded.

const arcgisFeatureTemplatesLegacy = document.querySelector("arcgis-feature-templates-legacy");
document.body.append(arcgisFeatureTemplatesLegacy);
await arcgisFeatureTemplatesLegacy.componentOnReady();
console.log("arcgis-feature-templates-legacy is ready to go!");

Permanently destroy the component.

Selects the template item to use.