ESRI Dev Meetup: Building Distributed JavaScript Map Widgets


Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

  1. 1. Building DistributedJavaScript Map Widgets ESRI Dev Meetup, Denver - 3.29.2011 Allan Glen, City and County of Denver
  2. 2.
  3. 3. Use case: Local Government WebsiteMain Website GIS Map Portal
  4. 4. Mapping Apps as Widgets • Maps in context • Copy/paste deployment • Interaction between map and page • Embed in external websites
  5. 5. Typical JavaScript Embed Code<script src=“”><div id=“map” style=“width: 400px; height: 300px;”><script language=“javascript”> map.load(“map”, { app: “parks”, options: …} );</script>
  6. 6. 1 Bootstrap External Resources JavaScript (ex. OpenLayers, jQuery, etc.) Images CSS HTML (templates),_black,_old.jpg
  7. 7. Step 1: BootstrappingExternal Resources,_black,_old.jpg
  8. 8. 2 Build Out the DOM
  9. 9. 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.
  10. 10. Then your web designer asks: “Hey, can we change up this layout? No big deal, right?“
  11. 11. 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
  12. 12. 3 CommunicationUse JSONP for a true distributed widget (No XHR)Most online servicessupport JSONPArcGIS Server RESTAPI supports JSONPout-of-the-box
  13. 13. OpenLayers ESRI ArcGIS Server JavaScript APIGoogle Maps Bing Maps Choosing a JS Mapping API
  14. 14. 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
  15. 15. There be crocodiles..
  16. 16.
  17. 17. Nope. Must use a timeout..
  18. 18. No access to thepage head
  19. 19. Cascading CSS Styles Use a CSS Reset block: Example:
  20. 20. Examples
  21. 21. 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=""></script> <div id="map" style="width: 590px; height: 450px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "DoorsOpen" }); </script>
  22. 22. Easily embed a complete mapping app in the appropriate page. Adjust the size to fit the page layout and a fullyfunctioning map is provided. No modifications to the page head are required.. just paste and publish. <script language="javascript" src=""></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters" }); </script>
  23. 23. Want a Spanish version of the map? Just pass in a parameter specifying the language and apps that have beenglobalized will be presented in that language. <script language="javascript" src=""></script> <div id="map" style="width: 675px; height: 600px;"></div> <script language="javascript"> DenverMaps.load("map", { app: "VoteCenters“, language: “es” }); </script>
  24. 24. A mockup showing how JavaScript map widgets can be used to provide full interactivity with a host page. In thisexample, the page can ask the app for the coordinates of the marker, allowing the map to be completely integratedwith the page, even if delivered from a different host. <script language="javascript" src=" 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; } </script>
  25. 25. Thank You