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

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

on

  • 4,321 views

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.

Statistics

Views

Total Views
4,321
Views on SlideShare
1,272
Embed Views
3,049

Actions

Likes
0
Downloads
0
Comments
0

8 Embeds 3,049

http://blog.allanglen.com 3006
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets ESRI Dev Meetup: Building Distributed JavaScript Map Widgets Presentation Transcript

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