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.
GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server
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..
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
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>
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.
Notas del editor
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.