You will learn: how to build an app to load and display a web map from ArcGIS Online.
Applications can load and display 2D
In this tutorial, you will build an app that loads and displays a pre-configured web map stored in
Open the JavaScript Starter App on CodePen.
In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Display a web map
.
Go to the LA Trails and Parks Map to view the map in the Map Viewer. Make note of the ID at the end of the URL.
In the require
statement, remove the Map
module and add a reference to the WebMap
module.
require([
"esri/WebMap",
"esri/views/MapView"
], function(WebMap, MapView) {
At the beginning of the code in the main function
, remove the code to create a Map
and MapView
and replace it with code to create a new WebMap
and a new MapView
. Set the portalItem
ID to 41281c51f9de45edaf1c8ed44bb10e30
. Update the code in the MapView
to set the webmap
to the map
property and comment the code to center and zoom the map. The web map provides the positioning information.
//*** ADD ***//
var webmap = new WebMap({
portalItem: {
id: "41281c51f9de45edaf1c8ed44bb10e30"
}
});
var view = new MapView({
container: "viewDiv",
//*** UPDATE ***//
map: webmap
//center: [-118.80500,34.02700],
//zoom: 13
});
Run your code to view the web map. Be sure to click on the layers and zoom around!
Your map app should look something like this.
To make your mapping app more meaningful, try adding a Legend
and ScaleBar
widget. Create a Legend
widget and then add it to the top-right
position of the view DefaultUI
. Now try adding a ScaleBar
to the bottom-left
corner. Visit the documentation to learn more about widgets and how to position them in the view.
require([
"esri/WebMap",
"esri/views/MapView",
//*** ADD ***//
"esri/widgets/Legend",
"esri/widgets/ScaleBar"
], function(WebMap, MapView, Legend, ScaleBar) {
...
//*** ADD ***//
var legend = new Legend({
view: view
});
view.ui.add(legend, "top-right");
var scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");
ArcGIS Online contains thousands of public web maps that can be loaded by applications. Go to