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.

1. Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server GIS in the Rockies 2011 Allan Glen, Dan Hauser City and County of Denver

2. What do we mean by ‘widget’? http://www.sxc.hu/photo/1052928

3. Easy to embed into an existing page… HTMLsnippet http://www.sxc.hu/photo/1281812

4. A Flash widget (not what we’ll be talking about…) Coming soon to a locationnear you..

5. An IFRAME widget (not what we’ll be talking about…)

6. A JavaScript widget (what we’ll be talking about…)

7. Use case: Local Government Website Main Website “GIS Portal” http://www.sxc.hu/photo/1114801

9. Copy/paste deployment

10. Interaction between map and page

12. No access to thepage head HTML snippet goes here

13. Bootstrap External Resources 1 JavaScript (ex. OpenLayers, jQuery, etc.) CSS Images HTML (templates) http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg

14. Step 1: Bootstrapping External Resources Don’t break the page!! Avoid element IDs Use “namespaces” for JavaScript and CSS http://www.sxc.hu/photo/31845 http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg

15. Build Out the DOM 2 <DIV/> http://www.sxc.hu/photo/157966

16. Try to Avoid This!! var div1 = document.createElement(“div”); div1.className = “iHazClass”; var div2= document.createElement(“div”); div2.className = “iHazMoreClass”; var div3= document.createElement(“div”); div3.className = “iHazDaMostClass”; div1.appendChild(“div2”); div2.appendChild(“div3”); etc. etc. etc. etc. etc.

17. Then your web designer asks: “Hey, can we change up this layout? No big deal, right?“ http://www.sxc.hu/photo/1327383

19. Easy to modify – just HTML

21. ESRI ArcGIS ServerJavaScript API OpenLayers Google Maps Bing Maps Choosing a JS Mapping API

23. Custom build system – use only what you need

24. Works great with the ArcGIS Server REST API

25. Geometry (not in core but easy to add)

26. Dynamic Services

27. Cached Map Services

29. Embed a fully interactive map in a page with a small snippet of code. Supports address and intersection search, auto-complete, and a Google basemapmashup with points projected on the fly from the ArcGIS Server REST API. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 590px; height: 450px;"></div> <script language="javascript"> DenverMaps.load("map", { app: “Parks" }); </script>

30. Easily embed a complete mapping app in the appropriate page. Adjust the size to fit the page layout and a fully functioning map is provided. No modifications to the page head are required.. just paste and publish. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters" }); </script>

31. Want a Spanish version of the map? Just pass in a parameter specifying the language and apps that have been globalized will be presented in that language. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1?key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters“, language: “es” }); </script>

32. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated with the page, even if delivered from a different host. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1? key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 300px; height: 300px;"></div> <script language="javascript"> var map; DenverMaps.load("map", { app: “Denver311“}, function(instance) { map = instance; }); function getCoordinates() { return map.app.getCoordinates(); } </script>

33. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In this example, the page can ask the app for the coordinates of the marker, allowing the map to be completely integrated with the page, even if delivered from a different host. <script language="javascript" src="http://www.denvergov.org/maps/api/js/v1? key=479480FE-34A7-4D73-8313-30C8A41AF903"></script> <div id="map" style="width: 300px; height: 300px;"></div> <script language="javascript"> var map; DenverMaps.load("map", { app: “Denver311“}, function(instance) { map = instance; }); function getCoordinates() { return map.app.getCoordinates(); } </script>

34. Asynchronous loading of resources prevents blocking of the page during bootstrapping.

35. Using namespacing with Javascript object notation prevents the widget script methods from interfering with Javascript methods from the hosting page. It does require that a fully qualified name be utilized to call methods from the application script.

36. JQuery Templates allow us to use class names as unique identifiers instead of Ids. JQuery selectors give quick and easy access to the DOM elements by classname. Also JQuery Templates can be pre-formatted to accept a JSONP response.

37. Using JSONP avoids the same-origin policy for cross domain communications.