Display a web map
Build an app that loads and displays a web map.
Overview
You will learn: how to load and display a pre-configured web map.
The fastest way to create a fully styled 2D mapping application is to load a web map. Web maps are special because the format is interchangeable between a number of applications running on the ArcGIS platform. Web maps are generally created interactively with the Map Viewer and saved in ArcGIS Online. When you save a web map it stores a number of settings such as the basemap, extent, layers and styles, and pop-up and label configurations. When a web map is loaded by an application, the settings are used to set up and configure the map, saving you from having to set them up yourself. Web maps can also be updated independently from your apps, making it handy if you want to update the map and layers but don't want to make changes to the application code itself.
In this lab, you will use the ArcGIS API for JavaScript to build a mapping app that loads and displays a web map of trails and parks in LA area.
Steps
Create a starter app
-
Go to the JavaScript Starter App.
-
In CodePen, click Fork and save the pen as
ArcGIS DevLabs: Display a web map.
Preview the 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.
Display the web map in an app
-
In the
requirestatement, remove the Map module and add a reference to the WebMap module.require([ //*** ADD ***// "esri/WebMap", "esri/views/MapView", "dojo/domReady!" //** ADD ***// ], function(WebMap, MapView) { -
In the
function, remove the code to create a Map and replace it with code to create a new WebMap. Set the portalItem id to41281c51f9de45edaf1c8ed44bb10e30. Set the map property of the MapView to thewebMapto display the web map.//*** ADD ***// var webmap = new WebMap({ portalItem: { id: "41281c51f9de45edaf1c8ed44bb10e30" } }); var view = new MapView({ container: "viewDiv", //*** ADD ***// map: webmap }); -
Run your code to view the web map. Be sure to click on the layers and zoom around!
Congratulations, you're done!
Your map app should look something like this.
Next labs
Add layers to a 3D scene
Build an app that displays feature layers in 3D.
Display a web scene
Build an app that loads and displays a web scene.
Display point, line, and polygon graphics
Create geometries and graphics from coordinates and add them to a map.
Display and track your location
Find and track your device location on a map.
Challenge
Add a legend
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",
"dojo/domReady!"
//*** ADD ***//
], 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");
Explore other web maps
ArcGIS Online contains thousands of public web maps that can be loaded by applications. Go to ArcGIS Online and search for web maps around Los Angeles. Feel free to search for any topic of interest. When you find a web map you like, open it in the Map Viewer and copy the id (HINT: Look at the end of the URL) and paste it into this application. Run the application to view the web map in your app.