Create a 2D map with a layer JavaScript API 10 minutes

Overview

You will learn: how to create a new app that displays a basemap and a feature layer.

With the ArcGIS API for JavaScript and ArcGIS Online it's easy to create a new web mapping app that displays a basemap and layer. ArcGIS Online hosts a number of tile and vector tile basemaps that you can choose from, including streets, satellite, streets-vector, and streets-navigation-vector. You can also add your own datasets by adding feature layers. These layers are hosted by ArcGIS Online or by other ArcGIS servers. By default, feature layers will draw with pre-set symbols to fill the extent of map, but you can customize this by setting your own styles with a renderer or using a SQL expression to limit the data retrieved.

In this lab, you will build a simple mapping app with the topographic vector basemap and a feature layer that represents trailheads near Los Angeles.

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 - Create a 2D map with a feature layer</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 a 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.5/esri/css/main.css">
    <script src="https://js.arcgis.com/4.5/"></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/Map",
          "esri/views/MapView",
          "dojo/domReady!"
        ], function(Map, MapView) {
    
        var map = new Map({
          basemap: "topo-vector"
        });
    
        var view = new MapView({
          container: "viewDiv",
          map: map
        });
      });
    </script>
    
  3. Run and test your code to see the map.

Add a layer to the map

  1. In the JS code, add a module to create a feature layer for the trailhead dataset and then add the layer to the map.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {
    
      var map = new Map({
        basemap: "topo-vector"
      });
    
      //*** ADD ***//
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer"
      });
    
      map.add(featureLayer);
    
      var view = new MapView({
        container: "viewDiv",
        map: map
      });
    });
    
  2. In the JS code, center and zoom the view to the layer when it loads.

    var view = new MapView({
      container: "viewDiv",
      map: map,
      //*** ADD ***//
      center: [-118.24368,34.05293],
      zoom: 9
    });
    
  3. Run the code. The map should zoom to Los Angeles and show the trailheads dataset.

Congratulations, you're done!

Your app should look something like this.

Next Lab: Create a 3D scene with a layer

Challenge

Explore basemaps

Visit the JavaScript API documentation to learn more about the different types of basemaps available. Try some different string names such as "satellite" or "dark-gray-vector" and pick your favorite basemap. For example:

var map = new Map({
  basemap: "satellite"
});

Style a pop-up

In order to style a pop-up, inspect the data a little more closely and determine which fields should be output and which field values should be displayed. Visit the Trailheads dataset and determine which field values you would like to show and try adding this code.

var featureLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
  outFields: ["TRL_NAME","CITY_JUR", "LAT", "LON"],
  popupTemplate: {
    title: "{TRL_NAME}",
    content: "This trail is in {CITY_JUR} and located at {LAT},{LON}."
  }
});

Add more layers

Try to add a few more park datasets into the map. Here are a few suggestions:

  • Trails

    https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer

  • Parks and Open Spaces

    https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer

Filter features

Sometimes it's necessary to limit the data retrieved from a service. One way to accomplish this is by applying a SQL expression to the layer. Try defining an expression that limits the Trail Lines to those with an elevation gain less than 250.

// Trails
var featureLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer",
  definitionExpression: "ELEV_GAIN < 250"
});