a rc g i s a p i fo r j a va s c r i pt : g et t i n g s ... · 3d support (no plugin r equired!)...
TRANSCRIPT
![Page 1: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript: Getting Started
Andy Gup – René Rubalcava –
@agup@odoenet
![Page 2: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/2.jpg)
![Page 3: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/3.jpg)
Agenda
Introduction to the ArcGIS API 4.x for JavaScriptFundamentals and PatternsPlatform IntegrationVisualizations (2D and 3D)New FeaturesBonus - Custom BuildsQuestions
![Page 4: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/4.jpg)
Introduction to the ArcGIS API 4.x for JavaScript
Simplified and consistent APIWrite apps in ES6 or TypeScriptModern browser support (IE11+)3D support (No plugin required!)And many more!
![Page 5: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/5.jpg)
Where to begin?
https://developers.arcgis.com/javascript
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css"> <script src="https://js.arcgis.com/4.4/"></script>
![Page 6: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/6.jpg)
Hello World Map
const map = new Map( basemap: "streets" );
const view = new MapView( container: "viewDiv", map: map );
![Page 7: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/7.jpg)
Fundamentals and Patterns
Map and View
Map
Contains Layers, data model for the worldMapView and SceneView
Responsible for rendering the Map
![Page 8: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/8.jpg)
Map and View Relationship
![Page 9: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/9.jpg)
Map and View Relationship
![Page 10: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/10.jpg)
Basemap, Ground and Operational LayersLayers are separated into 3 main groups.
basemapground
operational layers
basemap and ground gives context to the operational layers .
![Page 11: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/11.jpg)
Basemap, Ground and Operational Layersbasemap and ground can be set by well-know ids:
const map = new Map( /* streets, satellite, hybrid, terrain, topo, gray,
darkgray, oceans, nationalgeographic, osm, darkgrayvector, grayvector, streetsvector, topovector, streetsnightvector, streetsreliefvector, streetsnavigationvector */ basemap: "streets" /* worldelevation */ ground: "worldelevation" );
![Page 12: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/12.jpg)
Basemap, Ground and Operational Layers
or by specifying them
BasemapsA PEN BY odoe
![Page 13: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/13.jpg)
Basemap, Ground and Operational Layersbasemap can also be set by item id.
const map = new Map( basemap: portalItem: id: "8b3d38c0819547faa83f7b7aca80bd76" );
![Page 14: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/14.jpg)
Basemap, Ground and Operational Layers
Map.layers contains Layer objects with the operational data the userinteracts with.
Webinar - Add a FeatureLayerA PEN BY odoe
![Page 15: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/15.jpg)
Basemap, Ground and Operational Layers
GroupLayer
Webinar - GrouplayerA PEN BY odoe
![Page 16: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/16.jpg)
Layers and LayerViewsFeatureLayer TileLayer
GraphicsLayer Grouplayer
MapImageLayer VectorTileLayer
ImageryLayer CSVLayer
GeoRSSLayer KMLLayer
ElevationLayer OpenStreetMapLayer
SceneLayer (3D) PointCloudsLayer (3D)
IntegratedMeshLayer (3D) StreamLayer
WebTileLayer WMSLayer
WMTSLayer
![Page 17: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/17.jpg)
Layers
Layer.fromPortalItem(...)
Portal ItemsA PEN BY odoe
![Page 18: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/18.jpg)
Layers
MapImageLayer
Webinar - MapImageLayer - RendererA PEN BY odoe
![Page 19: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/19.jpg)
Layers
VectorTileLayer
Webinar - VectorTileLayerA PEN BY odoe
![Page 20: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/20.jpg)
LayerViews
![Page 21: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/21.jpg)
LayerViews
LayerViews renders the layers on the screen. API.
Give info about layer renderingGive access to data available to draw on the screen
FeaturesElevation data
LayerView
![Page 22: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/22.jpg)
LayerViews
There is a layerview per layer in the mapexcept if the layer is not supported
incompatible SpatialReferenceincompatible tile cache3D layer and a MapView
Like Map , a view has multiple collection of layerviews.
![Page 23: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/23.jpg)
LayerViewsaccess a layerview with
or
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 );
View.allLayerViews
![Page 24: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/24.jpg)
LayerViews
LayerView - SolutionA PEN BY odoe
![Page 25: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/25.jpg)
AccessorAutocastingProperty watchingConsistent API
![Page 26: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/26.jpg)
AccessorAutocasting
const view = new MapView( container: "viewDiv",
map: map, extent: // autocast to an Extent class xmin: 9177811, ymin: 4247000, xmax: 9176791, ymax: 4247784, spatialReference: 102100 );
![Page 27: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/27.jpg)
Accessor
Property watching
Property ChangesA PEN BY odoe
![Page 28: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/28.jpg)
Widgets!
~20 Widgets out of the boxWidgets help make great appsLess code for you to writeDesigned with responsive apps in mindWe'll look at a few key widgets
![Page 29: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/29.jpg)
Default Widgets
MapView & SceneViewPopupAttributionZoom
SceneViewNavigationToggleCompass
![Page 30: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/30.jpg)
Widgets: Popup
Responsive DesignSize changes depending on size of viewCan be docked to top, bottom, center and sidesPopup Sample
![Page 31: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/31.jpg)
Popup DockingA PEN BY odoe
![Page 32: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/32.jpg)
Widgets: ExpandCollapsable button/panelCan be used with widgets, dom node, HTMLDesigned for view component use
![Page 33: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/33.jpg)
Widgets: Expand Sample
Expand WidgetA PEN BY odoe
![Page 34: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/34.jpg)
Widgets: Expand Sample (Responsive)
Expand WidgetA PEN BY odoe
R P
![Page 35: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/35.jpg)
ViewUseful for building apps
uipadding
view properties
![Page 36: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/36.jpg)
View UIView has propertyCan has components that can hold...
Widget, DOM node, text, html string
ui
![Page 37: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/37.jpg)
View UI
PositionsA PEN BY odoe
![Page 38: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/38.jpg)
View UI: ComponentsProvide easy way to add/position widgets on a view
const view = new SceneView( ... components: [ "attribution", "navigationtoggle", "compass", "zoom", legend, layeList ] );
![Page 39: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/39.jpg)
Components Demo
ComponentsA PEN BY odoe
![Page 40: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/40.jpg)
Platform Integration
With ArcGIS Portal and ArcGIS Online
Creating Hosted ServicesConsuming those services in the API
![Page 41: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/41.jpg)
Platform Demo
PlatformA PEN BY andygup
![Page 42: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/42.jpg)
Visualizations
![Page 43: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/43.jpg)
Visualizations
Consumable via Portal ItemsSmart Mapping (platform) demo
![Page 44: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/44.jpg)
Smart Mapping Demo
SmartMappingA PEN BY andygup
![Page 45: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/45.jpg)
Visualizations
SimpleRendererA PEN BY andygup
Renderers
![Page 47: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/47.jpg)
Simple Arcade Demo
SimpleArcadeA PEN BY odoe
![Page 48: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/48.jpg)
Wind Arcade Demo
Wind ArcadeA PEN BY andygup
![Page 49: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/49.jpg)
Visualizations3D Maps3D SceneLayer3D Local Scenes
![Page 50: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/50.jpg)
New Features
![Page 51: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/51.jpg)
WebGL FeatureLayerBeta feature in 4.5 release
var dojoConfig = has: "esrifeaturelayerwebgl": 1 ;
![Page 52: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/52.jpg)
WebGL FeatureLayer
WebGL FeatureLayerA PEN BY odoe
![Page 53: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/53.jpg)
Draw API and SketchViewModel
![Page 54: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/54.jpg)
SketchViewModelconst sketch = new SketchViewModel( view: view, pointSymbol: ... ,
polylineSymbol: ... , polygonSymbol: ... ); sketch.on("drawcomplete", (event) => ...); sketch.create("polyline"); // point, polyline, polygon
![Page 55: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/55.jpg)
SketchViewModel
SketchViewModelA PEN BY odoe
![Page 56: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/56.jpg)
Draw APIMore fine-grained control
const draw = new Draw( view ); const action = draw.create(type); // point, polygon, polyline action.on("vertexadd", (event) => ...); action.on("vertexremove", (event) => ...); action.on("cursorupdate", (event) => ...); action.on("drawcomplete", (event) => ...);
![Page 57: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/57.jpg)
Draw API
Draw APIA PEN BY odoe
![Page 58: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/58.jpg)
Custom Builds
![Page 59: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/59.jpg)
Custom BuildsDojoWebpack
![Page 60: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/60.jpg)
Dojo Builds
ProsCompactSingle file and layer builds (bundles)
ConsNot fastCan be complicated
![Page 62: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/62.jpg)
Dojo Buildsbuild.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": ... ,
![Page 63: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/63.jpg)
Webpack Builds
ProsFastLots of community support
ConsNot fully compatible with Dojo loaderBuilt apps require CDN
![Page 64: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/64.jpg)
Webpack Buildswebpack.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(); ] ;
![Page 65: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/65.jpg)
Developer Resourcesgithub.com/esri
JS API ResourcesGeoNet Community for Web Developers
![Page 66: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/66.jpg)
Questions?Help us to improve filling out the survey
![Page 67: A rc G I S A P I fo r J a va S c r i pt : G et t i n g S ... · 3D support (No plugin r equired!) And many more! ... Contains Lay ers, data model for the w orld MapVie w and SceneVie](https://reader031.vdocument.in/reader031/viewer/2022011817/5e80816af662053bab666387/html5/thumbnails/67.jpg)