Some background on web components technology can be found on Mozilla Developer. (Read as far as you like, but focus on the brief Concepts and Usage section at the top of the article. Also note that we won't be creating web components as outlined by the 5 steps at the end of that section. We'll just be consuming components created by Esri.)
Let's begin by examining a sample from Esri's Maps SDK for JS documentation.
- Go to the Sample Code area of the documentation, find the Intro to map components (2D) sample under the Get Started heading, and have a look at the code in the sandbox or CodePen.
Note that a map is added to the page through the use of a custom arcgis-map element. No need to instantiate separate Map and MapView objects as required when working strictly with the Core API. Initial map settings (basemap, zoom, and center) are applied as attributes on the HTML element. - Adjust the zoom and center attributes to focus the map on your area of interest.
Add zoom and home buttons to the UI using the Zoom and Home components:
<arcgis-map basemap="topo-vector" zoom="4" center="15, 65"> <arcgis-zoom position="top-left"></arcgis-zoom> <arcgis-home position="top-left"></arcgis-home> </arcgis-map>If you’d like to use the Map component to display a web map saved in ArcGIS Online, making that happen is as simple as setting its item-id attribute.
Go into AGO, find your Jen and Barry’s web map from Lesson 1, copy its portal item ID, and use it to set the map's item-id. Your web map will carry a basemap setting with it, so while setting the item-id attribute, you can also remove the basemap attribute:
<arcgis-map
basemap="topo-vector"item-id="<your web map id here>" zoom="6" center="-78, 42">
Awesome, huh? You're probably wondering why we didn't talk about this sooner. It's possible that as the course evolves, we'll shift the discussion of map components toward the beginning. These coarse-grained elements can really make it easy to put together relatively simple apps. However, if your app has much complexity to it, you're going to have to work with the finer-grained objects from the Core API. The two parts of the SDK are not mutually exclusive, and we'll momentarily how to build an app that utilizes both map components and objects from the Core API.
Before we do that, here are a few important points to note in this map component sample:
- You should add references to the Maps SDK for JS in the head of the HTML document, just as we've been doing.
The map components must be referenced separately (also in the head):
<script type="module" src="https://js.arcgis.com/4.33/map-components"></script>
- In the body of the doc, you no longer need a div that will serve as the container for a Core API Map object. The arcgis-map element will serve that purpose now. (If you want a 3D map instead, you can use arcgis-scene rather than arcgis-map.)
- JavaScript code that builds upon the components should go in a script element in the page body as opposed to the head.