-
Toner
- These high-contrast B+W (black and white) maps are
+
These high-contrast B+W (black and white) maps are
featured in our Dotspotting project. They are perfect for data
- mashups and exploring river meanders and coastal zones.
+ mashups and exploring river meanders and coastal zones.
Available in six flavors:
standard toner,
hybrid,
@@ -119,7 +123,7 @@
Terrain
Orient yourself with our terrain maps, featuring hill shading
and natural vegetation colors. These maps showcase advanced
- labeling and linework generalization of dual-carriageway roads.
+ labeling and linework generalization of dual-carriageway roads.
Terrain was developed in collaboration with Gem Spear and Nelson Minar.
Available in four flavors:
standard terrain,
@@ -144,7 +148,7 @@
Terrain
data-zoom="9">
Watercolor
- Reminiscent of hand drawn maps, our watercolor maps apply
+
Reminiscent of hand drawn maps, our watercolor maps apply
raster effect area washes and organic edges over a paper texture
to add warm pop to any map. Watercolor was inspired by the
Bicycle Portraits project.
@@ -179,15 +183,15 @@
Burning Map
-
+
Mars??
- Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an
- instrument on the Mars Global Surveyor (MGS), a spacecraft that
- was launched on November 7, 1996. The MOLA dataset also
+
Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an
+ instrument on the Mars Global Surveyor (MGS), a spacecraft that
+ was launched on November 7, 1996. The MOLA dataset also
contains height data, which we've made into a 3D contour map.
Requires a WebGL-enabled browser, such as Google Chrome.
@@ -198,7 +202,7 @@ Mars??
MOLA at NASA
-
+
Mars??
Trees, Cabs & Crime
Trees, Cabs & Crime started off as a weekend hack
- and ended up in the Venice Biennale. This map
+ and ended up in the Venice Biennale. This map
combines three data sets (street tree locations, taxi cab
GPS positions, and crime reports) with
subtractive blending to reveal halftones hidden in the
@@ -253,7 +257,11 @@
Attribution:
source = document.getElementById("toner-attr"),
target = document.getElementById("toner-attr-html"),
showing = false;
- MM.addEvent(link, "click", function(e) {
+
+
+ link.addEventListener("click", function(e){
+ e.preventDefault();
+
showing = !showing;
if (showing) {
target.value = source.innerHTML;
@@ -263,7 +271,8 @@ Attribution:
} else {
target.style.display = "none";
}
- return MM.cancelEvent(e);
+
+ return false;
});
})();
@@ -279,7 +288,10 @@ Attribution:
source = document.getElementById("attr"),
target = document.getElementById("attr-html"),
showing = false;
- MM.addEvent(link, "click", function(e) {
+
+ link.addEventListener("click", function(e){
+ e.preventDefault();
+
showing = !showing;
if (showing) {
target.value = source.innerHTML;
@@ -289,8 +301,10 @@ Attribution:
} else {
target.style.display = "none";
}
- return MM.cancelEvent(e);
+
+ return false;
});
+
})();
If you roll your own tiles from another source you will still need to credit “Map data by OpenStreetMap, under ODbL.”
@@ -344,7 +358,7 @@
Leaflet
OpenLayers
-
+
OpenLayers is a hefty and featureful mapping library for use with a variety of GIS applications.
View the example.
diff --git a/js/common.js b/js/common.js
index ad9f5d0..f512447 100644
--- a/js/common.js
+++ b/js/common.js
@@ -1,14 +1,60 @@
+// Maps.stamen.com
+// Common functions
+// TODO: wrap these in a namespace
+
+
+
+var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
+ (min--moz-device-pixel-ratio: 1.5),\
+ (-o-min-device-pixel-ratio: 3/2),\
+ (min-resolution: 1.5dppx)";
+
+// TODO: this probably should be in StamenTileLayer
+// ie: {@2x: true}
+var retinaSupportedProviders = ["toner"];
+
+function isRetina() {
+ function getParameterByName(name) {
+ name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+ var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+ results = regex.exec(location.search);
+ return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+ }
+
+ return getParameterByName("retina") ||
+ window.devicePixelRatio > 1 ||
+ (window.matchMedia && window.matchMedia(mediaQuery).matches);
+}
// returns the map provider for a given TileStache layer name
function getProvider(layer) {
- return new MM.StamenTileLayer(layer);
+ var lyr = new L.StamenTileLayer(layer);
+
+ if (isRetina() && retinaSupportedProviders.indexOf(layer) > -1) {
+ // replace the last "." with "@2x."
+ lyr._url = lyr._url.replace(/\.(?!.*\.)/, "@2x.")
+ }
+ return lyr;
+}
+
+function cancelEvent(e) {
+ e.cancelBubble = true;
+ e.cancel = true;
+ e.returnValue = false;
+ if (e.stopPropagation) { e.stopPropagation(); }
+ if (e.preventDefault) { e.preventDefault(); }
+ return false;
}
// cancels all double-click events on the supplied element
function preventDoubleClick(el) {
+ /*
MM.addEvent(el, "dblclick", function(e) {
return MM.cancelEvent(e);
});
+ */
+
+ el.addEventListener("dblclick", cancelEvent);
}
// set up zoom controls for the given map (assumed one per page,
@@ -18,16 +64,17 @@ function setupZoomControls(map) {
zoomOut = document.getElementById("zoom-out");
preventDoubleClick(zoomIn);
- MM.addEvent(zoomIn, "click", function(e) {
+ preventDoubleClick(zoomOut);
+
+ zoomIn.addEventListener("click", function(e){
try { map.zoomIn(); } catch (err) { }
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
- preventDoubleClick(zoomOut);
- MM.addEvent(zoomOut, "click", function(e) {
+
+ zoomOut.addEventListener("click", function(e){
try { map.zoomOut(); } catch (err) { }
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
-
}
function syncMapLinks(map, links, modifyHashParts) {
@@ -40,13 +87,28 @@ function syncMapLinks(map, links, modifyHashParts) {
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)),
parts = [zoom,
center.lat.toFixed(precision),
- center.lon.toFixed(precision)
+ center.lng.toFixed(precision)
];
if (modifyHashParts) {
modifyHashParts.call(null, parts);
}
return parts.join("/");
}
+ map.on("viewreset", function(e){
+ clearTimeout(timeout);
+ timeout = setTimeout(function() {
+ var hash = formatHash();
+ for (var i = 0; i < len; i++) {
+ var link = links[i];
+ if (!link) continue;
+ var href = link.href || "",
+ uri = link.href.split("#").shift();
+ link.href = [uri, hash].join("#");
+ }
+ }, delay);
+ });
+
+ /*
map.addCallback("drawn", function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
@@ -60,6 +122,7 @@ function syncMapLinks(map, links, modifyHashParts) {
}
}, delay);
});
+ */
}
// get the pixel offset of an element from the top left of its offset parent
@@ -89,12 +152,12 @@ function createToggle(link, target, callback) {
}
callback.call(target, showing);
};
-
- MM.addEvent(link, "click", function(e) {
+ link.addEventListener("click", function(e) {
toggler.toggle();
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
+
toggler.toggle = function() { toggler(!showing); };
toggler.show = function() { toggler(true); };
toggler.hide = function() { toggler(false); };
@@ -137,11 +200,12 @@ function setupFeedbackForm() {
}
});
- MM.addEvent(window, "keyup", function(e) {
+ window.addEventListener("keyup", function(e) {
if (e.keyCode === 27) {
toggle.hide();
}
});
+
return toggle;
} else {
var form = {};
@@ -316,13 +380,166 @@ QueryString.prototype = {
};
-MM.QueryHash = function(map, onQueryChange) {
+
+function extendClass(child, parent) {
+ for (var property in parent.prototype) {
+ if (typeof child.prototype[property] == "undefined") {
+ child.prototype[property] = parent.prototype[property];
+ }
+ }
+ return child;
+};
+
+var HAS_HASHCHANGE = (function() {
+ var doc_mode = window.documentMode;
+ return ('onhashchange' in window) &&
+ (doc_mode === undefined || doc_mode > 7);
+ })();
+
+L.Hash = function(map) {
+ this.onMapMove = L.bind(this.onMapMove, this);
+ this.onHashChange = L.bind(this.onHashChange, this);
+ if (map) {
+ this.init(map);
+ }
+};
+
+L.Hash.prototype = {
+ map: null,
+ lastHash: null,
+
+ parseHash: function(hash) {
+ var args = hash.split("/");
+ if (args.length == 3) {
+ var zoom = parseInt(args[0], 10),
+ lat = parseFloat(args[1]),
+ lon = parseFloat(args[2]);
+ if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
+ return false;
+ } else {
+ return {
+ center: L.latLng(lat, lon),
+ zoom: zoom
+ };
+ }
+ } else {
+ return false;
+ }
+ },
+
+ formatHash: function(map) {
+ var center = map.getCenter(),
+ zoom = map.getZoom(),
+ precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
+
+ return "#" + [zoom,
+ center.lat.toFixed(precision),
+ center.lng.toFixed(precision)
+ ].join("/");
+ },
+
+ init: function(map) {
+ this.map = map;
+ //this.map.addCallback("drawn", this.onMapMove);
+ var self = this;
+ this.map.on('viewreset', function(){
+ self.onMapMove(self.map);
+
+ });
+ // reset the hash
+ this.lastHash = null;
+ this.onHashChange();
+
+ if (!this.isListening) {
+ this.startListening();
+ }
+ },
+
+ remove: function() {
+ this.map = null;
+ if (this.isListening) {
+ this.stopListening();
+ }
+ },
+
+ onMapMove: function(map) {
+ // bail if we're moving the map (updating from a hash),
+ // or if the map has no zoom set
+ if (this.movingMap || this.map.zoom === 0) {
+ return false;
+ }
+ var hash = this.formatHash(map);
+ if (this.lastHash != hash) {
+ location.replace(hash);
+ this.lastHash = hash;
+ }
+ },
+
+ movingMap: false,
+ update: function() {
+ var hash = location.hash;
+ if (hash === this.lastHash) {
+ // console.info("(no change)");
+ return;
+ }
+ var sansHash = hash.substr(1),
+ parsed = this.parseHash(sansHash);
+ if (parsed) {
+ // console.log("parsed:", parsed.zoom, parsed.center.toString());
+ this.movingMap = true;
+ this.map.setView(parsed.center, parsed.zoom, {});
+ this.movingMap = false;
+ } else {
+ // console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
+ this.onMapMove(this.map);
+ }
+ },
+
+ // defer hash change updates every 100ms
+ changeDefer: 100,
+ changeTimeout: null,
+ onHashChange: function() {
+ // throttle calls to update() so that they only happen every
+ // `changeDefer` ms
+ if (!this.changeTimeout) {
+ var that = this;
+ this.changeTimeout = setTimeout(function() {
+ that.update();
+ that.changeTimeout = null;
+ }, this.changeDefer);
+ }
+ },
+
+ isListening: false,
+ hashChangeInterval: null,
+ startListening: function() {
+ if (HAS_HASHCHANGE) {
+ window.addEventListener("hashchange", this.onHashChange, false);
+ } else {
+ clearInterval(this.hashChangeInterval);
+ this.hashChangeInterval = setInterval(this.onHashChange, 50);
+ }
+ this.isListening = true;
+ },
+
+ stopListening: function() {
+ if (HAS_HASHCHANGE) {
+ window.removeEventListener("hashchange", this.onHashChange);
+ } else {
+ clearInterval(this.hashChangeInterval);
+ }
+ this.isListening = false;
+ }
+};
+
+
+L.QueryHash = function(map, onQueryChange) {
this.query = new QueryString();
this.onQueryChange = onQueryChange;
- MM.Hash.call(this, map);
+ L.Hash.call(this, map);
};
-MM.QueryHash.prototype = {
+L.QueryHash.prototype = {
query: null,
parseHash: function(hash) {
var qs = "";
@@ -331,18 +548,20 @@ MM.QueryHash.prototype = {
hash = parts[0];
qs = parts[1];
}
- var parsed = MM.Hash.prototype.parseHash.call(this, hash);
+ var parsed = L.Hash.prototype.parseHash.call(this, hash);
if (parsed) {
this.query.params = this.onQueryChange.call(this, this.query.parse(qs));
}
return parsed;
},
formatHash: function(hash) {
- return MM.Hash.prototype.formatHash.call(this, hash) + this.query.toString();
+ return L.Hash.prototype.formatHash.call(this, hash) + this.query.toString();
}
};
-MM.extend(MM.QueryHash, MM.Hash);
+extendClass(L.QueryHash, L.Hash);
+
+
/**
* The ProviderHash is a class that looks for a provider name at the beginning
@@ -364,7 +583,7 @@ var ProviderHash = function(map, providerName, setProvider, overwriteInvalidHash
this.providerName = providerName;
this.setProvider = setProvider;
this.overwriteInvalidHashes = overwriteInvalidHashes !== false;
- MM.Hash.call(this, map);
+ L.Hash.call(this, map);
};
ProviderHash.prototype = {
@@ -384,7 +603,7 @@ ProviderHash.prototype = {
}
var provider = parts.shift();
var parsed = parts.length
- ? MM.Hash.prototype.parseHash.call(this, parts.join("/"))
+ ? L.Hash.prototype.parseHash.call(this, parts.join("/"))
: {center: this.map.getCenter(), zoom: this.map.getZoom()};
if (parsed) {
// console.log("parsed hash:", provider, parsed);
@@ -410,7 +629,7 @@ ProviderHash.prototype = {
* slash-delimited element in the URL.
*/
formatHash: function(hash) {
- var format = MM.Hash.prototype.formatHash.call(this, hash);
+ var format = L.Hash.prototype.formatHash.call(this, hash);
return "#" + this.providerName + "/" + format.substr(1);
},
@@ -426,7 +645,7 @@ ProviderHash.prototype = {
if (parsed) {
// console.log("parsed:", parsed.zoom, parsed.center.toString());
this.movingMap = true;
- this.map.setCenterZoom(parsed.center, parsed.zoom);
+ this.map.setView(parsed.center, parsed.zoom);
this.movingMap = false;
} else {
// console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
@@ -437,7 +656,8 @@ ProviderHash.prototype = {
}
};
-MM.extend(ProviderHash, MM.Hash);
+extendClass(ProviderHash, L.Hash);
+
var _gaq;
// Google Analytics tracking
diff --git a/js/index.js b/js/index.js
index 80b779f..9ec51c2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,7 +2,10 @@
var MAPS = {};
(function() {
+ //TODO: convert this over to Leaflet.
+ // not entirely sure it's currently being used (seanc | 11202014)
function doImageErrors(map) {
+ return;
map.layers[0].requestManager.addCallback("requesterror", function(_, img) {
// img.src = "images/tile-404.gif";
});
@@ -19,9 +22,13 @@ var MAPS = {};
var allProviders = [currentProvider];
// our main map
- var main = MAPS.main = new MM.Map("map-main", getProvider(currentProvider), null,
- [new MM.DragHandler(), new MM.DoubleClickHandler(), new MM.TouchHandler()]);
- // doImageErrors(main);
+ var main = MAPS.main = L.map("map-main", {
+ scrollWheelZoom: false,
+ zoomControl: false,
+ attributionControl: false
+ });
+ main.addLayer(getProvider(currentProvider));
+ //doImageErrors(main);
mapsByProvider[currentProvider] = main;
@@ -36,15 +43,39 @@ var MAPS = {};
var el = subParents[i],
// the provider is based on the data-provider HTML attribute
provider = el.getAttribute("data-provider"),
- // FIXME: these maps are not interactive
- map = new MM.Map(el, getProvider(provider), null, [new MM.DragHandler()]);
- map.addCallback("panned", function(_map, offset) {
+
+ // Only allowing for dragging
+ map = L.map(el, {scrollWheelZoom: false,
+ keyboard: false,
+ zoomControl: false,
+ dragging: true,
+ touchZoom: false,
+ doubleClickZoom: false,
+ boxZoom: false,
+ attributionControl: false});
+
+ map.addLayer(getProvider(provider));
+
+
+ map.on("dragstart", function(e){
+ this.offsetStart = this.latLngToLayerPoint(this.getCenter());
+ });
+
+ map.on("drag dragend", function(e){
+ var c = this.latLngToLayerPoint(this.getCenter());
+ var dx = c.x - this.offsetStart.x ,
+ dy = c.y - this.offsetStart.y;
+ _map = this;
if (!main.panning) {
_map.panning = true;
- main.panBy(offset[0], offset[1]);
+ main.panBy([dx,dy], {animate: false});
_map.panning = false;
}
+
+ this.offsetStart = c;
+
});
+
// add it to the list
allProviders.push(provider);
// doImageErrors(map);
@@ -55,23 +86,28 @@ var MAPS = {};
// sync sub-maps to the main map's center using their
// relative positions on screen
function updateSubMaps() {
- var mainWidth = main.dimensions.x,
+ var size = main.getSize(),
+ mainWidth = size.x,
wrapperWidth = wrapper.offsetWidth,
wrapperTop = wrapper.offsetTop,
offsetX = mainWidth - (mainWidth - wrapperWidth) / 2;
for (var i = 0; i < subs.length; i++) {
var sub = subs[i],
- point = new MM.Point(0, 0);
- point.x = offsetX - sub.dimensions.x / 2;
- point.y = wrapperTop + sub.parent.offsetTop + sub.dimensions.y / 2;
- sub.setCenterZoom(main.pointLocation(point), main.getZoom());
+ point = new L.point(0, 0),
+ sz = sub.getSize();
+ point.x = offsetX - sz.x / 2;
+ point.y = wrapperTop + sub._container.offsetTop + sz.y / 2;
+ sub.setView(main.containerPointToLatLng(point), main.getZoom(), {animate: false});
}
}
setupZoomControls(main);
+ // TODO: Figure out if this pan callback is needed?
// pan the sub-maps when the main map is panned
- main.addCallback("panned", function(_map, offset) {
+ /*
+ main.on("moveend", function(e){
+ offset = [0,0];
if (main.panning) return;
main.panning = true;
for (var i = 0; i < subs.length; i++) {
@@ -82,18 +118,24 @@ var MAPS = {};
}
main.panning = false;
});
+ */
// and for all other map redraw events, re-sync them
- main.addCallback("zoomed", updateSubMaps);
- main.addCallback("extentset", updateSubMaps);
- main.addCallback("centered", updateSubMaps);
+ main.on("zoomend", updateSubMaps);
+ main.on("move", updateSubMaps);
// set the initial map position
- main.setCenterZoom(new MM.Location(37.7706, -122.3782), 12);
+ main.setView(new L.latLng(37.7706, -122.3782), 12);
+
+ // sets initial center so other functions,
+ // can calculate offset on "move"
+ main.on("movestart", function(){
+ this.offsetStart = this.latLngToLayerPoint(this.getCenter());
+ });
function updateTitle(map, provider) {
// update the link in the clicked sub-map
- var node = map.parent.querySelector(".provider-name");
+ var node = map._container.querySelector(".provider-name");
node.innerHTML = provider.substr(0, 1).toUpperCase() + provider.substr(1);
var link = node.href
? node
@@ -108,8 +150,8 @@ var MAPS = {};
]);
var feedback = setupFeedbackForm();
- MM.addEvent(main.parent, "mousedown", feedback.hide);
- main.addCallback("zoomed", feedback.hide);
+ main._container.addEventListener("mousedown", feedback.hide);
+ main.on("zoomend", feedback.hide);
updateTitle(main, currentProvider);
@@ -123,17 +165,24 @@ var MAPS = {};
// and set up listening for the browser's location hash
var hasher = new ProviderHash(main, currentProvider, function(provider) {
+
if (!provider || !(provider in mapsByProvider)) {
return false;
}
+
// if the provider has changed...
if (provider != currentProvider) {
// grab the provider from the corresponding map
var source = mapsByProvider[provider],
- target = main;
+ target = main,
+ sourceLayer = getProvider(currentProvider),
+ targetLayer = getProvider(provider);
// swap layers
- source.setLayerAt(0, getProvider(currentProvider));
- target.setLayerAt(0, getProvider(provider));
+ if (source.hasLayer(sourceLayer)) source.removeLayer(sourceLayer);
+ if (target.hasLayer(targetLayer)) target.removeLayer(targetLayer);
+
+ source.addLayer(sourceLayer, true);
+ target.addLayer(targetLayer, true);
updateTitle(source, currentProvider);
updateTitle(target, provider);
@@ -159,7 +208,7 @@ var MAPS = {};
searchInput = document.getElementById("search-location"),
searchButton = document.getElementById("search-submit");
// listen for the submit event
- MM.addEvent(searchForm, "submit", function(e) {
+ searchForm.addEventListener("submit", function(e) {
// remember the old search text
var oldSearchText = searchButton.getAttribute("value");
// put the button into its submitting state
@@ -173,11 +222,11 @@ var MAPS = {};
}
var query = searchInput.value;
-
+ var size = main.getSize();
StamenSearch.geocode({
q: query,
- w: main.dimensions.x,
- h: main.dimensions.y - document.getElementById("header").offsetHeight
+ w: size.x,
+ h: size.y - document.getElementById("header").offsetHeight
}, function(err, results) {
revert();
@@ -186,12 +235,11 @@ var MAPS = {};
return;
}
- main.setZoom(results[0].zoom)
- .setCenter({ lat: results[0].latitude, lon: results[0].longitude });
+ main.setView([results[0].latitude, results[0].longitude], results[0].zoom);
});
// cancel the submit event
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
// create static mini-maps for each of these elements
@@ -202,14 +250,16 @@ var MAPS = {};
provider = getProvider(el.getAttribute("data-provider")),
center = parseCenter(el.getAttribute("data-center")),
zoom = parseInt(el.getAttribute("data-zoom")),
- map = new MM.Map(el, provider, null, []);
- map.setCenterZoom(center, zoom);
+ map = new L.map(el, {scrollWheelZoom: false});
+
+ map.addLayer(provider);
+ map.setView(center, zoom);
MAPS.minis.push(map);
}
var hashish = document.querySelectorAll("a.hashish");
for (var i = 0; i < hashish.length; i++) {
- MM.addEvent(hashish[i], "mouseover", function(e) {
+ hashish[i].addEventListener("mouseover", function(e) {
var link = e.srcElement || e.target,
parts = link.href.split("#"),
suffix = location.hash.split("/").slice(1).join("/");
@@ -218,12 +268,12 @@ var MAPS = {};
}
}
- // parse a string into an MM.Location instance
+ // parse a string into an L.LatLng instance
function parseCenter(str) {
var parts = str.split(/,\s*/),
lat = parseFloat(parts[0]),
- lon = parseFloat(parts[1]);
- return new MM.Location(lat, lon);
+ lng = parseFloat(parts[1]);
+ return L.latLng(lat, lng);
}
init();
diff --git a/js/polyfills.js b/js/polyfills.js
new file mode 100644
index 0000000..c9c1e76
--- /dev/null
+++ b/js/polyfills.js
@@ -0,0 +1,29 @@
+// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
+(function(win, doc){
+ if(win.addEventListener)return; //No need to polyfill
+
+ function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
+ function addEvent(on, fn, self){
+ return (self = this).attachEvent('on' + on, function(e){
+ var e = e || win.event;
+ e.preventDefault = e.preventDefault || function(){e.returnValue = false}
+ e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
+ fn.call(self, e);
+ });
+ }
+ function addListen(obj, i){
+ if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
+ else obj.addEventListener = addEvent;
+ return obj;
+ }
+
+ addListen([doc, win]);
+ if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
+ else{ //IE < 8
+ doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
+ docHijack('getElementsByTagName');
+ docHijack('getElementById');
+ docHijack('createElement');
+ addListen(doc.all);
+ }
+})(window, document);
\ No newline at end of file
Toner
-These high-contrast B+W (black and white) maps are +
These high-contrast B+W (black and white) maps are featured in our Dotspotting project. They are perfect for data - mashups and exploring river meanders and coastal zones. + mashups and exploring river meanders and coastal zones. Available in six flavors: standard toner, hybrid, @@ -119,7 +123,7 @@
Terrain
Orient yourself with our terrain maps, featuring hill shading and natural vegetation colors. These maps showcase advanced - labeling and linework generalization of dual-carriageway roads. + labeling and linework generalization of dual-carriageway roads. Terrain was developed in collaboration with Gem Spear and Nelson Minar. Available in four flavors: standard terrain, @@ -144,7 +148,7 @@
Terrain
data-zoom="9">Watercolor
-Reminiscent of hand drawn maps, our watercolor maps apply +
Reminiscent of hand drawn maps, our watercolor maps apply raster effect area washes and organic edges over a paper texture to add warm pop to any map. Watercolor was inspired by the Bicycle Portraits project. @@ -179,15 +183,15 @@
Burning Map
Mars??
-Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an - instrument on the Mars Global Surveyor (MGS), a spacecraft that - was launched on November 7, 1996. The MOLA dataset also +
Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an + instrument on the Mars Global Surveyor (MGS), a spacecraft that + was launched on November 7, 1996. The MOLA dataset also contains height data, which we've made into a 3D contour map.
Requires a WebGL-enabled browser, such as Google Chrome.
@@ -198,7 +202,7 @@Mars??
Trees, Cabs & Crime
Trees, Cabs & Crime started off as a weekend hack - and ended up in the Venice Biennale. This map + and ended up in the Venice Biennale. This map combines three data sets (street tree locations, taxi cab GPS positions, and crime reports) with subtractive blending to reveal halftones hidden in the @@ -253,7 +257,11 @@
Attribution:
source = document.getElementById("toner-attr"), target = document.getElementById("toner-attr-html"), showing = false; - MM.addEvent(link, "click", function(e) { + + + link.addEventListener("click", function(e){ + e.preventDefault(); + showing = !showing; if (showing) { target.value = source.innerHTML; @@ -263,7 +271,8 @@Attribution:
} else { target.style.display = "none"; } - return MM.cancelEvent(e); + + return false; }); })(); @@ -279,7 +288,10 @@Attribution:
source = document.getElementById("attr"), target = document.getElementById("attr-html"), showing = false; - MM.addEvent(link, "click", function(e) { + + link.addEventListener("click", function(e){ + e.preventDefault(); + showing = !showing; if (showing) { target.value = source.innerHTML; @@ -289,8 +301,10 @@Attribution:
} else { target.style.display = "none"; } - return MM.cancelEvent(e); + + return false; }); + })();If you roll your own tiles from another source you will still need to credit “Map data by OpenStreetMap, under ODbL.” @@ -344,7 +358,7 @@
Leaflet
OpenLayers
-
+
OpenLayers is a hefty and featureful mapping library for use with a variety of GIS applications. View the example.
diff --git a/js/common.js b/js/common.js
index ad9f5d0..f512447 100644
--- a/js/common.js
+++ b/js/common.js
@@ -1,14 +1,60 @@
+// Maps.stamen.com
+// Common functions
+// TODO: wrap these in a namespace
+
+
+
+var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
+ (min--moz-device-pixel-ratio: 1.5),\
+ (-o-min-device-pixel-ratio: 3/2),\
+ (min-resolution: 1.5dppx)";
+
+// TODO: this probably should be in StamenTileLayer
+// ie: {@2x: true}
+var retinaSupportedProviders = ["toner"];
+
+function isRetina() {
+ function getParameterByName(name) {
+ name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+ var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+ results = regex.exec(location.search);
+ return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+ }
+
+ return getParameterByName("retina") ||
+ window.devicePixelRatio > 1 ||
+ (window.matchMedia && window.matchMedia(mediaQuery).matches);
+}
// returns the map provider for a given TileStache layer name
function getProvider(layer) {
- return new MM.StamenTileLayer(layer);
+ var lyr = new L.StamenTileLayer(layer);
+
+ if (isRetina() && retinaSupportedProviders.indexOf(layer) > -1) {
+ // replace the last "." with "@2x."
+ lyr._url = lyr._url.replace(/\.(?!.*\.)/, "@2x.")
+ }
+ return lyr;
+}
+
+function cancelEvent(e) {
+ e.cancelBubble = true;
+ e.cancel = true;
+ e.returnValue = false;
+ if (e.stopPropagation) { e.stopPropagation(); }
+ if (e.preventDefault) { e.preventDefault(); }
+ return false;
}
// cancels all double-click events on the supplied element
function preventDoubleClick(el) {
+ /*
MM.addEvent(el, "dblclick", function(e) {
return MM.cancelEvent(e);
});
+ */
+
+ el.addEventListener("dblclick", cancelEvent);
}
// set up zoom controls for the given map (assumed one per page,
@@ -18,16 +64,17 @@ function setupZoomControls(map) {
zoomOut = document.getElementById("zoom-out");
preventDoubleClick(zoomIn);
- MM.addEvent(zoomIn, "click", function(e) {
+ preventDoubleClick(zoomOut);
+
+ zoomIn.addEventListener("click", function(e){
try { map.zoomIn(); } catch (err) { }
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
- preventDoubleClick(zoomOut);
- MM.addEvent(zoomOut, "click", function(e) {
+
+ zoomOut.addEventListener("click", function(e){
try { map.zoomOut(); } catch (err) { }
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
-
}
function syncMapLinks(map, links, modifyHashParts) {
@@ -40,13 +87,28 @@ function syncMapLinks(map, links, modifyHashParts) {
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)),
parts = [zoom,
center.lat.toFixed(precision),
- center.lon.toFixed(precision)
+ center.lng.toFixed(precision)
];
if (modifyHashParts) {
modifyHashParts.call(null, parts);
}
return parts.join("/");
}
+ map.on("viewreset", function(e){
+ clearTimeout(timeout);
+ timeout = setTimeout(function() {
+ var hash = formatHash();
+ for (var i = 0; i < len; i++) {
+ var link = links[i];
+ if (!link) continue;
+ var href = link.href || "",
+ uri = link.href.split("#").shift();
+ link.href = [uri, hash].join("#");
+ }
+ }, delay);
+ });
+
+ /*
map.addCallback("drawn", function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
@@ -60,6 +122,7 @@ function syncMapLinks(map, links, modifyHashParts) {
}
}, delay);
});
+ */
}
// get the pixel offset of an element from the top left of its offset parent
@@ -89,12 +152,12 @@ function createToggle(link, target, callback) {
}
callback.call(target, showing);
};
-
- MM.addEvent(link, "click", function(e) {
+ link.addEventListener("click", function(e) {
toggler.toggle();
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
+
toggler.toggle = function() { toggler(!showing); };
toggler.show = function() { toggler(true); };
toggler.hide = function() { toggler(false); };
@@ -137,11 +200,12 @@ function setupFeedbackForm() {
}
});
- MM.addEvent(window, "keyup", function(e) {
+ window.addEventListener("keyup", function(e) {
if (e.keyCode === 27) {
toggle.hide();
}
});
+
return toggle;
} else {
var form = {};
@@ -316,13 +380,166 @@ QueryString.prototype = {
};
-MM.QueryHash = function(map, onQueryChange) {
+
+function extendClass(child, parent) {
+ for (var property in parent.prototype) {
+ if (typeof child.prototype[property] == "undefined") {
+ child.prototype[property] = parent.prototype[property];
+ }
+ }
+ return child;
+};
+
+var HAS_HASHCHANGE = (function() {
+ var doc_mode = window.documentMode;
+ return ('onhashchange' in window) &&
+ (doc_mode === undefined || doc_mode > 7);
+ })();
+
+L.Hash = function(map) {
+ this.onMapMove = L.bind(this.onMapMove, this);
+ this.onHashChange = L.bind(this.onHashChange, this);
+ if (map) {
+ this.init(map);
+ }
+};
+
+L.Hash.prototype = {
+ map: null,
+ lastHash: null,
+
+ parseHash: function(hash) {
+ var args = hash.split("/");
+ if (args.length == 3) {
+ var zoom = parseInt(args[0], 10),
+ lat = parseFloat(args[1]),
+ lon = parseFloat(args[2]);
+ if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
+ return false;
+ } else {
+ return {
+ center: L.latLng(lat, lon),
+ zoom: zoom
+ };
+ }
+ } else {
+ return false;
+ }
+ },
+
+ formatHash: function(map) {
+ var center = map.getCenter(),
+ zoom = map.getZoom(),
+ precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
+
+ return "#" + [zoom,
+ center.lat.toFixed(precision),
+ center.lng.toFixed(precision)
+ ].join("/");
+ },
+
+ init: function(map) {
+ this.map = map;
+ //this.map.addCallback("drawn", this.onMapMove);
+ var self = this;
+ this.map.on('viewreset', function(){
+ self.onMapMove(self.map);
+
+ });
+ // reset the hash
+ this.lastHash = null;
+ this.onHashChange();
+
+ if (!this.isListening) {
+ this.startListening();
+ }
+ },
+
+ remove: function() {
+ this.map = null;
+ if (this.isListening) {
+ this.stopListening();
+ }
+ },
+
+ onMapMove: function(map) {
+ // bail if we're moving the map (updating from a hash),
+ // or if the map has no zoom set
+ if (this.movingMap || this.map.zoom === 0) {
+ return false;
+ }
+ var hash = this.formatHash(map);
+ if (this.lastHash != hash) {
+ location.replace(hash);
+ this.lastHash = hash;
+ }
+ },
+
+ movingMap: false,
+ update: function() {
+ var hash = location.hash;
+ if (hash === this.lastHash) {
+ // console.info("(no change)");
+ return;
+ }
+ var sansHash = hash.substr(1),
+ parsed = this.parseHash(sansHash);
+ if (parsed) {
+ // console.log("parsed:", parsed.zoom, parsed.center.toString());
+ this.movingMap = true;
+ this.map.setView(parsed.center, parsed.zoom, {});
+ this.movingMap = false;
+ } else {
+ // console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
+ this.onMapMove(this.map);
+ }
+ },
+
+ // defer hash change updates every 100ms
+ changeDefer: 100,
+ changeTimeout: null,
+ onHashChange: function() {
+ // throttle calls to update() so that they only happen every
+ // `changeDefer` ms
+ if (!this.changeTimeout) {
+ var that = this;
+ this.changeTimeout = setTimeout(function() {
+ that.update();
+ that.changeTimeout = null;
+ }, this.changeDefer);
+ }
+ },
+
+ isListening: false,
+ hashChangeInterval: null,
+ startListening: function() {
+ if (HAS_HASHCHANGE) {
+ window.addEventListener("hashchange", this.onHashChange, false);
+ } else {
+ clearInterval(this.hashChangeInterval);
+ this.hashChangeInterval = setInterval(this.onHashChange, 50);
+ }
+ this.isListening = true;
+ },
+
+ stopListening: function() {
+ if (HAS_HASHCHANGE) {
+ window.removeEventListener("hashchange", this.onHashChange);
+ } else {
+ clearInterval(this.hashChangeInterval);
+ }
+ this.isListening = false;
+ }
+};
+
+
+L.QueryHash = function(map, onQueryChange) {
this.query = new QueryString();
this.onQueryChange = onQueryChange;
- MM.Hash.call(this, map);
+ L.Hash.call(this, map);
};
-MM.QueryHash.prototype = {
+L.QueryHash.prototype = {
query: null,
parseHash: function(hash) {
var qs = "";
@@ -331,18 +548,20 @@ MM.QueryHash.prototype = {
hash = parts[0];
qs = parts[1];
}
- var parsed = MM.Hash.prototype.parseHash.call(this, hash);
+ var parsed = L.Hash.prototype.parseHash.call(this, hash);
if (parsed) {
this.query.params = this.onQueryChange.call(this, this.query.parse(qs));
}
return parsed;
},
formatHash: function(hash) {
- return MM.Hash.prototype.formatHash.call(this, hash) + this.query.toString();
+ return L.Hash.prototype.formatHash.call(this, hash) + this.query.toString();
}
};
-MM.extend(MM.QueryHash, MM.Hash);
+extendClass(L.QueryHash, L.Hash);
+
+
/**
* The ProviderHash is a class that looks for a provider name at the beginning
@@ -364,7 +583,7 @@ var ProviderHash = function(map, providerName, setProvider, overwriteInvalidHash
this.providerName = providerName;
this.setProvider = setProvider;
this.overwriteInvalidHashes = overwriteInvalidHashes !== false;
- MM.Hash.call(this, map);
+ L.Hash.call(this, map);
};
ProviderHash.prototype = {
@@ -384,7 +603,7 @@ ProviderHash.prototype = {
}
var provider = parts.shift();
var parsed = parts.length
- ? MM.Hash.prototype.parseHash.call(this, parts.join("/"))
+ ? L.Hash.prototype.parseHash.call(this, parts.join("/"))
: {center: this.map.getCenter(), zoom: this.map.getZoom()};
if (parsed) {
// console.log("parsed hash:", provider, parsed);
@@ -410,7 +629,7 @@ ProviderHash.prototype = {
* slash-delimited element in the URL.
*/
formatHash: function(hash) {
- var format = MM.Hash.prototype.formatHash.call(this, hash);
+ var format = L.Hash.prototype.formatHash.call(this, hash);
return "#" + this.providerName + "/" + format.substr(1);
},
@@ -426,7 +645,7 @@ ProviderHash.prototype = {
if (parsed) {
// console.log("parsed:", parsed.zoom, parsed.center.toString());
this.movingMap = true;
- this.map.setCenterZoom(parsed.center, parsed.zoom);
+ this.map.setView(parsed.center, parsed.zoom);
this.movingMap = false;
} else {
// console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
@@ -437,7 +656,8 @@ ProviderHash.prototype = {
}
};
-MM.extend(ProviderHash, MM.Hash);
+extendClass(ProviderHash, L.Hash);
+
var _gaq;
// Google Analytics tracking
diff --git a/js/index.js b/js/index.js
index 80b779f..9ec51c2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,7 +2,10 @@
var MAPS = {};
(function() {
+ //TODO: convert this over to Leaflet.
+ // not entirely sure it's currently being used (seanc | 11202014)
function doImageErrors(map) {
+ return;
map.layers[0].requestManager.addCallback("requesterror", function(_, img) {
// img.src = "images/tile-404.gif";
});
@@ -19,9 +22,13 @@ var MAPS = {};
var allProviders = [currentProvider];
// our main map
- var main = MAPS.main = new MM.Map("map-main", getProvider(currentProvider), null,
- [new MM.DragHandler(), new MM.DoubleClickHandler(), new MM.TouchHandler()]);
- // doImageErrors(main);
+ var main = MAPS.main = L.map("map-main", {
+ scrollWheelZoom: false,
+ zoomControl: false,
+ attributionControl: false
+ });
+ main.addLayer(getProvider(currentProvider));
+ //doImageErrors(main);
mapsByProvider[currentProvider] = main;
@@ -36,15 +43,39 @@ var MAPS = {};
var el = subParents[i],
// the provider is based on the data-provider HTML attribute
provider = el.getAttribute("data-provider"),
- // FIXME: these maps are not interactive
- map = new MM.Map(el, getProvider(provider), null, [new MM.DragHandler()]);
- map.addCallback("panned", function(_map, offset) {
+
+ // Only allowing for dragging
+ map = L.map(el, {scrollWheelZoom: false,
+ keyboard: false,
+ zoomControl: false,
+ dragging: true,
+ touchZoom: false,
+ doubleClickZoom: false,
+ boxZoom: false,
+ attributionControl: false});
+
+ map.addLayer(getProvider(provider));
+
+
+ map.on("dragstart", function(e){
+ this.offsetStart = this.latLngToLayerPoint(this.getCenter());
+ });
+
+ map.on("drag dragend", function(e){
+ var c = this.latLngToLayerPoint(this.getCenter());
+ var dx = c.x - this.offsetStart.x ,
+ dy = c.y - this.offsetStart.y;
+ _map = this;
if (!main.panning) {
_map.panning = true;
- main.panBy(offset[0], offset[1]);
+ main.panBy([dx,dy], {animate: false});
_map.panning = false;
}
+
+ this.offsetStart = c;
+
});
+
// add it to the list
allProviders.push(provider);
// doImageErrors(map);
@@ -55,23 +86,28 @@ var MAPS = {};
// sync sub-maps to the main map's center using their
// relative positions on screen
function updateSubMaps() {
- var mainWidth = main.dimensions.x,
+ var size = main.getSize(),
+ mainWidth = size.x,
wrapperWidth = wrapper.offsetWidth,
wrapperTop = wrapper.offsetTop,
offsetX = mainWidth - (mainWidth - wrapperWidth) / 2;
for (var i = 0; i < subs.length; i++) {
var sub = subs[i],
- point = new MM.Point(0, 0);
- point.x = offsetX - sub.dimensions.x / 2;
- point.y = wrapperTop + sub.parent.offsetTop + sub.dimensions.y / 2;
- sub.setCenterZoom(main.pointLocation(point), main.getZoom());
+ point = new L.point(0, 0),
+ sz = sub.getSize();
+ point.x = offsetX - sz.x / 2;
+ point.y = wrapperTop + sub._container.offsetTop + sz.y / 2;
+ sub.setView(main.containerPointToLatLng(point), main.getZoom(), {animate: false});
}
}
setupZoomControls(main);
+ // TODO: Figure out if this pan callback is needed?
// pan the sub-maps when the main map is panned
- main.addCallback("panned", function(_map, offset) {
+ /*
+ main.on("moveend", function(e){
+ offset = [0,0];
if (main.panning) return;
main.panning = true;
for (var i = 0; i < subs.length; i++) {
@@ -82,18 +118,24 @@ var MAPS = {};
}
main.panning = false;
});
+ */
// and for all other map redraw events, re-sync them
- main.addCallback("zoomed", updateSubMaps);
- main.addCallback("extentset", updateSubMaps);
- main.addCallback("centered", updateSubMaps);
+ main.on("zoomend", updateSubMaps);
+ main.on("move", updateSubMaps);
// set the initial map position
- main.setCenterZoom(new MM.Location(37.7706, -122.3782), 12);
+ main.setView(new L.latLng(37.7706, -122.3782), 12);
+
+ // sets initial center so other functions,
+ // can calculate offset on "move"
+ main.on("movestart", function(){
+ this.offsetStart = this.latLngToLayerPoint(this.getCenter());
+ });
function updateTitle(map, provider) {
// update the link in the clicked sub-map
- var node = map.parent.querySelector(".provider-name");
+ var node = map._container.querySelector(".provider-name");
node.innerHTML = provider.substr(0, 1).toUpperCase() + provider.substr(1);
var link = node.href
? node
@@ -108,8 +150,8 @@ var MAPS = {};
]);
var feedback = setupFeedbackForm();
- MM.addEvent(main.parent, "mousedown", feedback.hide);
- main.addCallback("zoomed", feedback.hide);
+ main._container.addEventListener("mousedown", feedback.hide);
+ main.on("zoomend", feedback.hide);
updateTitle(main, currentProvider);
@@ -123,17 +165,24 @@ var MAPS = {};
// and set up listening for the browser's location hash
var hasher = new ProviderHash(main, currentProvider, function(provider) {
+
if (!provider || !(provider in mapsByProvider)) {
return false;
}
+
// if the provider has changed...
if (provider != currentProvider) {
// grab the provider from the corresponding map
var source = mapsByProvider[provider],
- target = main;
+ target = main,
+ sourceLayer = getProvider(currentProvider),
+ targetLayer = getProvider(provider);
// swap layers
- source.setLayerAt(0, getProvider(currentProvider));
- target.setLayerAt(0, getProvider(provider));
+ if (source.hasLayer(sourceLayer)) source.removeLayer(sourceLayer);
+ if (target.hasLayer(targetLayer)) target.removeLayer(targetLayer);
+
+ source.addLayer(sourceLayer, true);
+ target.addLayer(targetLayer, true);
updateTitle(source, currentProvider);
updateTitle(target, provider);
@@ -159,7 +208,7 @@ var MAPS = {};
searchInput = document.getElementById("search-location"),
searchButton = document.getElementById("search-submit");
// listen for the submit event
- MM.addEvent(searchForm, "submit", function(e) {
+ searchForm.addEventListener("submit", function(e) {
// remember the old search text
var oldSearchText = searchButton.getAttribute("value");
// put the button into its submitting state
@@ -173,11 +222,11 @@ var MAPS = {};
}
var query = searchInput.value;
-
+ var size = main.getSize();
StamenSearch.geocode({
q: query,
- w: main.dimensions.x,
- h: main.dimensions.y - document.getElementById("header").offsetHeight
+ w: size.x,
+ h: size.y - document.getElementById("header").offsetHeight
}, function(err, results) {
revert();
@@ -186,12 +235,11 @@ var MAPS = {};
return;
}
- main.setZoom(results[0].zoom)
- .setCenter({ lat: results[0].latitude, lon: results[0].longitude });
+ main.setView([results[0].latitude, results[0].longitude], results[0].zoom);
});
// cancel the submit event
- return MM.cancelEvent(e);
+ return cancelEvent(e);
});
// create static mini-maps for each of these elements
@@ -202,14 +250,16 @@ var MAPS = {};
provider = getProvider(el.getAttribute("data-provider")),
center = parseCenter(el.getAttribute("data-center")),
zoom = parseInt(el.getAttribute("data-zoom")),
- map = new MM.Map(el, provider, null, []);
- map.setCenterZoom(center, zoom);
+ map = new L.map(el, {scrollWheelZoom: false});
+
+ map.addLayer(provider);
+ map.setView(center, zoom);
MAPS.minis.push(map);
}
var hashish = document.querySelectorAll("a.hashish");
for (var i = 0; i < hashish.length; i++) {
- MM.addEvent(hashish[i], "mouseover", function(e) {
+ hashish[i].addEventListener("mouseover", function(e) {
var link = e.srcElement || e.target,
parts = link.href.split("#"),
suffix = location.hash.split("/").slice(1).join("/");
@@ -218,12 +268,12 @@ var MAPS = {};
}
}
- // parse a string into an MM.Location instance
+ // parse a string into an L.LatLng instance
function parseCenter(str) {
var parts = str.split(/,\s*/),
lat = parseFloat(parts[0]),
- lon = parseFloat(parts[1]);
- return new MM.Location(lat, lon);
+ lng = parseFloat(parts[1]);
+ return L.latLng(lat, lng);
}
init();
diff --git a/js/polyfills.js b/js/polyfills.js
new file mode 100644
index 0000000..c9c1e76
--- /dev/null
+++ b/js/polyfills.js
@@ -0,0 +1,29 @@
+// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
+(function(win, doc){
+ if(win.addEventListener)return; //No need to polyfill
+
+ function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
+ function addEvent(on, fn, self){
+ return (self = this).attachEvent('on' + on, function(e){
+ var e = e || win.event;
+ e.preventDefault = e.preventDefault || function(){e.returnValue = false}
+ e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
+ fn.call(self, e);
+ });
+ }
+ function addListen(obj, i){
+ if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
+ else obj.addEventListener = addEvent;
+ return obj;
+ }
+
+ addListen([doc, win]);
+ if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
+ else{ //IE < 8
+ doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
+ docHijack('getElementsByTagName');
+ docHijack('getElementById');
+ docHijack('createElement');
+ addListen(doc.all);
+ }
+})(window, document);
\ No newline at end of file