• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server
 

GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server

on

  • 4,678 views

Presented at the GIS in the Rockies conference by Allan Glen and Dan Hauser. ...

Presented at the GIS in the Rockies conference by Allan Glen and Dan Hauser.

This presentation expands on the content the was presented in March at the ESRI Dev Meetup. At that time, we had just gone live with the first maps using this technique. Since then, we have rolled out many more maps and the widget approach has been very successful.

Statistics

Views

Total Views
4,678
Views on SlideShare
1,894
Embed Views
2,784

Actions

Likes
3
Downloads
0
Comments
0

11 Embeds 2,784

http://blog.allanglen.com 2734
http://feeds2.feedburner.com 19
http://www.linkedin.com 8
http://translate.googleusercontent.com 6
https://twitter.com 5
http://feeds.feedburner.com 5
http://webcache.googleusercontent.com 2
http://www.feedspot.com 2
http://ranksit.com 1
http://cache.baidu.com 1
https://www.google.com.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Today we’re going to talking about some techniques for distributing mapping applications as JavaScript widgets.
  • By widget we mean the that the functionality is self-contained…
  • ..and that the widget can be easily embedded in an existing web page with just a small snippet of HTML.So this is very different from the normal approach with an API like Google Maps, the ESRI JavaScript API, or Open Layers where you actually build the mapping application into the page.. With a widget we’re providing the entire mapping app from another location and then allowing the result to be easily embedded into any page. The page doesn’t care about the mapping API we’re using..
  • So you’ve seen the widget concept before.. Here is an example from Vimeo that provides snippet to embed a flash object.
  • Here is another example from YouTube that uses an IFRAME to embed a video.
  • And here is another example from Twitter. This is a JavaScript widget which is the technique that we will be talking about.So why would you want to do this with maps?
  • Here is a common use case which is also our use case.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.
  • Examples, in case demo doesn’t work.

GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server GIS in the Rockies 2011: Building Distributed JavaScript Map Widgets with OpenLayers and ArcGIS Server Presentation Transcript

  • Building Distributed
    JavaScript Map Widgets
    with
    OpenLayers and ArcGIS Server
    GIS in the Rockies 2011
    Allan Glen, Dan Hauser
    City and County of Denver
  • What do we mean by ‘widget’?
    http://www.sxc.hu/photo/1052928
  • Easy to embed into an existing page…
    HTMLsnippet
    http://www.sxc.hu/photo/1281812
  • A Flash widget
    (not what we’ll be talking about…)
    Coming soon to a locationnear you..
  • An IFRAME widget
    (not what we’ll be talking about…)
  • A JavaScript widget
    (what we’ll be talking about…)
  • Use case:
    Local Government Website
    Main Website
    “GIS 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>
  • No access to thepage head
    HTML snippet goes here
  • Bootstrap
    External
    Resources
    1
    JavaScript
    (ex. OpenLayers, jQuery, etc.)
    CSS
    Images
    HTML
    (templates)
    http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • Step 1: Bootstrapping
    External Resources
    Don’t break the page!!
    Avoid element IDs
    Use “namespaces” for
    JavaScript and CSS
    http://www.sxc.hu/photo/31845
    http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg
  • Build Out
    the
    DOM
    2
    <DIV/>
    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
    Communication
    Use JSONP for a true distributed widget (No XMLHttpRequests)
    Most online services support JSONP
    ArcGIS Server REST API supports JSONP out-of-the-box
    http://flic.kr/p/4cUMvV
  • ESRI ArcGIS ServerJavaScript API
    OpenLayers
    Google 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
  • Demo
  • Embed a fully interactive map in a page with a small snippet of code. Supports address and intersection search,
    auto-complete, and a Google basemapmashup 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: “Parks" });
    </script>
  • 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>
  • 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>
  • 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>
  • 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>
  • Asynchronous loading of resources prevents blocking of the page during bootstrapping.
  • Using namespacing with Javascript object notation prevents the widget script methods from interfering with
    Javascript methods from the hosting page. It does require that a fully qualified name be utilized to call
    methods from the application script.
  • JQuery Templates allow us to use class names as unique identifiers instead of Ids. JQuery selectors give quick and
    easy access to the DOM elements by classname. Also JQuery Templates can be pre-formatted to accept a
    JSONP response.
  • Using JSONP avoids the same-origin policy for cross domain communications.