Getting Started with the ArcGIS API for JavaScript
Esri Developer Summit
Berlin | November 19 2012
Getting Started with the ArcGIS API for JavaScript
ArcGIS for Server Is a Platform for Web GIS •
Comprehensive GIS Accessible from the Web, Desktop, and Mobile
•
Server Oriented Architecture
Desktop
Web
Mobile
Open APIs OGC KML
•
Enabling Web GIS
•
Rich Application Clients
•
High Performance and scalable
•
Interoperable
•
Dissemination and collaboration
SOAP SQL
Enabled System
USE Applications (clients)
SERVE ArcGIS for Server (Services)
AUTHOR ArcGIS Desktop
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
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
JavaScript Considerations
•
Can be a longer development cycle
•
Mobile: limitations with interacting with device, using local storage
•
Performance Limitations
Code Editors
Cloud-based IDEs JSFiddle
Maqetta
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
Widgets
JavaScript-based Application Examples Public Information Map
Story Maps
JavaScript-based Application Examples, cont’d
Mapapps
JavaScript-based Application Examples, cont’d
Stephan Mendler: www.stephanmendler.de
Get the API
Build your first app Demo 1. Reference
the API 2. Create a map 3. Add a basemap 4. Add operational layer
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Create a web map
Web Map ID
Working with ArcGIS Online Replace map with web map
Demo
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Balancing what you bring client side
•
Tiled layers vs. Dynamic
•
Feature Services -
With power comes responsibility ☺
-
Generalizing geometries
•
Viewing performance stats
•
Calculating statistics
Feature Layers
•
Purpose?
•
Display modes
•
-
Snapshot
-
On-Demand
-
Selection only
Generalizing geometries
Interaction & Performance
Only the selected features
All features
Feature Layer: Lakes Dynamic Layer: Lakes Basemap: Imagery
Query Statistics
•
Calculate statistics server-side -
DB does the heavy lifting
•
Large # features: Only send statistic results to client
•
Types of calculations
Interactive Application Optimizing Performance
Demo
Code Reuse Building a Widget (or “Dijit”)
Demo
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
Evolution of HTML5
By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
Can I Use?
http://www.caniuse.com/
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
Example: Store Bookmarks Locally
•
Try to store bookmark in local storage.
•
If not supported: Cookie
Example: Offline Tiling
• •
Web Workers Use Web Storage for Tiles
HTML5 File Access Using Drag and Drop
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Where to get help… •
Getting Started
•
Working with Dojo
Tips & Tricks : Use Developer Tools (firebug, Chrome, etc)
Tips and Tricks - Beautify Code and Test Syntax
What if I don’t want to use Dojo?
•
Compatability with other JavaScript frameworks, for example: -
jQuery
-
ExtJS
-
Multiple versions of Dojo
-
Leaflet
Extents
Demo
Agenda
•
Overview
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
Coming soon… Interactive Sandbox
Layers
Configure Development Environment
•
Set up web server
•
IDEs
•
Debugging & Tools
How to run code from web server (IIS)
Proxy
esri.request
proxy
ArcGIS Server
Your code
Browser
Web Server
Remote Server
CORS
esri.request
ArcGIS Server
Your code
Browser
Remote Server
Berlin | November 19 2012
Getting Started with the ArcGIS API for JavaScript
ArcGIS for Server Is a Platform for Web GIS •
Comprehensive GIS Accessible from the Web, Desktop, and Mobile
•
Server Oriented Architecture
Desktop
Web
Mobile
Open APIs OGC KML
•
Enabling Web GIS
•
Rich Application Clients
•
High Performance and scalable
•
Interoperable
•
Dissemination and collaboration
SOAP SQL
Enabled System
USE Applications (clients)
SERVE ArcGIS for Server (Services)
AUTHOR ArcGIS Desktop
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
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
JavaScript Considerations
•
Can be a longer development cycle
•
Mobile: limitations with interacting with device, using local storage
•
Performance Limitations
Code Editors
Cloud-based IDEs JSFiddle
Maqetta
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
Widgets
JavaScript-based Application Examples Public Information Map
Story Maps
JavaScript-based Application Examples, cont’d
Mapapps
JavaScript-based Application Examples, cont’d
Stephan Mendler: www.stephanmendler.de
Get the API
Build your first app Demo 1. Reference
the API 2. Create a map 3. Add a basemap 4. Add operational layer
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Create a web map
Web Map ID
Working with ArcGIS Online Replace map with web map
Demo
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Balancing what you bring client side
•
Tiled layers vs. Dynamic
•
Feature Services -
With power comes responsibility ☺
-
Generalizing geometries
•
Viewing performance stats
•
Calculating statistics
Feature Layers
•
Purpose?
•
Display modes
•
-
Snapshot
-
On-Demand
-
Selection only
Generalizing geometries
Interaction & Performance
Only the selected features
All features
Feature Layer: Lakes Dynamic Layer: Lakes Basemap: Imagery
Query Statistics
•
Calculate statistics server-side -
DB does the heavy lifting
•
Large # features: Only send statistic results to client
•
Types of calculations
Interactive Application Optimizing Performance
Demo
Code Reuse Building a Widget (or “Dijit”)
Demo
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
Evolution of HTML5
By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
Can I Use?
http://www.caniuse.com/
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
Example: Store Bookmarks Locally
•
Try to store bookmark in local storage.
•
If not supported: Cookie
Example: Offline Tiling
• •
Web Workers Use Web Storage for Tiles
HTML5 File Access Using Drag and Drop
Agenda
•
Overview
•
Using a webmap
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
Where to get help… •
Getting Started
•
Working with Dojo
Tips & Tricks : Use Developer Tools (firebug, Chrome, etc)
Tips and Tricks - Beautify Code and Test Syntax
What if I don’t want to use Dojo?
•
Compatability with other JavaScript frameworks, for example: -
jQuery
-
ExtJS
-
Multiple versions of Dojo
-
Leaflet
Extents
Demo
Agenda
•
Overview
•
Best practices for maximizing performance
•
HTML5
•
Tips & Tricks
•
What’s next?
•
Resources
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
Coming soon… Interactive Sandbox
Layers
Configure Development Environment
•
Set up web server
•
IDEs
•
Debugging & Tools
How to run code from web server (IIS)
Proxy
esri.request
proxy
ArcGIS Server
Your code
Browser
Web Server
Remote Server
CORS
esri.request
ArcGIS Server
Your code
Browser
Remote Server
