map-component api

136
1
Jump to solution
3 weeks ago
MKY
by
New Contributor III

Does the arcgis map component only works with WebMap? How can I add a feature layer service to a map-component?

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

The map and scene components have a map property that you can reference to add layers.

https://developers.arcgis.com/javascript/latest/components/storybook/?path=/docs/map-components_comp...

In the "next" version, which will be in 4.30, we added a method on the elements for addLayer and addLayers.

async function load() {
	const Layer = await $arcgis.import("esri/layers/Layer");
	const url =
		"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";
	const layer = await Layer.fromArcGISServerUrl({
		url
	});
	// Reference the map component
	const mapElem = document.querySelector("arcgis-map");
	mapElem.addEventListener("arcgisViewReadyChange", () => {
		// works today
		// mapElem.map.add(layer);
	}, { once: true });
	// available in next, will be in 4.30
	mapElem.addLayer(layer);
}

load();

Here is a codepen.

https://codepen.io/odoe/pen/NWowrmo?editors=0010

View solution in original post

0 Kudos
1 Reply
ReneRubalcava
Frequent Contributor

The map and scene components have a map property that you can reference to add layers.

https://developers.arcgis.com/javascript/latest/components/storybook/?path=/docs/map-components_comp...

In the "next" version, which will be in 4.30, we added a method on the elements for addLayer and addLayers.

async function load() {
	const Layer = await $arcgis.import("esri/layers/Layer");
	const url =
		"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";
	const layer = await Layer.fromArcGISServerUrl({
		url
	});
	// Reference the map component
	const mapElem = document.querySelector("arcgis-map");
	mapElem.addEventListener("arcgisViewReadyChange", () => {
		// works today
		// mapElem.map.add(layer);
	}, { once: true });
	// available in next, will be in 4.30
	mapElem.addLayer(layer);
}

load();

Here is a codepen.

https://codepen.io/odoe/pen/NWowrmo?editors=0010

0 Kudos