ArcGIS API for JavaScript: An Introduction -...
Transcript of ArcGIS API for JavaScript: An Introduction -...
![Page 1: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/1.jpg)
ArcGIS API for JavaScriptAn Introduction
Kelly HutchinsHeather Gonzago
![Page 2: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/2.jpg)
Why
• Interactive maps• Widgets• Analysis• Lots of samples
ArcGIS API for JavaScript: An Introduction
![Page 3: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/3.jpg)
Learn about the API
ArcGIS API for JavaScript: An Introduction
![Page 4: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/4.jpg)
Developer Setup
• IDE (s)• Code Assist • Plugins
ArcGIS API for JavaScript: An Introduction
![Page 5: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/5.jpg)
Widgets, Events, Graphics, Selection
Build sample app
ArcGIS API for JavaScript: An Introduction
![Page 6: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/6.jpg)
ArcGIS API for JavaScript: An Introduction
![Page 7: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/7.jpg)
Get the API
• Hosted
• Download http://developers.arcgis.com/en/downloads
ArcGIS API for JavaScript: An Introduction
![Page 8: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/8.jpg)
Make a map
ArcGIS API for JavaScript: An Introduction
![Page 9: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/9.jpg)
Loading Modules
• Preferred arg alias
ArcGIS API for JavaScript: An Introduction
![Page 10: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/10.jpg)
ArcGIS API for JavaScript: An Introduction
![Page 11: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/11.jpg)
Scrambled Tiles
ArcGIS API for JavaScript: An Introduction
![Page 12: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/12.jpg)
Basemaps
ArcGIS API for JavaScript: An Introduction
![Page 13: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/13.jpg)
Developer Console
ArcGIS API for JavaScript: An Introduction
![Page 14: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/14.jpg)
Add Layers
• Lots of types- Tiled- Dynamic- Graphics - Feature layers- CSV- KML- WMS/WMTS/WFS- Custom layers
ArcGIS API for JavaScript: An Introduction
![Page 15: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/15.jpg)
Layer coding pattern
1. Load module2. Create layer3. Specify properties4. Add layer to map
require(["esri/map", "esri/layers/FeatureLayer", "dojo/domReady!"], function(Map, FeatureLayer)
var featureLayer = new FeatureLayer("http:// sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{outFields: ["*”]
});
map.addLayer(featureLayer );
ArcGIS API for JavaScript: An Introduction
![Page 16: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/16.jpg)
Demo: Add feature layer to application
ArcGIS API for JavaScript: An Introduction
![Page 17: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/17.jpg)
Deep Dive: Feature Layers
• Selection …• Query• Edit • Renderer
ArcGIS API for JavaScript: An Introduction
![Page 18: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/18.jpg)
Renderers
ArcGIS API for JavaScript: An Introduction
![Page 19: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/19.jpg)
Demo: Apply renderer
ArcGIS API for JavaScript: An Introduction
![Page 20: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/20.jpg)
Popups
• Add interactivity• Information about ..
- A location- A feature- The results of a search
• Customizable
ArcGIS API for JavaScript: An Introduction
![Page 21: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/21.jpg)
Demo: Make map interactive
ArcGIS API for JavaScript: An Introduction
![Page 22: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/22.jpg)
Tip: Reduce code by using a web map
• esri/arcgis/utils- createMap
ArcGIS API for JavaScript: An Introduction
![Page 23: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/23.jpg)
Widgets
• Search• Legend,• Directions,• Print,• Basemap Toggle,• etc
ArcGIS API for JavaScript: An Introduction
![Page 24: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/24.jpg)
Widget coding pattern
• Load module• Create widget• Set widget properties• Call startup
ArcGIS API for JavaScript: An Introduction
![Page 25: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/25.jpg)
Demo: Add search widget
ArcGIS API for JavaScript: An Introduction
![Page 26: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/26.jpg)
Demo: Directions widget
• Requires credit-based route service
ArcGIS API for JavaScript: An Introduction
![Page 27: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/27.jpg)
Tip: Working with secure resources
• Identity Manager• OAuth Support • Proxies
ArcGIS API for JavaScript: An Introduction
![Page 28: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/28.jpg)
Demo: Customize widget appearance
ArcGIS API for JavaScript: An Introduction
![Page 29: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/29.jpg)
Events
• Event handlers- Load page, click map, execute task, add layer ….
• dojo/on
ArcGIS API for JavaScript: An Introduction
![Page 30: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/30.jpg)
Want to learn more?
• Documentation- https://developers.arcgis.com/javascript/- Dojo documentation
• Related Esri Training and Tutorials- Esri class: Building Applications with the ArcGIS API for JavaScript- Esri webinar: Data visualization and time saving tips
• Additional Resources- JavaScript online training classes: free and fee-based
ArcGIS API for JavaScript: An Introduction
![Page 31: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/31.jpg)
Thank you…
• Please fill out the session survey in your mobile app• Select [enter session title here] in the Mobile App
- Use the Search Feature to quickly find this title• Click “Technical Workshop Survey”• Answer a few short questions and enter any comments
ArcGIS API for JavaScript: An Introduction
![Page 32: ArcGIS API for JavaScript: An Introduction - Esriproceedings.esri.com/library/userconf/proc15/tech-workshops/tw_894...ArcGIS API for JavaScript: An Introduction. ... ArcGIS API for](https://reader037.fdocuments.net/reader037/viewer/2022102812/5afad8947f8b9ad2208fc85b/html5/thumbnails/32.jpg)