ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

  • 4,178 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,178
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building DistributedJavaScript Map Widgets ESRI Dev Meetup, Denver - 3.29.2011 Allan Glen, City and County of Denver
  • 2. http://www.sxc.hu/photo/1281812
  • 3. Use case: Local Government WebsiteMain Website GIS Map Portal http://www.sxc.hu/photo/1114801
  • 4. Mapping Apps as Widgets • Maps in context • Copy/paste deployment • Interaction between map and page • Embed in external websites
  • 5. 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>
  • 6. 1 Bootstrap External Resources JavaScript (ex. OpenLayers, jQuery, etc.) Images CSS HTML (templates) http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • 7. Step 1: BootstrappingExternal Resources http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • 8. 2 Build Out the DOM http://www.sxc.hu/photo/157966
  • 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. Then your web designer asks: “Hey, can we change up this layout? No big deal, right?“ http://www.sxc.hu/photo/1327383
  • 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. 3 CommunicationUse JSONP for a true distributed widget (No XHR)Most online servicessupport JSONPArcGIS Server RESTAPI supports JSONPout-of-the-box http://flic.kr/p/4cUMvV
  • 13. OpenLayers ESRI ArcGIS Server JavaScript APIGoogle Maps Bing Maps Choosing a JS Mapping API
  • 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. There be crocodiles.. http://www.sxc.hu/photo/1088022
  • 16. http://www.sxc.hu/photo/1209888
  • 17. Nope. Must use a timeout..http://www.sxc.hu/photo/708615
  • 18. No access to thepage head
  • 19. Cascading CSS Styles Use a CSS Reset block: Example: http://meyerweb.com/eric/tools/css/reset/http://www.sxc.hu/photo/471235
  • 20. Examples
  • 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="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>
  • 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="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>
  • 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="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>
  • 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="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>
  • 25. Thank You