Building Distributed <br />JavaScript Map Widgets <br />with<br />OpenLayers and ArcGIS Server <br />GIS in the Rockies 20...
What do we mean by ‘widget’?<br />http://www.sxc.hu/photo/1052928<br />
Easy to embed into an existing page…<br />HTMLsnippet<br />http://www.sxc.hu/photo/1281812<br />
A Flash widget<br />(not what we’ll be talking about…)<br />Coming soon to a locationnear you..<br />
An IFRAME widget<br />(not what we’ll be talking about…)<br />
A JavaScript widget<br />(what we’ll be talking about…)<br />
Use case:<br />Local Government Website<br />Main Website<br />“GIS Portal”<br />http://www.sxc.hu/photo/1114801<br />
Mapping  Apps as Widgets<br /><ul><li> Maps in context
 Copy/paste deployment
 Interaction between  map and page
 Embed in external   websites</li></li></ul><li>Typical JavaScript Embed Code<br /><script src=“http://www.yoursite.com/ap...
No access to thepage head<br />HTML snippet goes here<br />
Bootstrap<br />External <br />Resources<br />1<br />JavaScript<br />(ex. OpenLayers, jQuery, etc.)<br />CSS<br />Images<br...
Step 1: Bootstrapping<br />External Resources<br />Don’t break the page!!<br />Avoid element IDs<br />Use “namespaces” for...
Build Out <br />the<br />DOM<br />2<br /><DIV/><br />http://www.sxc.hu/photo/157966<br />
Try to Avoid This!!<br />var div1 = document.createElement(“div”);<br />div1.className = “iHazClass”;<br />var div2= docum...
Then your web designer asks:<br />“Hey,  can we change up this layout? No big deal,<br />right?“<br />http://www.sxc.hu/ph...
Recommendation: jQuery Templates<br /><ul><li> Can be remote loaded
 Easy to modify – just HTML
 Easy to bind with JSON objects and append to DOM</li></ul>$.tmpl(“Template”, features).appendTo(div)<br /><ul><li> Templa...
ESRI ArcGIS ServerJavaScript API<br />OpenLayers<br />Google Maps<br />Bing Maps<br />Choosing a <br />JS Mapping API<br />
Why We Chose OpenLayers<br /><ul><li> Easy to bootstrap (single JS file)
 Custom build system – use only what you need
  Works great with the ArcGIS Server REST API
 Geometry (not in core but easy to add)
 Dynamic Services
 Cached Map Services
 Map service neutral, not vendor or map service       specific</li></li></ul><li>Demo<br />
Embed a fully interactive map in a page with a small snippet of code.  Supports address and intersection search,<br />auto...
Upcoming SlideShare
Loading in …5
×

GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server

5,435 views

Published on

Presented at the GIS in the Rockies conference by Allan Glen and Dan Hauser.

