Overview

You will learn: how to add feature layers to a 3D map.

With the ArcGIS API for JavaScript it's easy to create a new 3D 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 provide your own styles with a renderer. The feature layer data can also be controlled by defining a SQL expression to limit the data retrieved. Another common customization is to configure the popup to show specific information about the layer when you click on features in the map.

In this lab, you will build a simple 3D mapping app with a satellite basemap and a feature layer that represents trailheads near Los Angeles.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: Add layers to a 3D scene.

Add a layer to the map

  1. In the require statement, remove the MapView module and add a reference to the SceneView and FeatureLayer modules.

    require([
      "esri/Map",
      //*** ADD ***//
      "esri/views/SceneView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, SceneView, FeatureLayer) {
    
  2. In the function, create a new FeatureLayer and set the url property to the Trailheads endpoint. Add the feature layer to the Map.

      //*** ADD ***//
      // Trailheads point feature layer
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer"
      });
    
      map.add(featureLayer);
    
  3. To create an animated 3D experience when the application loads, remove center and zoom from the constructor and move it to the view.when() method. This is called when the view is ready. In the callback function, use the goTo() method to animate the view. Set the center to [-118.71511,34.09042], zoom to 11 and tilt to 70.

      var view = new SceneView({
        container: "viewDiv",
        map: map
        //*** ADD ***//
        // center: [-118.71511,34.09042],
        // zoom: 10
      });
    
      //*** ADD ***//
      view.when(function(){
        view.goTo({
          center: [-118.71511,34.09042],
          zoom: 11,
          tilt: 70
        })
      });
    
  4. Run your code to view the map with the trailheads layer.

Congratulations, you're done!

Your app should look something like this.

Challenge

Add more layers

Try to add a some additional layers to the map. Add the polygon and line layers first so the point layer is drawn on top.

  • Trails (line)

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

  • Parks and Open Spaces (polygon)

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