Getting Started with the ArcGIS API for JavaScript. Julie Powell, Paul Hann

Transcription

1 Getting Started with the ArcGIS API for JavaScript Julie Powell, Paul Hann

2 Esri Developer Summit Berlin November Getting Started with the ArcGIS API for JavaScript

3 ArcGIS for Server Is a Platform for Web GIS Comprehensive GIS Accessible from the Web, Desktop, and Mobile Server Oriented Architecture Enabling Web GIS Desktop Web Mobile Open APIs OGC SOAP KML SQL USE Applications (clients) Rich Application Clients High Performance and scalable Interoperable Enabled System SERVE ArcGIS for Server (Services) Dissemination and collaboration AUTHOR ArcGIS Desktop

4 Agenda Overview Using a webmap Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

5 ArcGIS for Server Services Map (including WMS, WMTS) View or query a 2D map on the server Globe View or query a 3D globe on the server Geocode Perform address matching on the server Geodata Perform data replication, extraction, or query Geoprocessing Run a tool or model on the server and get results Image Provide access to raster data though a Web service

6 ArcGIS JavaScript APIs Why JavaScript? It s your future ;-) Lightweight web GIS Pervasive Cross-platform, cross-browser, plugin-less JS Frameworks abstract away the browser complexity - YUI, Dojo, EXTJS, jquery IDE s are getting better. Aptana, Notepad ++, Visual Studio

7 JavaScript Considerations Can be a longer development cycle Mobile: limitations with interacting with device, using local storage Performance Limitations

8 Code Editors

9 Cloud-based IDEs JSFiddle Maqetta

10 Core Library Map control Support for Webmap Layers Tiled, Dynamic, FeatureLayer, WMS, WMTS, KML, Graphics Graphics Tasks GP, Network, Geometry, Query, Locator Geometry Symbology ArcGIS Server Symbology Toolbars Edit, Draw, Navigation

11 Widgets

12 JavaScript-based Application Examples Public Information Map Story Maps

13 Get the API

14 Build your first app 1. Reference the API 2. Create a map 3. Add a basemap 4. Add operational layer Demo

15 Agenda Overview Using a webmap Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

16 Create a web map

17 Web Map ID

18 Working with ArcGIS Online Replace map with web map Demo

19 Agenda Overview Using a webmap Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

20 Balancing what you bring client side Tiled layers vs. Dynamic Feature Services - With power comes responsibility - Generalizing geometries Viewing performance stats Calculating statistics

21 Feature Layers Purpose? Display modes - Snapshot - On-Demand - Selection only Generalizing geometries

22 Query Statistics Calculate statistics server-side - DB does the heavy lifting Large # features: Only send statistic results to client Types of calculations

23 Interactive Application Optimizing Performance Demo

24 Agenda Overview Using a webmap Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

25 HTML5: 5 Facts 1. It s not one big thing 2. You don t need to throw anything away 3. It s easy to get started 4. It already works 5. It s here to stay MARK PILGRIM, Dive into HTML5

26 Evolution of HTML5 By Sergey Mavrody 2011 CC Attribution-ShareAlike 3.0

27 Can I Use?

28 HTML5 components in (or soon to be in) the JSAPI Canvas (pixel control and android graphics) CSS3 Transitions Cross Origin Resource Sharing High performance browsers! CPU Intensive Operations (asynch data processing, client geometric operations) CSS 3D Transforms

29 Example: Store Bookmarks Locally Try to store bookmark in local storage. If not supported: Cookie

30 Example: Offline Tiling Web Workers Use Web Storage for Tiles

31 HTML5 File Access Using Drag and Drop

32 Agenda Overview Using a webmap Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

33 Where to get help Getting Started Working with Dojo

34 Tips & Tricks : Use Developer Tools (firebug, Chrome, etc)

35 Tips and Tricks - Beautify Code and Test Syntax

36 What if I don t want to use Dojo? Compatability with other JavaScript frameworks, for example: - jquery - ExtJS - Multiple versions of Dojo - Leaflet

37

38

39 Extents Demo

40 Agenda Overview Best practices for maximizing performance HTML5 Tips & Tricks What s next? Resources

41 ArcGIS API for JavaScript Roadmap Simplified API New Widgets such as Placefinder widget Dojo 1.8 More build profiles AMD compliance Full touch support IE 10 Research Web Workers Socket Connections CityEngine WebScenes

42 Coming soon Interactive Sandbox

43

44

45 Layers

46 Configure Development Environment Set up web server IDEs Debugging & Tools

47 How to run code from web server (IIS)

48 Proxy esri.request proxy Your code ArcGIS Server Browser Web Server Remote Server

49 CORS esri.request Your code ArcGIS Server Browser Remote Server