Display a web map
Overview
You will learn: how to load and display a pre-configured web map.
With the ArcGIS API for JavaScript, it is easy to create an app that displays a web map. A web map is special because its format is interchangeable between most 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 the initial map configuration settings such as the basemap, layer styles and the pop-up configuration, making it easy for you to load the web map and use the pre-existing settings. This will give you a jump-start building great looking apps. Web maps can also be updated and saved independently from your apps. This is handy if you want to make changes to the map and layers but don't want to make code changes to the app itself.
In this lab, you will use the ArcGIS API for JavaScript to build a simple mapping app that loads and displays a web map. You can use the web map we provide or your own if you have one.
Steps
Create an HTML page
-
Go to JSBin and create a new bin.
-
Add the main HTML content to the bin.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>DevLabs - Display a Web Map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div id="viewDiv"></div> </body> </html>
Add JavaScript to load the web map into the view
-
In the
<head>, add references to the ArcGIS CSS and JavaScript API.<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> -
In the
<head>, add a<script>tag and the following JavaScript to load the necessary modules to create the map and view.<script> require([ "esri/WebMap", "esri/views/MapView", "dojo/domReady!" ], function(WebMap, MapView) { var webmap = new WebMap({ portalItem: { id: "41281c51f9de45edaf1c8ed44bb10e30" // This was created in the "Style a web map" and "Configure pop-ups" design labs } }); var view = new MapView({ container: "viewDiv", map: webmap }); }); </script> -
Run and test your code to view the web map.
Congratulations, you're done!
Your map app should look something like this.
Related Labs
Display a styled vector basemap
Build an app that displays a vector basemap with custom styles.
Create a 2D map with a layer
Build an app that displays a basemap and a feature layer.
Create a 3D scene with a layer
Build an app that displays a basemap and a feature layer in 3D
Access private layers
Build an app that requires a login.
Track your location
Build an app that tracks your device location on a map.
Style a feature layer
Apply symbol colors and styles based on attribute values.
Configure a pop-up
Format and style pop-ups for feature layers.
Query a feature layer
Execute a SQL query and add features to the map as graphics.
Challenge
Add a title
In the HTML, add a div tag and CSS for the web map title. Ensure you pad the top of the map 50px to account for the title height.
<style>
#titleDiv {
position: absolute;
width: 100%;
padding: 15px;
line-height: 1;
z-index: 1;
background: #fff;
font-family: "Avenir Next W00";
font-size: 20px;
}
</style>
<body>
<div id="titleDiv"></div>
<div id="viewDiv"></div>
</body>
Add code to load the title into the div.
var view = new MapView({
container: "viewDiv",
map: webmap,
//*** ADD ***//
padding: {top: 50}
});
//*** ADD ***//
webmap.then(function(map){
document.getElementById("titleDiv").innerHTML = map.portalItem.title;
});
Add a legend
Add a legend widget to the upper right of the map.
require([
"esri/WebMap",
"esri/views/MapView",
//*** ADD ***//
"esri/widgets/Legend",
"dojo/domReady!"
], function(WebMap, MapView, Legend) {
...
//*** ADD ***//
var legend = new Legend({
view: view
});
view.ui.add(legend, "top-right");