ArcGIS API for JavaScript: Getting Started Andy René

Transcription

1 ArcGIS API for JavaScript: Getting Started Andy René

2

3 Agenda Introduction to the ArcGIS API 4.x for JavaScript Fundamentals and Patterns Platform Integration Visualizations (2D and 3D) New Features Bonus - Custom Builds Questions

4 Introduction to the ArcGIS API 4.x for JavaScript Simplified and consistent API Write apps in ES6 or TypeScript Modern browser support (IE11+) 3D support (No plugin required!) And many more!

5 Where to begin? <link rel="stylesheet" href=" <script src="

6 Hello World Map const map = new Map({ basemap: "streets" }) const view = new MapView({ container: "viewdiv", map: map })

7 Fundamentals and Patterns Map and View Map Contains Layers, data model for the world MapView and SceneView Responsible for rendering the Map

8 Map and View Relationship

9 Map and View Relationship

10 Basemap, Ground and Operational Layers Layers are separated into 3 main groups. basemap ground operational layers basemap and ground gives context to the operational layers.

11 Basemap, Ground and Operational Layers basemap and ground can be set by well-know ids: const map = new Map({ /* streets, satellite, hybrid, terrain, topo, gray, dark gray, oceans, national geographic, osm, dark gray vector, gray vector, streets vector, topo vector, streets night vector, streets relief vector, streets navigation vector */ basemap: "streets" /* world elevation */ ground: "world elevation" })

12 Basemap, Ground and Operational Layers Basemaps A PEN BY odoe or by specifying them

13 Basemap, Ground and Operational Layers basemap can also be set by item id. const map = new Map({ basemap: { portalitem: { id: "8b3d38c faa83f7b7aca80bd76" } } })

14 Basemap, Ground and Operational Layers Map.layers contains Layer objects with the operational data the user interacts with. Webinar - Add a FeatureLayer A PEN BY odoe

15 Basemap, Ground and Operational Layers GroupLayer Webinar - Grouplayer A PEN BY odoe

16 Layers and LayerViews FeatureLayer GraphicsLayer MapImageLayer ImageryLayer GeoRSSLayer ElevationLayer SceneLayer (3D) IntegratedMeshLayer (3D) WebTileLayer WMTSLayer TileLayer Grouplayer VectorTileLayer CSVLayer KMLLayer OpenStreetMapLayer PointCloudsLayer (3D) StreamLayer WMSLayer

17 Layers Layer.fromPortalItem(...) Portal Items A PEN BY odoe

18 Layers MapImageLayer Webinar - MapImageLayer - Renderer A PEN BY odoe

19 Layers VectorTileLayer Webinar - VectorTileLayer A PEN BY odoe

20 LayerViews

21 LayerViews LayerViews renders the layers on the screen. LayerView API. Give info about layer rendering Give access to data available to draw on the screen Features Elevation data

22 LayerViews There is a layerview per layer in the map except if the layer is not supported incompatible SpatialReference incompatible tile cache 3D layer and a MapView Like Map, a view has multiple collection of layerviews.

23 LayerViews access a layerview with View.whenLayerView() const map = new Map({ basemap: 'topo' }) const mapview = new MapView({ map: map, container: 'mapdiv' }) const layer = new FeatureLayer(...) map.add(layer) view.whenlayerview(layer).then((layerview) => { layerview.visible = false }) or View.allLayerViews

24 LayerViews LayerView - Solution A PEN BY odoe

25 Accessor Autocasting Property watching Consistent API

26 Accessor Autocasting const view = new MapView({ container: "viewdiv", map: map, extent: { // autocast to an Extent class xmin: , ymin: , xmax: , ymax: , spatialreference: } })

27 Accessor Property watching Property Changes A PEN BY odoe

28 Widgets! ~20 Widgets out of the box Widgets help make great apps Less code for you to write Designed with responsive apps in mind We'll look at a few key widgets

29 Default Widgets MapView & SceneView Popup Attribution Zoom SceneView NavigationToggle Compass

30 Widgets: Popup Responsive Design Size changes depending on size of view Can be docked to top, bottom, center and sides Popup Sample

31 Popup Docking A PEN BY odoe

32 Widgets: Expand Collapsable button/panel Can be used with widgets, dom node, HTML Designed for view component use

33 Widgets: Expand Sample Expand Widget A PEN BY odoe

34 Widgets: Expand Sample (Responsive) Expand Widget A PEN BY odoe

35 View Useful view properties for building apps ui padding

36 View UI View has ui property Can has components that can hold... Widget, DOM node, text, html string

37 View UI Positions A PEN BY odoe

38 View UI: Components Provide easy way to add/position widgets on a view const view = new SceneView({... components: [ "attribution", "navigation toggle", "compass", "zoom", legend, layelist ] })

39 Components Demo Components A PEN BY odoe

40 Platform Integration With ArcGIS Portal and ArcGIS Online Creating Hosted Services Consuming those services in the API

41 Platform Demo Platform A PEN BY andygup

42 Visualizations

43 Visualizations Smart Mapping (platform) demo Consumable via Portal Items

44 Smart Mapping Demo SmartMapping A PEN BY andygup

45 Visualizations Renderers SimpleRenderer A PEN BY andygup

46 Visualizations Arcade Expressions

47 Simple Arcade Demo SimpleArcade A PEN BY odoe

48 Wind Arcade Demo Wind Arcade A PEN BY andygup

49 Visualizations 3D Maps 3D SceneLayer 3D Local Scenes

50 New Features

51 WebGL FeatureLayer Beta feature in 4.5 release var dojoconfig = { has: { "esri featurelayer webgl": 1 } }

52 WebGL FeatureLayer WebGL FeatureLayer A PEN BY odoe

53 Draw API and SketchViewModel

54 SketchViewModel const sketch = new SketchViewModel({ view: view, pointsymbol: {... }, polylinesymbol: {... }, polygonsymbol: {... } }) sketch.on("draw complete", (event) =>...) sketch.create("polyline") // point, polyline, polygon

55 SketchViewModel SketchViewModel A PEN BY odoe

56 Draw API More fine-grained control const draw = new Draw({ view }) const action = draw.create(type) // point, polygon, polyline action.on("vertex add", (event) =>...) action.on("vertex remove", (event) =>...) action.on("cursor update", (event) =>...) action.on("draw complete", (event) =>...)

57 Draw API Draw API A PEN BY odoe

58 Custom Builds

59 Custom Builds Dojo Webpack

60 Dojo Builds Pros Compact Single file and layer builds (bundles) Cons Not fast Can be complicated

61 Dojo Builds npm npm install save arcgis js api bower bower install arcgis js

62 Dojo Builds build.profile.js var profile = {... layers: { "dojo/dojo": { boot: true, custombase: true, include: [ "app/main",... ] }, "esri/views/2d/layers/vectortilelayerview2d": {... }, "esri/core/workers/workerconnection": {... }, "esri/views/vectortiles/workertilehandler": {... },

63 Webpack Builds Pros Fast Lots of community support Cons Not fully compatible with Dojo loader Built apps require CDN

64 Webpack Builds webpack.config.js ignore the esri and dojo modules module.exports = {... externals: [ function(context, request, callback) { if ( /^dojo/.test(request) /^dojox/.test(request) /^dijit/.test(request) /^esri/.test(request) ) { return callback(null, "amd " + request) } callback() } ] }

65 Developer Resources github.com/esri JS API Resources GeoNet Community for Web Developers

66 Questions? Help us to improve filling out the survey

67