This presentation expands on the content the was presented in March at the ESRI Dev Meetup. At that time, we had just gone live with the first maps using this technique. Since then, we have rolled out many more maps and the widget approach has been very successful.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,435
On SlideShare
0
From Embeds
0
Number of Embeds
3,268
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Today we’re going to talking about some techniques for distributing mapping applications as JavaScript widgets.
  • By widget we mean the that the functionality is self-contained…
  • ..and that the widget can be easily embedded in an existing web page with just a small snippet of HTML.So 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.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server

    1. 1. Building Distributed <br />JavaScript Map Widgets <br />with<br />OpenLayers and ArcGIS Server <br />GIS in the Rockies 2011<br />Allan Glen, Dan Hauser<br />City and County of Denver<br />
    2. 2. What do we mean by ‘widget’?<br />http://www.sxc.hu/photo/1052928<br />
    3. 3. Easy to embed into an existing page…<br />HTMLsnippet<br />http://www.sxc.hu/photo/1281812<br />
    4. 4. A Flash widget<br />(not what we’ll be talking about…)<br />Coming soon to a locationnear you..<br />
    5. 5. An IFRAME widget<br />(not what we’ll be talking about…)<br />
    6. 6. A JavaScript widget<br />(what we’ll be talking about…)<br />
    7. 7. Use case:<br />Local Government Website<br />Main Website<br />“GIS Portal”<br />http://www.sxc.hu/photo/1114801<br />
    8. 8. Mapping Apps as Widgets<br /><ul><li> Maps in context
    9. 9. Copy/paste deployment
    10. 10. Interaction between map and page
    11. 11. Embed in external websites</li></li></ul><li>Typical JavaScript Embed Code<br /><script src=“http://www.yoursite.com/api.js?key=1234”><br /><div id=“map” style=“width: 400px; height: 300px;”><br /><script language=“javascript”><br />map.load(“map”, { app: “parks”, options: …} );<br /></script><br />
    12. 12. No access to thepage head<br />HTML snippet goes here<br />
    13. 13. Bootstrap<br />External <br />Resources<br />1<br />JavaScript<br />(ex. OpenLayers, jQuery, etc.)<br />CSS<br />Images<br />HTML<br />(templates)<br />http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg<br />
    14. 14. Step 1: Bootstrapping<br />External Resources<br />Don’t break the page!!<br />Avoid element IDs<br />Use “namespaces” for<br />JavaScript and CSS<br />http://www.sxc.hu/photo/31845<br />http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg<br />
    15. 15. Build Out <br />the<br />DOM<br />2<br /><DIV/><br />http://www.sxc.hu/photo/157966<br />
    16. 16. Try to Avoid This!!<br />var div1 = document.createElement(“div”);<br />div1.className = “iHazClass”;<br />var div2= document.createElement(“div”);<br />div2.className = “iHazMoreClass”;<br />var div3= document.createElement(“div”);<br />div3.className = “iHazDaMostClass”;<br />div1.appendChild(“div2”);<br />div2.appendChild(“div3”);<br />etc. <br />etc. <br />etc. <br />etc.<br />etc.<br />
    17. 17. Then your web designer asks:<br />“Hey, can we change up this layout? No big deal,<br />right?“<br />http://www.sxc.hu/photo/1327383<br />
    18. 18. Recommendation: jQuery Templates<br /><ul><li> Can be remote loaded
    19. 19. Easy to modify – just HTML
    20. 20. Easy to bind with JSON objects and append to DOM</li></ul>$.tmpl(“Template”, features).appendTo(div)<br /><ul><li> Templates client-side compiled for performance</li></li></ul><li>3<br />Communication<br />Use JSONP for a true distributed widget (No XMLHttpRequests)<br />Most online services support JSONP<br />ArcGIS Server REST API supports JSONP out-of-the-box<br />http://flic.kr/p/4cUMvV<br />
    21. 21. ESRI ArcGIS ServerJavaScript API<br />OpenLayers<br />Google Maps<br />Bing Maps<br />Choosing a <br />JS Mapping API<br />
    22. 22. Why We Chose OpenLayers<br /><ul><li> Easy to bootstrap (single JS file)
    23. 23. Custom build system – use only what you need
    24. 24. Works great with the ArcGIS Server REST API
    25. 25. Geometry (not in core but easy to add)
    26. 26. Dynamic Services
    27. 27. Cached Map Services
    28. 28. Map service neutral, not vendor or map service specific</li></li></ul><li>Demo<br />
    29. 29. 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 />
    30. 30. Easily embed a complete mapping app in the appropriate page. Adjust the size to fit the page layout and a fully<br />functioning map is provided. No modifications to the page head are required.. just paste and publish. <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: 675px; height: 600px;"></div><br /><script language="javascript"><br />DenverMaps.load("map", { app: "VoteCenters" });<br /></script><br />
    31. 31. Want a Spanish version of the map? Just pass in a parameter specifying the language and apps that have been <br />globalized will be presented in that language. <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: 675px; height: 600px;"></div><br /><script language="javascript"><br />DenverMaps.load("map", { app: "VoteCenters“, language: “es” });<br /></script><br />
    32. 32. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this<br />example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated <br />with the page, even if delivered from a different host. <br /><script language="javascript" <br />src="http://www.denvergov.org/maps/api/js/v1?<br />key=479480FE-34A7-4D73-8313-30C8A41AF903"></script><br /><div id="map" style="width: 300px; height: 300px;"></div><br /><script language="javascript"><br />var map;<br />DenverMaps.load("map", { app: “Denver311“}, function(instance) {<br /> map = instance;<br /> });<br /> function getCoordinates() {<br /> return map.app.getCoordinates();<br /> }<br /></script><br />
    33. 33. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this<br />example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated <br />with the page, even if delivered from a different host. <br /><script language="javascript" <br />src="http://www.denvergov.org/maps/api/js/v1?<br />key=479480FE-34A7-4D73-8313-30C8A41AF903"></script><br /><div id="map" style="width: 300px; height: 300px;"></div><br /><script language="javascript"><br />var map;<br />DenverMaps.load("map", { app: “Denver311“}, function(instance) {<br /> map = instance;<br /> });<br /> function getCoordinates() {<br /> return map.app.getCoordinates();<br /> }<br /></script><br />
    34. 34. Asynchronous loading of resources prevents blocking of the page during bootstrapping.<br />
    35. 35. Using namespacing with Javascript object notation prevents the widget script methods from interfering with<br />Javascript methods from the hosting page. It does require that a fully qualified name be utilized to call <br />methods from the application script.<br />
    36. 36. JQuery Templates allow us to use class names as unique identifiers instead of Ids. JQuery selectors give quick and<br />easy access to the DOM elements by classname. Also JQuery Templates can be pre-formatted to accept a <br />JSONP response.<br />
    37. 37. Using JSONP avoids the same-origin policy for cross domain communications.<br />

    ×