Interactive demo of https://github.com/migurski/d3map/tree/e42c04d5 by migurski

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>New Newness</title>
    <script src="//d3js.org/d3.v2.min.js"></script>
    <script src="Grid.min.js"></script>
    <style title="text/css">
    <!--
    
        #map
        {
            border: 1px solid pink;
            width: 100%;
            height: 350px;

            position: relative;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        
        body
        {
            overflow: hidden;
        }
        
        img.tile,
        div.tile
        {
            display: block;
            position: absolute;
            margin: 0;
            padding: 0;
            border: 0;
            -webkit-transform-origin: 0px 0px;
        }
    
    -->
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="application/javascript">
    <!--
    
        /*
        var map = makeDivMap(document.getElementById('map'), 1582, 656, 12);
        */

        var map = makeImgMap(document.getElementById('map'),
                             '//otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg',
                             1582, 656, 12);

        map.redraw();
    
    //-->
    </script>
</body>
</html>

Grid.min.js

var require=function(e,h){var g=require.resolve(e,h||"/"),f=require.modules[g];if(!f)throw Error("Failed to resolve module "+e+", tried "+g);return(g=require.cache[g])?g.exports:f()};require.paths=[];require.modules={};require.cache={};require.extensions=[".js",".coffee",".json"];require._core={assert:!0,events:!0,fs:!0,path:!0,vm:!0};
require.resolve=function(){return function(e,h){function g(a){a=d.normalize(a);if(require.modules[a])return a;for(var j=0;j<require.extensions.length;j++){var c=require.extensions[j];if(require.modules[a+c])return a+c}}function f(a){a=a.replace(/\/+$/,"");var j=d.normalize(a+"/package.json");if(require.modules[j]){var j=require.modules[j](),c=j.browserify;if("object"===typeof c&&c.main){if(j=g(d.resolve(a,c.main)))return j}else if("string"===typeof c){if(j=g(d.resolve(a,c)))return j}else if(j.main&&
(j=g(d.resolve(a,j.main))))return j}return g(a+"/index")}h||(h="/");if(require._core[e])return e;var d=require.modules.path(),a=(h=d.resolve("/",h))||"/";if(e.match(/^(?:\.\.?\/|\/)/)){var b=g(d.resolve(a,e))||f(d.resolve(a,e));if(b)return b}a:{for(var b="/"===a?[""]:d.normalize(a).split("/"),a=[],c=b.length-1;0<=c;c--)if("node_modules"!==b[c]){var k=b.slice(0,c+1).join("/")+"/node_modules";a.push(k)}for(b=0;b<a.length;b++){c=a[b];if(k=g(c+"/"+e)){a=k;break a}if(c=f(c+"/"+e)){a=c;break a}}a=(k=g(e))?
k:void 0}if(a)return a;throw Error("Cannot find module '"+e+"'");}}();require.alias=function(e,h){var g=require.modules.path(),f=null;try{f=require.resolve(e+"/package.json","/")}catch(d){f=require.resolve(e,"/")}for(var g=g.dirname(f),f=(Object.keys||function(a){var b=[],d;for(d in a)b.push(d);return b})(require.modules),a=0;a<f.length;a++){var b=f[a];b.slice(0,g.length+1)===g+"/"?(b=b.slice(g.length),require.modules[h+b]=require.modules[g+b]):b===g&&(require.modules[h]=require.modules[g])}};
(function(){var e={},h="undefined"!==typeof window?window:{},g=!1;require.define=function(f,d){!g&&require.modules.__browserify_process&&(e=require.modules.__browserify_process(),g=!0);var a=require._core[f]?"":require.modules.path().dirname(f),b=function(b){var d=require(b,a);if((b=require.cache[require.resolve(b,a)])&&null===b.parent)b.parent=c;return d};b.resolve=function(c){return require.resolve(c,a)};b.modules=require.modules;b.define=require.define;b.cache=require.cache;var c={id:f,filename:f,
exports:{},loaded:!1,parent:null};require.modules[f]=function(){require.cache[f]=c;d.call(c.exports,b,c,c.exports,a,f,e,h);c.loaded=!0;return c.exports}}})();
require.define("path",function(e,h,g,f,d,a){function b(a,j){for(var c=[],b=0;b<a.length;b++)j(a[b],b,a)&&c.push(a[b]);return c}function c(a,c){for(var b=0,d=a.length;0<=d;d--){var e=a[d];"."==e?a.splice(d,1):".."===e?(a.splice(d,1),b++):b&&(a.splice(d,1),b--)}if(c)for(;b--;b)a.unshift("..");return a}var k=/^(.+\/(?!$)|\/)?((?:.+?)?(\.[^.]*)?)$/;g.resolve=function(){for(var d="",j=!1,e=arguments.length;-1<=e&&!j;e--){var f=0<=e?arguments[e]:a.cwd();"string"===typeof f&&f&&(d=f+"/"+d,j="/"===f.charAt(0))}d=
c(b(d.split("/"),function(a){return!!a}),!j).join("/");return(j?"/":"")+d||"."};g.normalize=function(a){var j="/"===a.charAt(0),d="/"===a.slice(-1);a=c(b(a.split("/"),function(a){return!!a}),!j).join("/");!a&&!j&&(a=".");a&&d&&(a+="/");return(j?"/":"")+a};g.join=function(){var a=Array.prototype.slice.call(arguments,0);return g.normalize(b(a,function(a){return a&&"string"===typeof a}).join("/"))};g.dirname=function(a){return(a=k.exec(a)[1]||"")?1===a.length?a:a.substring(0,a.length-1):"."};g.basename=
function(a,c){var b=k.exec(a)[2]||"";c&&b.substr(-1*c.length)===c&&(b=b.substr(0,b.length-c.length));return b};g.extname=function(a){return k.exec(a)[3]||""};g.relative=function(a,c){function b(a){for(var c=0;c<a.length&&""===a[c];c++);for(var d=a.length-1;0<=d&&""===a[d];d--);return c>d?[]:a.slice(c,d-c+1)}a=g.resolve(a).substr(1);c=g.resolve(c).substr(1);for(var d=b(a.split("/")),e=b(c.split("/")),f=Math.min(d.length,e.length),k=f,h=0;h<f;h++)if(d[h]!==e[h]){k=h;break}f=[];for(h=k;h<d.length;h++)f.push("..");
f=f.concat(e.slice(k));return f.join("/")}});
require.define("__browserify_process",function(e,h,g,f,d,a){a=h.exports={};a.nextTick=function(){if("undefined"!==typeof window&&window.setImmediate)return function(a){return window.setImmediate(a)};if("undefined"!==typeof window&&window.postMessage&&window.addEventListener){var a=[];window.addEventListener("message",function(c){c.source===window&&"browserify-tick"===c.data&&(c.stopPropagation(),0<a.length&&a.shift()())},!0);return function(c){a.push(c);window.postMessage("browserify-tick","*")}}return function(a){setTimeout(a,
0)}}();a.title="browser";a.browser=!0;a.env={};a.argv=[];a.binding=function(a){if("evals"===a)return e("vm");throw Error("No such module. (Possibly not yet loaded)");};var b="/",c;a.cwd=function(){return b};a.chdir=function(a){c||(c=e("path"));b=c.resolve(a,b)}});
require.define("/Image.js",function(e,h,g){var f=e("./Mouse");e("./Base");var d=e("./Core"),a=e("./Tile"),b=e("./Grid"),c=function(a,c,e,g,h){this.selection=d3.select(a);this.loaded_tiles={};this.template=c;this.parent=a;this.setup_mouse_control();a=f.element_size(this.parent);this.grid=new b.Grid(a.x,a.y,3);this.grid.coord=new d.Coordinate(e,g,h);this.queue=new k(this.loaded_tiles);this.tile_queuer=this.getTileQueuer();this.tile_dequeuer=this.getTileDequeuer();this.tile_onloaded=this.getTileOnloaded();
var l=this;d3.select(window).on("resize.map",function(){l.update_gridsize()})};c.prototype.setup_mouse_control=function(){var a=new f.Control(this);this.selection.on("dblclick.map",function(){a.onDoubleclick()}).on("mousedown.map",function(){a.onMousedown()}).on("mousewheel.map",function(){a.onMousewheel()}).on("DOMMouseScroll.map",function(){a.onMousewheel()});return a};c.prototype.update_gridsize=function(){var a=f.element_size(this.parent);this.grid.resize(a.x,a.y);this.redraw()};c.prototype.zoom=
function(){return this.grid.coord.zoom};c.prototype.redraw=function(){var b=this.grid.visible_tiles(),b=this.selection.selectAll("img.tile").data(b,c.tile_key);b.exit().each(this.tile_dequeuer).remove();b.enter().append("img").attr("class","tile").attr("id",c.tile_key).style("z-index",c.tile_zoom).on("load",this.tile_onloaded).each(this.tile_queuer);a.transform_property?this.selection.selectAll("img.tile").style(a.transform_property,c.tile_xform):this.selection.selectAll("img.tile").style("left",
c.tile_left).style("top",c.tile_top).style("width",c.tile_width).style("height",c.tile_height);this.queue.process()};c.tile_key=function(a){return a.toKey()};c.tile_left=function(a){return a.left()};c.tile_top=function(a){return a.top()};c.tile_width=function(a){return a.width()};c.tile_height=function(a){return a.height()};c.tile_xform=function(a){return a.transform()};c.tile_zoom=function(a){return a.coord.zoom};c.prototype.getTileOnloaded=function(){var a=this;return function(){a.loaded_tiles[this.src]=
Date.now();a.queue.close(this);a.redraw()}};c.prototype.getTileQueuer=function(){var a=this;return function(c){var b=a.template,b=b.replace("{z}","{Z}").replace("{Z}",c.coord.zoom.toFixed(0)),b=b.replace("{x}","{X}").replace("{X}",c.coord.column.toFixed(0)),b=b.replace("{y}","{Y}").replace("{Y}",c.coord.row.toFixed(0));a.queue.append(this,b)}};c.prototype.getTileDequeuer=function(){var a=this.queue;return function(){a.cancel(this)}};g.Map=c;var k;e=function(a){this.queue=[];this.queue_by_id={};this.open_request_count=
0;this.requests_by_id={};this.loaded_tiles=a};e.prototype.append=function(a,c){if(c in this.loaded_tiles)a.src=c;else{var b=new l(a,c);this.queue.push(b);this.queue_by_id[b.id]=b}};e.prototype.cancel=function(a){this.close(a);var c=this.queue_by_id[a.id];c&&(c.deny(),delete this.queue_by_id[a.id])};e.prototype.close=function(a){var c=this.requests_by_id[a.id];c&&(c.deny(),delete this.requests_by_id[a.id],this.open_request_count--)};e.prototype.process=function(){for(this.queue.sort(l.compare);8>this.open_request_count&&
0<this.queue.length;){var a=this.queue.shift();a.load()&&(this.requests_by_id[a.id]=a,this.open_request_count++);delete this.queue_by_id[a.id]}};k=e;var l;e=function(a,c){this.id=a.id;this.sort=parseInt(d3.select(a).style("z-index"));this.image=a;this.src=c};e.prototype.deny=function(){this.image=null};e.prototype.load=function(){return this.image&&this.image.parentNode?(this.image.src=this.src,!0):!1};e.compare=function(a,c){return c.sort-a.sort};l=e});
require.define("/Mouse.js",function(e,h,g){var f=e("./Core");g.element_size=function(d){return d==document.body?new f.Point(window.innerWidth,window.innerHeight):new f.Point(d.clientWidth,d.clientHeight)};e=function(d){this.map=d};e.prototype.onDoubleclick=function(){var d=d3.mouse(this.map.parent),d=new f.Point(d[0],d[1]);this.map.grid.zoomByAbout(d3.event.shiftKey?-1:1,d);this.map.redraw()};e.prototype.onMousedown=function(){var d=this,a=new f.Point(d3.event.pageX,d3.event.pageY);d3.select(window).on("mousemove.map",
this.getOnMousemove(a)).on("mouseup.map",function(){d.onMouseup()});d3.event.preventDefault();d3.event.stopPropagation()};e.prototype.onMouseup=function(){d3.select(window).on("mousemove.map",null).on("mouseup.map",null)};e.prototype.getOnMousemove=function(d){var a=this.map,b=d;return function(){var c=new f.Point(d3.event.pageX,d3.event.pageY);a.grid.panBy(c.x-b.x,c.y-b.y);a.redraw();b=c}};e.prototype.onMousewheel=function(){var d=d3.mouse(this.map.parent),d=new f.Point(d[0],d[1]);this.map.grid.zoomByAbout(this.d3_behavior_zoom_delta(),
d);this.map.redraw();d3.event.preventDefault();d3.event.stopPropagation()};e.prototype.d3_behavior_zoom_delta=function(){this.d3_behavior_zoom_div||(this.d3_behavior_zoom_div=d3.select("body").append("div").style("visibility","hidden").style("top",0).style("height",0).style("width",0).style("overflow-y","scroll").append("div").style("height","2000px").node().parentNode);try{this.d3_behavior_zoom_div.scrollTop=250;this.d3_behavior_zoom_div.dispatchEvent(d3.event);var d=250-this.d3_behavior_zoom_div.scrollTop}catch(a){d=
d3.event.wheelDelta||5*-d3.event.detail}return 0.005*d};g.Control=e});
require.define("/Core.js",function(e,h,g){e=function(d,a){this.x=d;this.y=a};e.prototype.toString=function(){return"("+this.x.toFixed(3)+", "+this.y.toFixed(3)+")"};g.Point=e;var f=function(d,a,b){this.row=d;this.column=a;this.zoom=b};f.prototype.toString=function(){return"("+this.row.toFixed(3)+", "+this.column.toFixed(3)+" @"+this.zoom.toFixed(3)+")"};f.prototype.copy=function(){return new f(this.row,this.column,this.zoom)};f.prototype.container=function(){var d=this.zoomTo(Math.floor(this.zoom));
return new f(Math.floor(d.row),Math.floor(d.column),d.zoom)};f.prototype.zoomTo=function(d){var a=Math.pow(2,d-this.zoom);return new f(this.row*a,this.column*a,d)};f.prototype.zoomBy=function(d){var a=Math.pow(2,d);return new f(this.row*a,this.column*a,this.zoom+d)};f.prototype.up=function(d){"undefined"===typeof d&&(d=1);return new f(this.row-d,this.column,this.zoom)};f.prototype.right=function(d){"undefined"===typeof d&&(d=1);return new f(this.row,this.column+d,this.zoom)};f.prototype.down=function(d){"undefined"===
typeof d&&(d=1);return new f(this.row+d,this.column,this.zoom)};f.prototype.left=function(d){"undefined"===typeof d&&(d=1);return new f(this.row,this.column-d,this.zoom)};g.Coordinate=f});require.define("/Base.js",function(){});
require.define("/Tile.js",function(e,h,g){function f(a,b,c,d,e){if("WebKitCSSMatrix"in window&&"m11"in new window.WebKitCSSMatrix)return a=a||1,"translate3d("+[b.toFixed(0),c.toFixed(0),"0px"].join("px,")+") scale3d("+[a.toFixed(8),a.toFixed(8),"1"].join()+")";var f="MozTransform"==g.transform_property?"px":"";return"matrix("+[a||"1",0,0,a||"1",b+(d*a-d)+f,c+(e*a-e)+f].join()+")"}var d=e("./Grid");e=function(a,b){this.coord=a;this.grid=b};e.prototype.toString=function(){return[this.coord.toString(),
this.left(),this.top()].join(" ")};e.prototype.toKey=function(){return[Math.floor(this.coord.zoom),Math.floor(this.coord.column),Math.floor(this.coord.row)].join("/")};e.prototype.left=function(){var a=this.grid.coordinatePoint(this.coord.container());return Math.round(a.x)+"px"};e.prototype.top=function(){var a=this.grid.coordinatePoint(this.coord.container());return Math.round(a.y)+"px"};e.prototype.width=function(){var a=Math.pow(2,this.grid.coord.zoom-this.coord.zoom);return Math.ceil(a*d.TileSize)+
"px"};e.prototype.height=function(){var a=Math.pow(2,this.grid.coord.zoom-this.coord.zoom);return Math.ceil(a*d.TileSize)+"px"};e.prototype.transform=function(){var a=Math.pow(2,this.grid.coord.zoom-this.coord.zoom);a*d.TileSize%1&&(a+=(1-a*d.TileSize%1)/d.TileSize);var b=this.grid.roundCoord().zoomBy(this.coord.zoom-this.grid.roundCoord().zoom),c=Math.round(this.grid.center.x+(this.coord.column-b.column)*d.TileSize*a),b=Math.round(this.grid.center.y+(this.coord.row-b.row)*d.TileSize*a);return f(a,
c,b,d.TileSize/2,d.TileSize/2)};g.Tile=e;g.transform_property=null;"transform"in document.documentElement.style?g.transform_property="transform":"-webkit-transform"in document.documentElement.style?g.transform_property="-webkit-transform":"-o-transform"in document.documentElement.style?g.transform_property="-o-transform":"-moz-transform"in document.documentElement.style?g.transform_property="-moz-transform":"-ms-transform"in document.documentElement.style&&(g.transform_property="-ms-transform");g.matrix_string=
f});
require.define("/Grid.js",function(e,h,g){var f=e("./Core"),d=e("./Tile");g.TileSize=256;g.TileExp=Math.log(g.TileSize)/Math.log(2);e=function(a,b,c){this.resize(a,b);this.pyramid=c};e.prototype.roundCoord=function(){return this.coord.zoomTo(Math.round(this.coord.zoom))};e.prototype.resize=function(a,b){this.center=new f.Point(a/2,b/2)};e.prototype.panBy=function(a,b){var c=new f.Point(this.center.x-a,this.center.y-b);this.coord=this.pointCoordinate(c)};e.prototype.zoomByAbout=function(a,b){var c=new f.Point(2*
this.center.x-b.x,2*this.center.y-b.y);this.coord=this.pointCoordinate(new f.Point(b.x,b.y));this.coord=this.coord.zoomBy(a);18<this.coord.zoom?this.coord=this.coord.zoomTo(18):0>this.coord.zoom&&(this.coord=this.coord.zoomTo(0));this.coord=this.pointCoordinate(c)};e.prototype.coordinatePoint=function(a){var b=this.coord.zoomBy(g.TileExp);a=a.zoomTo(b.zoom);return new f.Point(this.center.x-b.column+a.column,this.center.y-b.row+a.row)};e.prototype.pointCoordinate=function(a){var b=a.x-this.center.x;
a=a.y-this.center.y;return this.coord.zoomBy(g.TileExp).right(b).down(a).zoomTo(this.coord.zoom)};e.prototype.visible_tiles=function(){for(var a=this.roundCoord(),b=this.pointCoordinate(new f.Point(0,0)),c=this.pointCoordinate(new f.Point(2*this.center.x,2*this.center.y)),b=b.zoomTo(a.zoom).container(),c=c.zoomTo(a.zoom).container(),e=[],g={},h=b.row;h<=c.row;h++)for(var p=b.column;p<=c.column;p++){var m=new f.Coordinate(h,p,a.zoom);e.push(new d.Tile(m,this));for(var n=m.zoom-1;n>=m.zoom-this.pyramid&&
0<=n;n--){var q=m.zoomTo(n).container();if(q.toString()in g)break;g[q.toString()]=!0;e.push(new d.Tile(q,this))}}return e};g.Grid=e});
require.define("/Div.js",function(e,h,g){var f=e("./Mouse");e("./Base");var d=e("./Core"),a=e("./Grid"),b=function(c,b,e,g){this.selection=d3.select(c);this.parent=c;this.setup_mouse_control();c=f.element_size(this.parent);this.grid=new a.Grid(c.x,c.y,0);this.grid.coord=new d.Coordinate(b,e,g);var h=this;d3.select(window).on("resize.map",function(){h.update_gridsize()})};b.prototype.setup_mouse_control=function(){var a=new f.Control(this);this.selection.on("dblclick.map",function(){a.onDoubleclick()}).on("mousedown.map",
function(){a.onMousedown()}).on("mousewheel.map",function(){a.onMousewheel()}).on("DOMMouseScroll.map",function(){a.onMousewheel()});return a};b.prototype.update_gridsize=function(){var a=f.element_size(this.parent);this.grid.resize(a.x,a.y);this.redraw()};b.prototype.redraw=function(){var a=this.grid.visible_tiles(),a=this.selection.selectAll("div.tile").data(a,b.tile_key);a.exit().remove();a.enter().append("div").attr("class","tile").style("border-top","1px solid pink").style("border-left","1px solid pink").text(b.tile_key).attr("id",
b.tile_key);this.selection.selectAll("div.tile").style("left",b.tile_left).style("top",b.tile_top).style("width",b.tile_width).style("height",b.tile_height)};b.tile_key=function(a){return a.toKey()};b.tile_left=function(a){return a.left()};b.tile_top=function(a){return a.top()};b.tile_width=function(a){return a.width()};b.tile_height=function(a){return a.height()};b.tile_xform=function(a){return a.transform()};g.Map=b});
require.define("/Map.js",function(e){var h=e("./Image"),g=e("./Div");window.makeImgMap=function(e,d,a,b,c){if(e==document.body)throw Error("Sorry, for the moment I can\u2019t figure out how to make the mousewheel work in Safari 5.0 when the parent element is the document body. Try making your parent element a DIV?");return new h.Map(e,d,a,b,c)};window.makeDivMap=function(e,d,a,b){if(e==document.body)throw Error("Sorry, for the moment I can\u2019t figure out how to make the mousewheel work in Safari 5.0 when the parent element is the document body. Try making your parent element a DIV?");
return new g.Map(e,d,a,b)}});require("/Map.js");