• Save
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

  • 4,391 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
    Be the first to like this
No Downloads

Views

Total Views
4,391
On Slideshare
1,324
From Embeds
3,067
Number of Embeds
8

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 3,067

http://blog.allanglen.com 3,024
http://feeds2.feedburner.com 19
http://translate.googleusercontent.com 9
http://feeds.feedburner.com 5
http://www.linkedin.com 4
http://www.netvibes.com 3
http://webcache.googleusercontent.com 2
http://cache.baidu.com 1

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