European Developer Summit 2019: ArcGIS API for JavaScript Presentations

Preface

This session is about writing JavaScript & HTML!
Esri provides configurable applications

Preface

Browser requirements

Any modern browser will work (IE 11+)
Mobile: latest Samsung & Apple devices
Desktop: dedicated graphics card recommended

JavaScript API Samples

https://ralucanicola.github.io/JSAPI_demos

JavaScript API Samples

https://github.com/RalucaNicola/the-globe-of-extremes

JavaScript API Samples

https://ralucanicola.github.io/JSAPI_demos

Agenda

Getting Started
Adding Data
Visualizing Data
Interacting with Data
Web Scenes

Getting Started

The simplest possible app

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-sceneview

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Create a 3D map</title>

  <link rel="stylesheet" href="//js.arcgis.com/4.13/esri/css/main.css">
  <script src="//js.arcgis.com/4.13/"></script>

</head>
<body>
  <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "dojo/domReady!"
      ], function(Map, SceneView) {

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

        var view = new SceneView({
          container: "viewDiv",
          map: map
        });
      });
  </script>
  <div id="viewDiv"></div>
</body>
</html>

The simplest possible app

Out of the box you get:
- 3D rendering of the world
- User interaction with the 3D view (navigation)
- A set of basemaps to work with
- 3D terrain

Architecture

Resources

Adding Data

Add TileLayer

// Add layer showing housing density in NYC
var housingDensityLayer = new TileLayer({
  url: "//tiles.arcgis.com/.../NY_Housing..."
});
map.layers.add(housingDensityLayer);

// Add layer using as portal item
var housingDensityLayer = new TileLayer({
  portalItem: {
    id: "2d6f6624424a410a994bd9432befb907"
  }
});
map.layers.add(housingDensityLayer);

URL vs Portal Item ID

http://www.arcgis.com/home/item.html?id=2d6f6624424a410a994bd9432befb907

Add FeatureLayer

// Add points containing information of
// popular buildings in Manhattan
var buildingInfo = new FeatureLayer({
  portalItem: {
    id: "28cfd79f7c974597aa687417bf5169ca"
  }
  popupEnabled: true,
  outFields: ["NAME", "CNSTRCT_YR", "HEIGHT"],
});
map.layers.add(buildingInfo);

Add SceneLayer

// Add layer showing housing density in NYC
var buildingsLayer = new SceneLayer({
  portalItem: {
    id: "2e0761b9a4274b8db52c4bf34356911e"
  }
});
map.layers.add(buildingsLayer);

Layer types

Most "2D" layers are supported in 3D
- TileLayer, VectorTileLayer, ImageryLayer, WMSLayer, ...
- GraphicsLayer, FeatureLayer, GeoJSONLayer, ...
Some are not (yet)
- KMLLayer, MapNotesLayer, GeoRSSLayer
Comprehensive support list in the Layer API reference

Scene layers

Scene layers are specialized 3D layers
- Optimized for 3D drawing performance
- Open data format: i3s
- Not supported in 2D at the moment
Multiple types
- SceneLayer: 3D objects
- BuildingSceneLayer
- PointCloudLayer
- IntegratedMeshLayer

Projections

SceneView.viewingMode

Global scene: WebMercator WGS84
Local scene: Any projected CS One PCS only!

Visualizing Data

Visualization: FeatureLayer

