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

  1. Go to JSBin and create a new bin.

  2. 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

  1. In the <head>, add references to the ArcGIS CSS and JavaScript API.

    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://js.arcgis.com/4.6/"></script>
    
  2. 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>
    
  3. Run and test your code to view the web map.

Congratulations, you're done!

Your map app should look something like this.

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");

Explore other web maps