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
ArcGIS API for JavaScript: Getting Started
Andy Gup – René Rubalcava –
@agup@odoenet
Agenda
Introduction to the ArcGIS API 4.x for JavaScriptFundamentals and PatternsPlatform IntegrationVisualizations (2D and 3D)New FeaturesBonus - Custom BuildsQuestions
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!
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>
Hello World Map
const map = new Map( basemap: "streets" );
const view = new MapView( container: "viewDiv", map: map );
Fundamentals and Patterns
Map and View
Map
Contains Layers, data model for the worldMapView and SceneView
Responsible for rendering the Map
Map and View Relationship
Map and View Relationship
Basemap, Ground and Operational LayersLayers are separated into 3 main groups.
basemapground
operational layers
basemap and ground gives context to the operational layers .
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" );
Basemap, Ground and Operational Layers
or by specifying them
BasemapsA PEN BY odoe
Basemap, Ground and Operational Layersbasemap can also be set by item id.
const map = new Map( basemap: portalItem: id: "8b3d38c0819547faa83f7b7aca80bd76" );
Basemap, Ground and Operational Layers
Map.layers contains Layer objects with the operational data the userinteracts with.
Webinar - Add a FeatureLayerA PEN BY odoe
Basemap, Ground and Operational Layers
GroupLayer
Webinar - GrouplayerA PEN BY odoe
Layers and LayerViewsFeatureLayer TileLayer
GraphicsLayer Grouplayer
MapImageLayer VectorTileLayer
ImageryLayer CSVLayer
GeoRSSLayer KMLLayer
ElevationLayer OpenStreetMapLayer
SceneLayer (3D) PointCloudsLayer (3D)
IntegratedMeshLayer (3D) StreamLayer
WebTileLayer WMSLayer
WMTSLayer
Layers
Layer.fromPortalItem(...)
Portal ItemsA PEN BY odoe
Layers
MapImageLayer
Webinar - MapImageLayer - RendererA PEN BY odoe
Layers
VectorTileLayer
Webinar - VectorTileLayerA PEN BY odoe
LayerViews
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
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.
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
LayerViews
LayerView - SolutionA PEN BY odoe
AccessorAutocastingProperty watchingConsistent API
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 );
Accessor
Property watching
Property ChangesA PEN BY odoe
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
Default Widgets
MapView & SceneViewPopupAttributionZoom
SceneViewNavigationToggleCompass
Widgets: Popup
Responsive DesignSize changes depending on size of viewCan be docked to top, bottom, center and sidesPopup Sample
Popup DockingA PEN BY odoe
Widgets: ExpandCollapsable button/panelCan be used with widgets, dom node, HTMLDesigned for view component use
Widgets: Expand Sample
Expand WidgetA PEN BY odoe
Widgets: Expand Sample (Responsive)
Expand WidgetA PEN BY odoe
R P
ViewUseful for building apps
uipadding
view properties
View UIView has propertyCan has components that can hold...
Widget, DOM node, text, html string
ui
View UI
PositionsA PEN BY odoe
View UI: ComponentsProvide easy way to add/position widgets on a view
const view = new SceneView( ... components: [ "attribution", "navigationtoggle", "compass", "zoom", legend, layeList ] );
Components Demo
ComponentsA PEN BY odoe
Platform Integration
With ArcGIS Portal and ArcGIS Online
Creating Hosted ServicesConsuming those services in the API
Platform Demo
PlatformA PEN BY andygup
Visualizations
Visualizations
Consumable via Portal ItemsSmart Mapping (platform) demo
Smart Mapping Demo
SmartMappingA PEN BY andygup
Visualizations
SimpleRendererA PEN BY andygup
Renderers
VisualizationsArcade Expressions
Simple Arcade Demo
SimpleArcadeA PEN BY odoe
Wind Arcade Demo
Wind ArcadeA PEN BY andygup
Visualizations3D Maps3D SceneLayer3D Local Scenes
New Features
WebGL FeatureLayerBeta feature in 4.5 release
var dojoConfig = has: "esrifeaturelayerwebgl": 1 ;
WebGL FeatureLayer
WebGL FeatureLayerA PEN BY odoe
Draw API and SketchViewModel
SketchViewModelconst sketch = new SketchViewModel( view: view, pointSymbol: ... ,
polylineSymbol: ... , polygonSymbol: ... ); sketch.on("drawcomplete", (event) => ...); sketch.create("polyline"); // point, polyline, polygon
SketchViewModel
SketchViewModelA PEN BY odoe
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) => ...);
Draw API
Draw APIA PEN BY odoe
Custom Builds
Custom BuildsDojoWebpack
Dojo Builds
ProsCompactSingle file and layer builds (bundles)
ConsNot fastCan be complicated
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": ... ,
Webpack Builds
ProsFastLots of community support
ConsNot fully compatible with Dojo loaderBuilt apps require CDN
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(); ] ;
Developer Resourcesgithub.com/esri
JS API ResourcesGeoNet Community for Web Developers
Questions?Help us to improve filling out the survey