8.8.3 Map Component Documentation

The documentation of the SDK's map components can be accessed by going to the documentation home page (https://developers.arcgis.com/javascript/latest/), clicking on the References tab, and then on the Map Components box.  Alternatively, if you happen to be looking at a Core API reference page, say MapView's, the Topics pane on the left side of the window will have its tree view expanded to show the core node.  If you scroll up to the top of the tree view and collapse the core node, you'll see that there are a few other nodes in the tree, all component-related, with map-components being one of them.  You can expand the map-components node to access a list of available components.

Click on the Map component to access its documentation.  The top of its page will look similar to a Core API class page, with info on how to import the component depending on whether you're accessing the SDK via ESM or CDN.  One nice aspect of map components, as shown on the Map component page, is that you don't need to import a separate module for each component the way that you must with Core API classes.  You just need to include the single reference to the map components library in your HTML doc's head and you're set to use any map component:
<script type="module" src="https://js.arcgis.com/4.33/map-components/"></script>

Much like a Core API class page, a map component page will include a section detailing its Properties, Methods, and Events.  It will also have a section on the component's Slots (which were discussed in the Calcite part of the lesson). 

The unique part of the component pages is the Demo section, which provides a mini-sandbox for seeing how the component works.  A live preview appears on the left, while a set of controls/properties/attributes appears on the right.  The control default values can be modified and the preview will update accordingly. 

The Map component demo shows a web map of NFL stadiums by default through the setting of the item-id control.  Wipe out that ID (the component will go blank), then assign a basemap setting of satellite (or any other valid basemap you wish).  Feel free to assign values to other controls, such as zoom or center.  (The center control requires a value in a form like -100, 40.) 

After you're done experimenting with the controls, click the Code tab along the top of the Demo GUI.  You should see the HTML code for the custom element you configured and can click the Copy button to copy the code to your clipboard.  Note that the "Control" settings made through the Demo GUI translate to HTML attribute settings.  (Interestingly, I'm seeing an item-id attribute without a string assigned to it after doing the customization I just recommended to you.  While the inclusion of this unset attribute won't hurt anything, it really makes more sense to just omit it if you're not setting it.)

The Demo GUI offers a number of buttons along the top that you're free to experiment with, though I'm not sure that I'd ever find a use for them myself.  There is a Reset controls button near the top of the Controls pane, allowing you to go back to its default settings.  You could also simply reload the documentation page altogether.  

One last point on the Demo sandbox is that the controls it shows will be the component properties that can be set to simple, scalar values (strings, numbers, and Booleans).  If you click on the Properties link to jump down to that section of the component's documentation, you should note that the properties that have something in the Attribute column correspond to the controls available in the Demo sandbox.  But you should keep in mind that those properties without something in the Attribute column are ones that you can set using JS code.  We'll see an example of doing that in the discussion of the Legend component later in this section.