Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Derek covers brief overview of the api
  • 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.
  • - 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.
  • 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
  • Simple and powerful core api
  • Not just the building blocks, but functionality specific widgets which can be configured out of the box.Used in application viewers and arcgis online.
  • IDE – cloud 9 - fiddler -
  • Recommended: Use Esri’s CDN hosted versionHigh availabilityBrowser cacheSupports httpsFreeAlternative: download and host yourselfMore controlMore effort
  • 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
  • Derek covers brief overview of the api
  • 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)
  • -> Link to Blog entry:
  • (1) Building Interactive apps & Performance Optimization (10 Minutes) JULIEInteractive maps: selection mode vs. snapshot vs. on demandQuery statisticsTiled basemaps, get tiles from anywhere 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
  • Derek covers brief overview of the api
  • 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.
  • 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.
  • Cover html 5 and provide intro to the HTML5 demos chris put together. we’ll cover the mobile stuff in the mobile session.
  • 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
  • Derek covers brief overview of the api
  • Formatjavascript using a code beautifier to make it easier to read and understand.
  • 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.
  • 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.
  • Debuggers – firebug, chrome,ie 9 debugging tools Network tab (view requests)Breakpoint and watch ResourcesCome to our session
  • 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.
  • In this case Esri provides client-side helper methods to convert from web mercator to geographic and back.
  • Map.extent.tojsonConsoleShow how you can use the console to get the extent of the map where you want to center it.
  • Widgets are all localized. Show a sample with another locale (changing the browser locale). Templates too…OvLegendScalebarMeasurementBookmark Gauge
  • 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.
  • Derek covers brief overview of the api
  • 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
  • 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
  • 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.
  • Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag

    1. 1. European Developer Summit Rotterdam, Nov. 9, 2012Getting Started with the ArcGIS API for JavaScript Julie Powell, Antoon Uijtdehaag
    2. 2. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
    3. 3. ArcGIS for Server Is 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. 4. 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
    5. 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. 6. JavaScript Considerations • Can be a longer development cycle • Mobile: limitations with interacting with device, using local storage • Performance Limitations
    7. 7. Race for the fastest browser – HTML5 • JavaScript Engine - Just in time compilation to byte code - Faster property access - Efficient garbage collection • Graphics engine improvements • DOM improvements • CSS3
    8. 8. What can you do with the API? • Interactive maps • ArcGIS Online basemaps • Execute a task • Find an address
    9. 9. 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
    10. 10. Widgets
    11. 11. JavaScript-based Application Examples Public Information Map Story Maps
    12. 12. Code Editors
    13. 13. Cloud-based IDEs JSFiddle Maqetta
    14. 14. Get the API
    15. 15. Build your first app Demo 1. Reference the API 2. Create a map 3. Add a basemap 4. Add operational layer
    16. 16. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications • HTML5 • Tips & Tricks • What’s next? • Resources
    17. 17. Create a web map
    18. 18. Web Map ID
    19. 19. Working with ArcGIS Online Replace map with web map Using ArcGIS Online Templates Demo
    20. 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. 21. Feature Layers • Purpose? • Display modes - Snapshot - On-Demand - Selection only • Generalizing geometries
    22. 22. Query Statistics • Calculate statistics server-side - DB does the heavy lifting • Large # features: Only send statistic results to client • Types of calculations
    23. 23. Interactive Application Optimizing Performance Demo
    24. 24. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
    25. 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. 26. Evolution of HTML5By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
    27. 27. Can I Use?
    28. 28. HTML5 components in (or soon to be in) the JSAPI Cross Origin ResourceCanvas (pixel control CSS3 Transitions Sharingand android graphics) High performance browsers!CPU Intensive Operations(asynch data processing,client geometric operations) CSS 3D Transforms
    29. 29. Example: Store Bookmarks Locally • Try to store bookmark in local storage. • If not supported: Cookie
    30. 30. Example: Offline Tiling • Web Workers • Use Web Storage for Tiles
    31. 31. HTML5 File AccessUsing Drag and Drop
    32. 32. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
    33. 33. JS Beautifier
    34. 34. JSHint / JSLint
    35. 35. Plug-ins
    36. 36. Extents Demo
    37. 37. What if I don’t want to use Dojo? • Compatability with other JavaScript frameworks, for example: - jQuery - ExtJS - Multiple versions of Dojo - Leaflet
    38. 38. Where to get help… • Getting Started • Working with Dojo
    39. 39. Agenda • Overview • Best Practices - Maximizing Performance - Building expressive web applications with the latest features • HTML5 • Tips & Tricks • What’s next? • Resources
    40. 40. 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
    41. 41. Coming soon… Interactive Sandbox
    42. 42. Layers
    43. 43. Configure Development Environment • Set up web server • IDEs • Debugging & Tools
    44. 44. How to run code from web server (IIS)
    45. 45. Proxy esri.request proxy ArcGIS Server Your code Browser Web Server Remote Server
    46. 46. CORS esri.request ArcGIS Server Your code Browser Remote Server