Presented as a lightning talk at the ESRI Denver Dev Meetup, 3/29/2011.

1. Building Distributed
JavaScript Map Widgets
ESRI Dev Meetup, Denver - 3.29.2011
Allan Glen, City and County of Denver

4. http://www.sxc.hu/photo/1281812

5. Use case:
Local Government Website
Main Website GIS Map Portal
http://www.sxc.hu/photo/1114801

6. Mapping Apps as Widgets
• Maps in context
• Copy/paste deployment
• Interaction between
map and page
• Embed in external
websites

7. Typical JavaScript Embed Code
<script src=“http://www.yoursite.com/api.js?key=1234”>
<div id=“map” style=“width: 400px; height: 300px;”>
<script language=“javascript”>
map.load(“map”, { app: “parks”, options: …} );
</script>

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

9. Step 1: Bootstrapping
External Resources
http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg

10. 2 Build Out
the
DOM
http://www.sxc.hu/photo/157966

11. 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.

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

13. Recommendation: jQuery Templates
• Can be remote loaded
• Easy to modify – just HTML
• Easy to bind with JSON objects and append to DOM
$.tmpl(“Template”, features).appendTo(div)
• Templates client-side compiled for performance

14. 3 Communication
Use JSONP for a true distributed widget (No XHR)
Most online services
support JSONP
ArcGIS Server REST
API supports JSONP
out-of-the-box
http://flic.kr/p/4cUMvV

15. OpenLayers ESRI ArcGIS Server
JavaScript API
Google Maps Bing Maps
Choosing a
JS Mapping API

16. Why We Chose OpenLayers
• 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

17. There be crocodiles..
http://www.sxc.hu/photo/1088022

18. http://www.sxc.hu/photo/1209888

19. Nope. Must use a
timeout..
http://www.sxc.hu/photo/708615

20. No access
to the
page head

21. Cascading CSS Styles
Use a CSS Reset block:
Example: http://meyerweb.com/eric/tools/css/reset/
http://www.sxc.hu/photo/471235

22. Examples

23. Embed a fully interactive map in a page with a small snippet of code. Supports address and intersection search,
auto-complete, and a Google basemap mashup 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: "DoorsOpen" });
</script>

24. 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>

25. 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>

26. 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>

27. Thank You