Esri UC 2014 | Technical Workshop |
ArcGIS API for JavaScript: An Introduction Kelly Hutchins Derek Swingley
Esri UC 2014 | Technical Workshop |
Why
ArcGIS API for JavaScript: An Introduction
• Interactive maps • ArcGIS Online basemaps • Widgets: Geocoder, Home, Locate, etc. • Analysis: GP, location analytics, geoenrichment • …explore the samples
Esri UC 2014 | Technical Workshop |
Getting Help
• Forums • GIS.StackExchange • Twitter
- #esrijs
ArcGIS API for JavaScript: An Introduction
@derekswingley
@kellyhutchins
Esri UC 2014 | Technical Workshop |
Build an application
ArcGIS API for JavaScript: An Introduction
• Learn how to - Create a map - Add layers - Work with widgets - Display information - Use a renderer - Query a feature layer
• Tips and Gotchas
Esri UC 2014 | Technical Workshop |
Get the API
ArcGIS API for JavaScript: An Introduction
• Hosted
• Download - http://www.esri.com/apps/products/download/
Esri UC 2014 | Technical Workshop |
Gotcha: Scrambled tiles
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
<script src=“//js.arcgis.com/3.10”></script>
Tip: Protocol Relative URL
ArcGIS API for JavaScript: An Introduction
• Prevent mixed-content messages
<script src=“http://js.arcgis.com/3.10”></script>
Esri UC 2014 | Technical Workshop |
Learn about the API
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Make a map
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Make a map
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
World Topographic Map
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Ocean Basemap
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop | ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Tip: Find the center
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Create map
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Widgets
• Legend • Directions • Geocoder • Print • Basemap Gallery • And more
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Widget coding pattern
• Create widget • Set widget properties • Call startup
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Add Geocoder widget
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Edit geometries
• Helper class • Edit geometries
- Move - Modify vertices - Rotate and scale
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Use edit to move graphics
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Tasks
• Find Nearest • Find Address • Reverse Geocode • Closest Facility • And more …
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Create a task
• Create the task • Execute method • Handle results
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Add reverse geocode to app
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Add Layers
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Layer coding pattern
• Create layer • Specify layer specific properties • Add to map
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Tip: Adding secure layers
• Identity Manager • OAuth support
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Adding layers – Feature layers
• Vector data • Interactive
- Editing, selection
• Attribute and spatial queries • Popups
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Add feature layer to application
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Renderers
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Popups
ArcGIS API for JavaScript: An Introduction
• Add interactivity • Information about …
- a location - a feature - the results of an address search
• Customizable
Esri UC 2014 | Technical Workshop |
Popup Examples
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Demo: Display geocode results in a popup
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Tip: Simplify code using a web map
• esri/arcgis/utils - createMap - getLegendLayers
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop |
Thank you…
• Please fill out the session survey:
First Offering ID: 1134 Second Offering ID: 1251
Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box
ArcGIS API for JavaScript: An Introduction
Esri UC 2014 | Technical Workshop | ArcGIS API for JavaScript: An Introduction