Web components were added to the ArcGIS Maps SDK for JavaScript at version 4.30. These components are built as custom HTML elements which means that they are standard in modern browsers and framework-agnostic. In the SDK, components simplify common coding patterns by encapsulating much of the API's boilerplate code.
Applications can now be defined declaratively using custom HTML elements, reducing the need for configuring views, containers, and module imports. Once the components script is included, elements are immediately available for use.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
<!-- Load the JavaScript Maps SDK Map components or other component packages -->
<script
type="module"
src="https://js.arcgis.com/4.33/map-components/">
</script>
<body>
<arcgis-map basemap="topo-vector" zoom="4" center="15, 65"></arcgis-map>
</body>If you are new to web components or just need to brush up on the topic, there are a variety of resources to help:
Using components reduces the amount of repetitive code needed every time you implement an application with the JavaScript Maps SDK. For example, here is the JavaScript code for a simple map using modules from the SDK's CDN.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [Map, MapView] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/views/MapView.js",
]);
const map = new Map({
basemap: "streets-vector",
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [8.5, 47.37],
});Here is the equivalent code in HTML using map-components. This snippet demonstrates setting attributes directly on the component:
Use dark colors for code blocks Copy
1
<arcgis-map zoom="14" center="8.5,47.37" basemap="streets-vector"></arcgis-map>Component-based patterns eliminate the need to manually position UI elements using view.ui.add and integrate directly into the DOM. Layout and styling follow standard HTML and CSS behavior, enabling more flexible design without requiring SDK-specific constructs and imports.
To implement functionality that runs after the arcgis-map component has loaded, you can query for the HTML element and then use the element's object to set event listeners, get or set properties, or implement methods directly on the component.
Here's a snippet that sets several properties, waits for when the view is ready, and then logs the map's itemId to the console. In this simple example, there is no need to import modules.
index.html
Use dark colors for code blocks Copy
1
2
<arcgis-map></arcgis-map>
<script type="module" src="/main.js"></script>main.js
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
// Query for the HTML element
const viewElement = document.querySelector("arcgis-map");
// Set map properties programmatically
viewElement.zoom = 14;
viewElement.center = [8.5, 47.37];
viewElement.basemap = "streets-vector";
// Wait for the view to be ready
await viewElement.viewOnReady();
// Log the map's item id
console.log(viewElement.itemId)Components can be configured programmatically through properties or directly in the custom element using attributes. Properties can be updated, events can be observed, and lifecycle methods such as viewOnReady() are exposed for controlling application logic flow.
While components streamline application setup, most projects can continue to use the core API to support custom behavior as shown above. Modules can be imported dynamically using $arcgis.import() to configure views or integrate additional functionality as needed.
Based on your requirements, your application can be built with the CDN and vanilla HTML and JavaScript, or it can be built locally with npm using JavaScript bundlers and frameworks. See the Get Started guide for more details.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4