Downloaded 266 times
Uploaded byEsri Nederland
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag
The document summarizes a presentation on getting started with the ArcGIS API for JavaScript. It discusses using the API to build interactive maps, accessing basemaps from ArcGIS Online, executing tasks, and finding addresses. It also covers best practices for maximizing performance, building expressive applications, and using HTML5 capabilities. The presentation outlines the ArcGIS JavaScript roadmap and upcoming features.
More Related Content
Similar to Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag
- 1. European Developer Summit Rotterdam, Nov. 9, 2012 Getting Started with the ArcGIS API for JavaScript Julie Powell, Antoon Uijtdehaag
- 2. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
- 3. ArcGIS for ServerIs a Platform for Web GIS • Comprehensive GIS Accessible from the Web, Desktop, and Mobile Open • Server Oriented Desktop Web Mobile APIs Architecture OGC USE KML Applications SOAP (clients) • Enabling Web GIS SQL • Rich Application Clients • High Performance and SERVE scalable Enabled ArcGIS for System Server • Interoperable (Services) • Dissemination and collaboration AUTHOR ArcGIS Desktop
- 4. ArcGIS for ServerServices 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
- 5. 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
- 6. JavaScript Considerations • Can be a longer development cycle • Mobile: limitations with interacting with device, using local storage • Performance Limitations
- 7. Race for thefastest browser – HTML5 • JavaScript Engine - Just in time compilation to byte code - Faster property access - Efficient garbage collection • Graphics engine improvements • DOM improvements • CSS3
- 8. What can youdo with the API? • Interactive maps • ArcGIS Online basemaps • Execute a task • Find an address
- 9. Core Library • Mapcontrol • 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
- 10.
- 11. JavaScript-based Application Examples Public Information Map Story Maps
- 12.
- 13. Cloud-based IDEs JSFiddle Maqetta
- 14.
- 15. Build your firstapp Demo 1. Reference the API 2. Create a map 3. Add a basemap 4. Add operational layer
- 16. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications • HTML5 • Tips & Tricks • What’s next? • Resources
- 17. Create a webmap
- 18.
- 19. Working with ArcGISOnline Replace map with web map Using ArcGIS Online Templates Demo
- 20. Maximizing Performance • Tiled layers vs. Dynamic • Feature Services - With power comes responsibility - Generalizing geometries • Balancing what you bring client side - Image vs. features - Calculating statistics • Viewing performance stats
- 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 • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • 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 BySergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
- 27. Can I Use? http://www.caniuse.com/
- 28. HTML5 components in(or soon to be in) the JSAPI Cross Origin Resource Canvas (pixel control CSS3 Transitions Sharing and android graphics) High performance browsers! CPU Intensive Operations (asynch data processing, client geometric operations) CSS 3D Transforms
- 29. Example: Store BookmarksLocally • 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 UsingDrag and Drop
- 32. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
- 33.
- 34.
- 35.
- 39. Extents Demo
- 41. What if Idon’t want to use Dojo? • Compatability with other JavaScript frameworks, for example: - jQuery - ExtJS - Multiple versions of Dojo - Leaflet
- 42. Where to gethelp… • Getting Started • Working with Dojo
- 43. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
- 44. ArcGIS API forJavaScript 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
- 45. Coming soon… InteractiveSandbox
- 48.
- 49. Configure Development Environment • Set up web server • IDEs • Debugging & Tools
- 50. How to runcode from web server (IIS)
- 51. Proxy esri.request proxy ArcGIS Server Your code Browser Web Server Remote Server
- 52. CORS esri.request ArcGIS Server Your code Browser Remote Server
Editor's Notes
- #3 Derek covers brief overview of the api
- #6 JS is one of (or the) most used programming language in the worldPure client-side developmentMultiple js frameworks (dojo, yui) abstract away complexity**IDE is not even needed – you can start simple, only need a webserver & text editor like notepad.
- #7 - Mobile: Advantage: Runs on every device (browser) Disadvantage: Limited local data, no camera, less accuracy - GPS, limited native interface design.- Silverlight/Flex: Advantage JS: No plugin, runs on every OS, browser, Disadvantage: Enterprise applications with larger scope, issues between browsers. Performance limitations with rendering a large data on the client side.
- #9 It is a client for working with the ArcGIS Server REST API and ArcGIS Online meaning that it provides an easy way to use web services from ArcGIS Server and/or ArcGIS Online.The API has matured over its many releases and new functionality is continually added. In its current state, the API includes classes to add basemaps(cached, raster) and other layer types(vector), tasks to geocode, query and execute complex geoprocessing models, among others and widgets to provide common features such as configurable popups, map elements like a legend or scale bar and facilitate more complex operations like editing spatial data in a browser. Client to the ArcGIS Server REST API and ArcGIS OnlineFunctionality:Basemaps and Operational LayersTasksWidgets
- #10 Simple and powerful core api
- #11 Not just the building blocks, but functionality specific widgets which can be configured out of the box.Used in application viewers and arcgis online.
- #14 http://maqetta.org/Online IDE – cloud 9 - https://c9.io/JS fiddler - http://jsfiddle.net/
- #16 Recommended: Use Esri’s CDN hosted versionHigh availabilityBrowser cacheSupports httpsFreeAlternative: download and host yourselfMore controlMore effort
- #17 Demo creating a simple web map No dojo just htmlResource Center: SamplesTiledMapService & feature serviceLink to the REST EndpointCSS claro.css and esri.css (html5 transforms?)What is in the esri.css? What is it for?Link to JS API
- #18 Derek covers brief overview of the api
- #21 Demo creating a simple web map No dojo just html The getting started map – with a feature layer, then she replaced it with a web map (and you get all the other functionality)
- #23 -> Link to Blog entry: http://blogs.esri.com/esri/arcgis/2011/06/13/feature-layers-can-generalize-geometries-on-the-fly/
- #25 (1) Building Interactive apps & Performance Optimization (10 Minutes) JULIEInteractive maps: selection mode vs. snapshot vs. on demandQuery statisticsTiled basemaps, get tiles from anywherehttp://help.arcgis.com/en/webapi/javascript/arcgis/samples/layers_webtiled_many/index.html Typical scenario was: Bringing all features to the client - feature limit and slower rendering.Example based on EU population data (Data & Maps DVD: Is there a service available?? - Counties and Regions) -> Firefox & Firebug
- #26 Derek covers brief overview of the api
- #27 1. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. You can use this the DOM APIs to detect support for various things; example: for <video>… different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself.MODERNIZR, AN HTML5 DETECTION LIBRARY2. Backwards-compatible w/HTML4. Can even use HTML5 features and if not available can default to the “old way.”3. Upgrade by changing doctype.4. HTML5 is still under specification, and is currently in the Working Draft stage in the W3C, but many aspects of HTML5 are now stable and can be implemented in browsers. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video , geolocation , local storage ,and more.
- #28 Modernizer – check compatibility, falling backScalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control. With this powerful new technology, SVG developers can create a new generation of Web applications based on data-driven, interactive, and personalized graphics.
- #30 Cover html 5 and provide intro to the HTML5 demos chris put together. we’ll cover the mobile stuff in the mobile session.
- #31 http://help.arcgis.com/EN/webapi/javascript/arcgis/demos/exp/exp_bookmarks_stored_client_side.html
- #32 http://help.arcgis.com/EN/webapi/javThis sample extends the tiled map service layer and demonstrates how to store and retrieve tiles from local storage. When this application loads it checks to see if the tiles are in local storage, if not a web worker is spawned to retrieve the current tiles. Web workers are javascript files that run in a separate thread and communicate via messages. In this example, the web worker requests tiles and stores them in local storage. ascript/arcgis/demos/exp/exp_webstorage.html
- #34 Derek covers brief overview of the api
- #35 Formatjavascript using a code beautifier to make it easier to read and understand.
- #36 JSLint is a tool created by Douglas Crockford that allows you to check your code for errors and problems. JSHint does the same thing but is a bit more flexible in the options provided. Helps you quickly find issues in your code. For example, in this error report we can see that the first error tells us that we forgot to declare the map variable and the second line shows we have a missing semicolon.
- #37 Many development environments have plug-ins that enable the use of the tools within the development environment. For example JSHint is available as a plug-in for many dev environments.
- #38 Debuggers – firebug, chrome,ie 9 debugging tools Network tab (view requests)Breakpoint and watch ResourcesCome to our session
- #39 Content provides such as Esri, Google and Bing Maps have standardized their services on the Web Mercator Coordinate System. Many times you want to add data to the map perhaps a user-generated location where the location is specified in latitude/longitude. In this case Esri provides client-side helper methods to convert from web mercator to geographic and back.
- #40 In this case Esri provides client-side helper methods to convert from web mercator to geographic and back.
- #41 Map.extent.tojsonConsoleShow how you can use the console to get the extent of the map where you want to center it.
- #42 Widgets are all localized. Show a sample with another locale (changing the browser locale). Templates too…OvLegendScalebarMeasurementBookmark Gauge
- #43 Widgets: Common map elements like a legend or scale bar as well as web specific things like map popups, an overview map, attribute inspector and many others.
- #46 Derek covers brief overview of the api
- #47 Like all Esri products, there is a resource center for the API. We’ve set up a shortlink you can use to get there. There you’ll find API class documentation, our conceptual help which contains more detailed documents on everything from best practices for working map graphics to how to write your own classes. There are also links to “What’s New” documents for each release of the API as well as system requirements.The resource center also includes over 200 samples which can be used as a starting point for apps that you build. The samples provide a great way to see what’s possible “out of the box” and how to use specific functionality. Finally, we also host a user forum specifically for the API. API ReferenceConceptual HelpSystem requirementsWalkthroughsBest practicesSamplesUser forum
- #51 Layers: Traditional tiled and dynamic with more control over dynamic layers with 10.1. The API also provides classes to add WMS, WMTS, KML and other layer types to a map. You can also build your own custom layers.Add web tiled layer
- #53 An easy way to view your JS apps is to double-click the file in windows explorer which opens the app in a browser using file://. While this approach may work in many situations a better approach is to setup a web server. A Web server is a computer program that delivers content (web pages) , using HTTP over the web. Demo running sample from IIS.