// Visualize points with 3D icons
buildingInfoLayer.renderer = {
  type: "simple",
  symbol: new PointSymbol3D({
    symbolLayers: [new IconSymbol3DLayer({
      size: 18,
      resource: {
        href: "../images/info.png"
      }
    })],
    verticalOffset: {
      screenLength: 100,
      maxWorldLength: 100
    },
    callout: new LineCallout3D()
}};

// Improve perspective
buildingInfoLayer
  .screenSizePerspectiveEnabled = false;

Visualization: SceneLayer

// Visualize buildings
buildingLayer.renderer = new SimpleRenderer({
  symbol: new MeshSymbol3D({
    symbolLayers: [new FillSymbol3DLayer({
      material: {
        color: [153, 204, 203]
      }
    })]
  })
});

// Add solid edges
      material: { ... },
      edges: new SolidEdges3D({
        color: [50, 50, 50, 0.5]
      })

view.environment.lighting
  .directShadowsEnabled = true;

Visualization: Elevation Mode

// Add buildings scene layer
buildingLayer.visible = true;

// Draw point symbols on top of buildings
buildingInfoLayer.elevationInfo = {
  mode: "relative-to-scene"
};

Renderers and Symbols

Use the same renderers in 2D and 3D
- SimpleRenderer, ClassBreaksRenderer, UniqueValueRenderer
2D symbols are supported, lossy conversion
For 3D visualizations, use 3D symbols
- PointSymbol3D, LineSymbol3D, PolygonSymbol3D, MeshSymbol3D

3D Symbols

PointSymbol3D	LineSymbol3D	PolygonSymbol3D
IconSymbol3DLayer	LineSymbol3DLayer	FillSymbol3DLayer
ObjectSymbol3DLayer	PathSymbol3DLayer	ExtrudeSymbol3DLayer

3D Symbols


WebStyleSymbol	Import glTF	New 3D Line Symbols

3D Symbols

Animated WaterSymbol3DLayer

var waterSymbol = {
  type: "polygon-3d",
  symbolLayers: [{
    type: "water",
    waveDirection: 180,
    color: "#5975a3",
    waveStrength: "moderate",
    waterbodySize: "medium"
  }]
};

Interacting with Data

Working with the SceneView

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html

class SceneView {

  // Camera specifies the view
  camera: Camera;

  // Animations, framing
  goTo(viewpoint);

  // Finding graphics at screen locations
  hitTest(screenPoint);

  // User events
  on(event, callback);
}

goTo()

Simple, smooth navigation using SceneView.goTo(target, options)
Supports different targets:

Camera, Geometry, Geometry[], Graphic, Graphic[]
Specifying desired scale, position, heading and tilt
Specify animation options: animate, speedFactor, duration, easing
Returns a Promise which resolves when the animation has finished

goTo()

Use SceneView.goTo() to create smooth camera animations


// compute new heading:
// current heading + 30 degrees
var heading = view.camera.heading + 30;

// go to with heading only preserves view.center
view.goTo({
  heading: heading
});

SceneView: hitTest()

// Listen to click events
view.on("click",function(event) {

  // Check if user clicked on graphic
  view.hitTest(event).then(function(response) {
    var graphic = response.results[0].graphic;

    // Zoom into
    view.goTo({
      target: graphic,
      scale: view.scale
    }, {
      duration: 3000
    });
  });
});

const buildingLayer = new BuildingSceneLayer({
  portalItem: {
    id: "fca0557a79c645e6843b00a7b55ce511"
  }
});
view.map.layers.add(buildingLayer);

// Create slice widget
var sliceWidget = new Slice({
  view: view
});

// Add widget to the UI
view.ui.add(sliceWidget, "top-right");

// Create measurement widget
var msmtWidget = new DirectLineMeasurement3D({
  view: view
});
// Add widget to the UI
view.ui.add(msmtWidget, "top-right");

WebScene

Loading and saving your scene

WebScene

Remember:

WebScene

Works with `MapView` and `SceneView`
Cannot be saved

Only works with `SceneView`
Can be saved to Online/Enterprise

Loading a WebScene

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-basic


require([
  "esri/WebScene",
  "esri/views/SceneView",
  "dojo/domReady!"
], function(WebScene, SceneView) {

  var scene = new WebScene({
    portalItem: {
      id: "19dcff93eeb64f208d09d328656dd492"
    }
  });
  var view = new SceneView({
    container: "viewDiv",
    map: scene
  });
});

WebScene

Save to ArcGIS Online or Enterprise (SDK sample)
Persists data, not view or app behavior
...with some exceptions, for example:
- Popup behavior
- Initial view
JSON specification similar to WebMap
- https://developers.arcgis.com/web-scene-specification/

Where to?

ArcGIS API for JavaScript Using Animations
Tue 15.00, Salon Corinth

BIM and Building Scene Layer
Tue 13.00, Salon Durieux

ArcGIS API for JavaScript Building Interactive 3D Web Apps Using Open Data
Wed 12.00, Salon Corinth

Please Take Our Survey on the App

images/survey.png

ArcGIS API for JavaScriptGetting Started with 3D

ArcGIS API for JavaScript
Getting Started with 3D