Your SlideShare is downloading. ×
0
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets

7,753

Published on

Presented at the Free and Open Source Software for Geospatial (FOSS4G 2011) conference by Allan Glen and David Youngerman.

Presented at the Free and Open Source Software for Geospatial (FOSS4G 2011) conference by Allan Glen and David Youngerman.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,753
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Let’s say you’re running your GIS on a vendor platform…
  • Keep in mind that it wasn’t very long ago
  • That interfaces were mostly proprietary and it was hard to mix and match
  • To build maps as embeddable widgets..
  • ..that can easily be embedded into an existing page.This is very different from the normal approach with an API like Google Maps, the ESRI JavaScript API, or Open Layers where you actually build the mapping application into the page.. With a widget we’re providing the entire mapping app from another location and then allowing the result to be easily embedded into any page. The page doesn’t care about the mapping API we’re using..
  • So you’ve seen the widget concept before.. Here is an example from Vimeo that provides snippet to embed a flash object.
  • Here is another example from YouTube that uses an IFRAME to embed a video.
  • And here is another example from Twitter. This is a JavaScript widget which is the technique that we will be talking about.So why would you want to do this with maps?
  • Here is a common use case which is also our use case.
  • Choosing a JS Mapping API
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Transcript

    • 1. Mixing It Up <br />with OpenLayers, ArcGIS Server <br />and JavaScript Widgets<br />Allan Glen, <br />David Youngerman<br />City and County of Denver<br />
    • 2. Let’s say you’re running your GIS on a vendor platform…<br />http://www.sxc.hu/photo/1360623<br />
    • 3. Desktop<br />Cloud<br />Server<br />SOAP<br />REST<br />etc..<br />Mobile<br />Android<br />Web<br />iOS<br />Windows<br />Phone<br />Silverlight<br />API<br />JavaScript<br />API<br />Flex <br />API<br />http://www.sxc.hu/photo/375836<br />
    • 4. ..but you want to mix and match some pieces.<br />open source?<br />http://www.sxc.hu/photo/1056131<br />
    • 5.
    • 6. It wasn’t long ago…<br />http://www.sxc.hu/photo/374039<br />
    • 7. …that it was really hard to connect to proprietary GIS systems.<br />Based on http://www.sxc.hu/photo/941284<br />
    • 8. …but times have changed.(mostly)<br />Based on http://www.sxc.hu/photo/1223568<br />
    • 9. Google Trends: REST API<br />Source: http://www.google.com/trends?q=rest+api<br />
    • 10. Google Trends: XML vs. JSON<br />http://blog.programmableweb.com/2010/12/03/json-continues-its-winning-streak-over-xml/<br />Source: http://www.google.com/trends?q=xml,json<br />
    • 11. Google Trends: jQuery<br />Source: http://www.google.com/trends?q=jquery<br />
    • 12. ArcGIS Server REST API<br /><ul><li> Launched June 2008 (ArcGIS 9.3)
    • 13. Image Services
    • 14. Geometry/Feature Services
    • 15. Geocoding
    • 16. Geoprocessing
    • 17. Formats: json, xml, image, kml, wms (wfs/wcs)…</li></li></ul><li>Our goal:<br />To build maps as embeddable widgets..<br />http://www.sxc.hu/photo/1052928<br />
    • 18. ..that could easily be inserted into existing pages.<br />HTMLsnippet<br />http://www.sxc.hu/photo/1281812<br />
    • 19. A Flash widget<br />
    • 20. An IFRAME widget<br />
    • 21. A JavaScript widget<br />(the technique we are using)<br />
    • 22. What we wanted to avoid…<br />Main Website<br />“GIS Map Viewer”<br />http://www.sxc.hu/photo/1114801<br />
    • 23. Mapping Apps as Widgets<br /><ul><li> Maps in context
    • 24. Copy/paste deployment
    • 25. Interaction between map and page
    • 26. Embed in external websites</li></li></ul><li>ESRI ArcGIS ServerJavaScript API<br />OpenLayers<br />Google Maps<br />Bing Maps<br />Lots of options<br />for JS mapping APIs.. <br />http://www.sxc.hu/photo/1070609<br />
    • 27. Why choose OpenLayers?<br />
    • 28. http://www.sxc.hu/photo/1100324<br />
    • 29. Debuggable<br />http://getfirebug.com<br />
    • 30. Easy to modify<br />http://www.sxc.hu/photo/480<br />
    • 31. # Custom OpenLayers build for Denver Maps<br />[first]<br />OpenLayers/SingleFile.js<br />OpenLayers.js<br />OpenLayers/BaseTypes.js<br />OpenLayers/BaseTypes/Class.js<br />OpenLayers/Util.js<br />Rico/Corner.js<br />[last]<br />[include]<br /># Controls<br />OpenLayers/Control.js<br />OpenLayers/Control/PanZoomBar.js<br />OpenLayers/Control/Navigation.js<br />OpenLayers/Control/Attribution.js<br />OpenLayers/Control/Panel.js<br />OpenLayers/Control/Button.js<br />OpenLayers/Control/SelectFeature.js<br />OpenLayers/Control/DragFeature.js<br /># Layers<br />OpenLayers/Layer.js<br />OpenLayers/Layer/ArcGIS93Rest.js<br />OpenLayers/Layer/Google.js<br />OpenLayers/Layer/Google/v3.js<br /># Filters<br />OpenLayers/Filter.js<br />OpenLayers/Filter/Comparison.js<br />OpenLayers/Filter/Spatial.js<br /># Rules<br />OpenLayers/Rule.js<br />Custom build system – use only what you need<br />
    • 32. Easy to bootstrap<br />
    • 33. Works well with the <br />ArcGIS Server REST API<br /><ul><li> Dynamic map services
    • 34. Cached map services
    • 35. REST API
    • 36. Raw tiles (but not bundles)</li></ul> Geometry (custom AgsJsAdapter.js)<br /> http://trac.osgeo.org/openlayers/ticket/2748<br />Wrench icon from http://ipholio.deviantart.com<br />
    • 37. Broad Format Support<br /><ul><li> OGC Web Map Service (WMS)
    • 38. XYZ layers
    • 39. OpenStreetMap (OSM)
    • 40. Bing, Google Maps
    • 41. GeoJSON, GeoRSS, KML, WFS, Text
    • 42. MapGuide, MapServer
    • 43. etc.</li></li></ul><li>Avoid vendor lock-in<br />http://www.sxc.hu/photo/1339522<br />
    • 44. Use your favorite JS library<br />etc..<br />
    • 45. Active Community<br /><ul><li>History
    • 46. Launched in 2005
    • 47. Last release was 2.11 on 9/11/2011
    • 48. Organization support
    • 49. Helped add recent support for mobile devices
    • 50. In active development
    • 51. See http://trac.osgeo.org/openlayers/timeline</li></li></ul><li>Demo<br />
    • 52. Embed a fully interactive map in a page with a small snippet of code. Supports address and intersection search,<br />auto-complete, and a Google basemapmashup with points projected on the fly from the ArcGIS Server REST API.<br /><script language="javascript" <br />src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script><br /><div id="map" style="width: 590px; height: 450px;"></div><br /><script language="javascript"><br />DenverMaps.load("map", { app: “Parks" });<br /></script><br />
    • 53. An example showing a “skinned” Denver Maps application versus the default OpenLayers map. The look and feel of an OpenLayers map is easy to customize using CSS. The graphics from the controls were modified from the theme provided by MapBox at http://support.mapbox.com/kb/mapping-101/openlayers-themes. <br />
    • 54. An example showing our parks map overlaying detailed park facilities using an ArcGIS Server Cached Map Service. The tiles have transparency allowing the details to be displayed seamlessly on top of the Google Maps base map. This example uses the XYZ layer type to access tiles through the ArcGIS Server REST API.<br />
    • 55. An example showing our traffic conditions map that uses raw ArcGIS Server tiles provided by the Colorado Department of Transportation (CDOT) through www.cotrip.org. This example uses the ArcGISCache layer type which accesses ArcGIS tiles without using the ArcGIS Server REST API.<br />
    • 56. An example showing our zoning map that use an ArcGIS Server Dynamic Map Service (export image). This example uses the ArcGIS93Rest layer type. Image transparency can be set on the client using OpenLayers.<br />
    • 57. Using JSONP avoids the same-origin policy for cross domain communications, allowing widgets to be embedded on domains other than the domain they are provided from. This example uses a callback (the callback parameter is cut off in the screenshot) to tell ArcGIS Server to return the JSON padded in a callback.<br />
    • 58. An example showing how JavaScript map widgets can be used to provide full interactivity with a host page. <br />In this example, the page executes an address search on the map, causing the map to zoom and display a popup.<br />
    • 59. References<br /><ul><li> http://www.openlayers.org
    • 60. http://openlayers.org/dev/examples/arcgis93rest.html
    • 61. http://trac.osgeo.org/openlayers/ticket/2748 (AgsJsAdapter)
    • 62. http://help.arcgis.com/en/arcgisserver/10.0/apis/rest/index.html</li>

    ×