ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

Building Distributed
JavaScript 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 Website

Main Website GIS Map Portal


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: Bootstrapping
External Resources

http://commons.wikimedia.org/wiki/File:Dr_Martens,_black,_old.jpg

2 Build Out
the
DOM


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?“


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 XHR)

Most online services
support JSONP

ArcGIS Server REST
API supports JSONP
out-of-the-box

http://flic.kr/p/4cUMvV

OpenLayers ESRI ArcGIS Server
JavaScript API

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

There be crocodiles..


Nope. Must use a
timeout..


Cascading CSS Styles
Use a CSS Reset block:
Example: http://meyerweb.com/eric/tools/css/reset/


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 fully
functioning map is provided. No modifications to the page head are required.. just paste and publish.

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.

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.

src="http://www.denvergov.org/maps/api/js/v1?
key=479480FE-34A7-4D73-8313-30C8A41AF903"></script>
var map;
DenverMaps.load("map", { app: “Denver311“}, function(instance) {
map = instance;
});

function getCoordinates() {
return map.app.getCoordinates();
}
</script>

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

More Related Content

Similar to ESRI Dev Meetup: Building Distributed JavaScript Map Widgets

Recently uploaded

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets