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

README.md

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

Grid.bro.js

var require = function (file, cwd) {
    var resolved = require.resolve(file, cwd || '/');
    var mod = require.modules[resolved];
    if (!mod) throw new Error(
        'Failed to resolve module ' + file + ', tried ' + resolved
    );
    var cached = require.cache[resolved];
    var res = cached? cached.exports : mod();
    return res;
};

require.paths = [];
require.modules = {};
require.cache = {};
require.extensions = [".js",".coffee",".json"];

require._core = {
    'assert': true,
    'events': true,
    'fs': true,
    'path': true,
    'vm': true
};

require.resolve = (function () {
    return function (x, cwd) {
        if (!cwd) cwd = '/';
        
        if (require._core[x]) return x;
        var path = require.modules.path();
        cwd = path.resolve('/', cwd);
        var y = cwd || '/';
        
        if (x.match(/^(?:\.\.?\/|\/)/)) {
            var m = loadAsFileSync(path.resolve(y, x))
                || loadAsDirectorySync(path.resolve(y, x));
            if (m) return m;
        }
        
        var n = loadNodeModulesSync(x, y);
        if (n) return n;
        
        throw new Error("Cannot find module '" + x + "'");
        
        function loadAsFileSync (x) {
            x = path.normalize(x);
            if (require.modules[x]) {
                return x;
            }
            
            for (var i = 0; i < require.extensions.length; i++) {
                var ext = require.extensions[i];
                if (require.modules[x + ext]) return x + ext;
            }
        }
        
        function loadAsDirectorySync (x) {
            x = x.replace(/\/+$/, '');
            var pkgfile = path.normalize(x + '/package.json');
            if (require.modules[pkgfile]) {
                var pkg = require.modules[pkgfile]();
                var b = pkg.browserify;
                if (typeof b === 'object' && b.main) {
                    var m = loadAsFileSync(path.resolve(x, b.main));
                    if (m) return m;
                }
                else if (typeof b === 'string') {
                    var m = loadAsFileSync(path.resolve(x, b));
                    if (m) return m;
                }
                else if (pkg.main) {
                    var m = loadAsFileSync(path.resolve(x, pkg.main));
                    if (m) return m;
                }
            }
            
            return loadAsFileSync(x + '/index');
        }
        
        function loadNodeModulesSync (x, start) {
            var dirs = nodeModulesPathsSync(start);
            for (var i = 0; i < dirs.length; i++) {
                var dir = dirs[i];
                var m = loadAsFileSync(dir + '/' + x);
                if (m) return m;
                var n = loadAsDirectorySync(dir + '/' + x);
                if (n) return n;
            }
            
            var m = loadAsFileSync(x);
            if (m) return m;
        }
        
        function nodeModulesPathsSync (start) {
            var parts;
            if (start === '/') parts = [ '' ];
            else parts = path.normalize(start).split('/');
            
            var dirs = [];
            for (var i = parts.length - 1; i >= 0; i--) {
                if (parts[i] === 'node_modules') continue;
                var dir = parts.slice(0, i + 1).join('/') + '/node_modules';
                dirs.push(dir);
            }
            
            return dirs;
        }
    };
})();

require.alias = function (from, to) {
    var path = require.modules.path();
    var res = null;
    try {
        res = require.resolve(from + '/package.json', '/');
    }
    catch (err) {
        res = require.resolve(from, '/');
    }
    var basedir = path.dirname(res);
    
    var keys = (Object.keys || function (obj) {
        var res = [];
        for (var key in obj) res.push(key);
        return res;
    })(require.modules);
    
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        if (key.slice(0, basedir.length + 1) === basedir + '/') {
            var f = key.slice(basedir.length);
            require.modules[to + f] = require.modules[basedir + f];
        }
        else if (key === basedir) {
            require.modules[to] = require.modules[basedir];
        }
    }
};

(function () {
    var process = {};
    var global = typeof window !== 'undefined' ? window : {};
    var definedProcess = false;
    
    require.define = function (filename, fn) {
        if (!definedProcess && require.modules.__browserify_process) {
            process = require.modules.__browserify_process();
            definedProcess = true;
        }
        
        var dirname = require._core[filename]
            ? ''
            : require.modules.path().dirname(filename)
        ;
        
        var require_ = function (file) {
            var requiredModule = require(file, dirname);
            var cached = require.cache[require.resolve(file, dirname)];

            if (cached && cached.parent === null) {
                cached.parent = module_;
            }

            return requiredModule;
        };
        require_.resolve = function (name) {
            return require.resolve(name, dirname);
        };
        require_.modules = require.modules;
        require_.define = require.define;
        require_.cache = require.cache;
        var module_ = {
            id : filename,
            filename: filename,
            exports : {},
            loaded : false,
            parent: null
        };
        
        require.modules[filename] = function () {
            require.cache[filename] = module_;
            fn.call(
                module_.exports,
                require_,
                module_,
                module_.exports,
                dirname,
                filename,
                process,
                global
            );
            module_.loaded = true;
            return module_.exports;
        };
    };
})();


require.define("path",function(require,module,exports,__dirname,__filename,process,global){function filter (xs, fn) {
    var res = [];
    for (var i = 0; i < xs.length; i++) {
        if (fn(xs[i], i, xs)) res.push(xs[i]);
    }
    return res;
}

// resolves . and .. elements in a path array with directory names there
// must be no slashes, empty elements, or device names (c:\) in the array
// (so also no leading and trailing slashes - it does not distinguish
// relative and absolute paths)
function normalizeArray(parts, allowAboveRoot) {
  // if the path tries to go above the root, `up` ends up > 0
  var up = 0;
  for (var i = parts.length; i >= 0; i--) {
    var last = parts[i];
    if (last == '.') {
      parts.splice(i, 1);
    } else if (last === '..') {
      parts.splice(i, 1);
      up++;
    } else if (up) {
      parts.splice(i, 1);
      up--;
    }
  }

  // if the path is allowed to go above the root, restore leading ..s
  if (allowAboveRoot) {
    for (; up--; up) {
      parts.unshift('..');
    }
  }

  return parts;
}

// Regex to split a filename into [*, dir, basename, ext]
// posix version
var splitPathRe = /^(.+\/(?!$)|\/)?((?:.+?)?(\.[^.]*)?)$/;

// path.resolve([from ...], to)
// posix version
exports.resolve = function() {
var resolvedPath = '',
    resolvedAbsolute = false;

for (var i = arguments.length; i >= -1 && !resolvedAbsolute; i--) {
  var path = (i >= 0)
      ? arguments[i]
      : process.cwd();

  // Skip empty and invalid entries
  if (typeof path !== 'string' || !path) {
    continue;
  }

  resolvedPath = path + '/' + resolvedPath;
  resolvedAbsolute = path.charAt(0) === '/';
}

// At this point the path should be resolved to a full absolute path, but
// handle relative paths to be safe (might happen when process.cwd() fails)

// Normalize the path
resolvedPath = normalizeArray(filter(resolvedPath.split('/'), function(p) {
    return !!p;
  }), !resolvedAbsolute).join('/');

  return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.';
};

// path.normalize(path)
// posix version
exports.normalize = function(path) {
var isAbsolute = path.charAt(0) === '/',
    trailingSlash = path.slice(-1) === '/';

// Normalize the path
path = normalizeArray(filter(path.split('/'), function(p) {
    return !!p;
  }), !isAbsolute).join('/');

  if (!path && !isAbsolute) {
    path = '.';
  }
  if (path && trailingSlash) {
    path += '/';
  }
  
  return (isAbsolute ? '/' : '') + path;
};


// posix version
exports.join = function() {
  var paths = Array.prototype.slice.call(arguments, 0);
  return exports.normalize(filter(paths, function(p, index) {
    return p && typeof p === 'string';
  }).join('/'));
};


exports.dirname = function(path) {
  var dir = splitPathRe.exec(path)[1] || '';
  var isWindows = false;
  if (!dir) {
    // No dirname
    return '.';
  } else if (dir.length === 1 ||
      (isWindows && dir.length <= 3 && dir.charAt(1) === ':')) {
    // It is just a slash or a drive letter with a slash
    return dir;
  } else {
    // It is a full dirname, strip trailing slash
    return dir.substring(0, dir.length - 1);
  }
};


exports.basename = function(path, ext) {
  var f = splitPathRe.exec(path)[2] || '';
  // TODO: make this comparison case-insensitive on windows?
  if (ext && f.substr(-1 * ext.length) === ext) {
    f = f.substr(0, f.length - ext.length);
  }
  return f;
};


exports.extname = function(path) {
  return splitPathRe.exec(path)[3] || '';
};

exports.relative = function(from, to) {
  from = exports.resolve(from).substr(1);
  to = exports.resolve(to).substr(1);

  function trim(arr) {
    var start = 0;
    for (; start < arr.length; start++) {
      if (arr[start] !== '') break;
    }

    var end = arr.length - 1;
    for (; end >= 0; end--) {
      if (arr[end] !== '') break;
    }

    if (start > end) return [];
    return arr.slice(start, end - start + 1);
  }

  var fromParts = trim(from.split('/'));
  var toParts = trim(to.split('/'));

  var length = Math.min(fromParts.length, toParts.length);
  var samePartsLength = length;
  for (var i = 0; i < length; i++) {
    if (fromParts[i] !== toParts[i]) {
      samePartsLength = i;
      break;
    }
  }

  var outputParts = [];
  for (var i = samePartsLength; i < fromParts.length; i++) {
    outputParts.push('..');
  }

  outputParts = outputParts.concat(toParts.slice(samePartsLength));

  return outputParts.join('/');
};

});

require.define("__browserify_process",function(require,module,exports,__dirname,__filename,process,global){var process = module.exports = {};

process.nextTick = (function () {
    var canSetImmediate = typeof window !== 'undefined'
        && window.setImmediate;
    var canPost = typeof window !== 'undefined'
        && window.postMessage && window.addEventListener
    ;

    if (canSetImmediate) {
        return function (f) { return window.setImmediate(f) };
    }

    if (canPost) {
        var queue = [];
        window.addEventListener('message', function (ev) {
            if (ev.source === window && ev.data === 'browserify-tick') {
                ev.stopPropagation();
                if (queue.length > 0) {
                    var fn = queue.shift();
                    fn();
                }
            }
        }, true);

        return function nextTick(fn) {
            queue.push(fn);
            window.postMessage('browserify-tick', '*');
        };
    }

    return function nextTick(fn) {
        setTimeout(fn, 0);
    };
})();

process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];

process.binding = function (name) {
    if (name === 'evals') return (require)('vm')
    else throw new Error('No such module. (Possibly not yet loaded)')
};

(function () {
    var cwd = '/';
    var path;
    process.cwd = function () { return cwd };
    process.chdir = function (dir) {
        if (!path) path = require('path');
        cwd = path.resolve(dir, cwd);
    };
})();

});

require.define("/Image.js",function(require,module,exports,__dirname,__filename,process,global){var Mouse = require("./Mouse")

var Base = require("./Base")

var Core = require("./Core")

var Tile = require("./Tile")

var Grid = require("./Grid")

var Map = (function () {

    function Map(parent, template, row, column, zoom) {

        this.selection = d3.select(parent);

        this.loaded_tiles = {

        };

        this.template = template;

        this.parent = parent;

        this.setup_mouse_control();

        var size = Mouse.element_size(this.parent);

        this.grid = new Grid.Grid(size.x, size.y, 3);

        this.grid.coord = new Core.Coordinate(row, column, zoom);

        this.queue = new Queue(this.loaded_tiles);

        this.tile_queuer = this.getTileQueuer();

        this.tile_dequeuer = this.getTileDequeuer();

        this.tile_onloaded = this.getTileOnloaded();

        var map = this;

        d3.select(window).on('resize.map', function () {

            map.update_gridsize();

        });

    }

    Map.prototype.setup_mouse_control = function () {

        var mouse_ctrl = new Mouse.Control(this);

        this.selection.on('dblclick.map', function () {

            mouse_ctrl.onDoubleclick();

        }).on('mousedown.map', function () {

            mouse_ctrl.onMousedown();

        }).on('mousewheel.map', function () {

            mouse_ctrl.onMousewheel();

        }).on('DOMMouseScroll.map', function () {

            mouse_ctrl.onMousewheel();

        });

        return mouse_ctrl;

    };

    Map.prototype.update_gridsize = function () {

        var size = Mouse.element_size(this.parent);

        this.grid.resize(size.x, size.y);

        this.redraw();

    };

    Map.prototype.zoom = function () {

        return this.grid.coord.zoom;

    };

    Map.prototype.redraw = function () {

        var tiles = this.grid.visible_tiles(), join = this.selection.selectAll('img.tile').data(tiles, Map.tile_key);

        join.exit().each(this.tile_dequeuer).remove();

        join.enter().append('img').attr('class', 'tile').attr('id', Map.tile_key).style('z-index', Map.tile_zoom).on('load', this.tile_onloaded).each(this.tile_queuer);

        if(Tile.transform_property) {

            this.selection.selectAll('img.tile').style(Tile.transform_property, Map.tile_xform);

        } else {

            this.selection.selectAll('img.tile').style('left', Map.tile_left).style('top', Map.tile_top).style('width', Map.tile_width).style('height', Map.tile_height);

        }

        this.queue.process();

    };

    Map.tile_key = function tile_key(tile) {

        return tile.toKey();

    };

    Map.tile_left = function tile_left(tile) {

        return tile.left();

    };

    Map.tile_top = function tile_top(tile) {

        return tile.top();

    };

    Map.tile_width = function tile_width(tile) {

        return tile.width();

    };

    Map.tile_height = function tile_height(tile) {

        return tile.height();

    };

    Map.tile_xform = function tile_xform(tile) {

        return tile.transform();

    };

    Map.tile_zoom = function tile_zoom(tile) {

        return tile.coord.zoom;

    };

    Map.prototype.getTileOnloaded = function () {

        var map = this;

        return function (tile, i) {

            map.loaded_tiles[this.src] = Date.now();

            map.queue.close(this);

            map.redraw();

        };

    };

    Map.prototype.getTileQueuer = function () {

        var map = this;

        return function (tile, i) {

            var src = map.template;

            src = src.replace('{z}', '{Z}').replace('{Z}', tile.coord.zoom.toFixed(0));

            src = src.replace('{x}', '{X}').replace('{X}', tile.coord.column.toFixed(0));

            src = src.replace('{y}', '{Y}').replace('{Y}', tile.coord.row.toFixed(0));

            map.queue.append(this, src);

        };

    };

    Map.prototype.getTileDequeuer = function () {

        var queue = this.queue;

        return function (tile, i) {

            queue.cancel(this);

        };

    };

    return Map;

})();

exports.Map = Map;

var Queue = (function () {

    function Queue(loaded_tiles) {

        this.queue = [];

        this.queue_by_id = {

        };

        this.open_request_count = 0;

        this.requests_by_id = {

        };

        this.loaded_tiles = loaded_tiles;

    }

    Queue.prototype.append = function (image, src) {

        if(src in this.loaded_tiles) {

            image.src = src;

        } else {

            var request = new Request(image, src);

            this.queue.push(request);

            this.queue_by_id[request.id] = request;

        }

    };

    Queue.prototype.cancel = function (image) {

        this.close(image);

        var request = this.queue_by_id[image.id];

        if(request) {

            request.deny();

            delete this.queue_by_id[image.id];

        }

    };

    Queue.prototype.close = function (image) {

        var request = this.requests_by_id[image.id];

        if(request) {

            request.deny();

            delete this.requests_by_id[image.id];

            this.open_request_count--;

        }

    };

    Queue.prototype.process = function () {

        this.queue.sort(Request.compare);

        while(this.open_request_count < 8 && this.queue.length > 0) {

            var request = this.queue.shift(), loading = request.load();

            if(loading) {

                this.requests_by_id[request.id] = request;

                this.open_request_count++;

            }

            delete this.queue_by_id[request.id];

        }

    };

    return Queue;

})();

var Request = (function () {

    function Request(image, src) {

        this.id = image.id;

        this.sort = parseInt(d3.select(image).style('z-index'));

        this.image = image;

        this.src = src;

    }

    Request.prototype.deny = function () {

        this.image = null;

    };

    Request.prototype.load = function () {

        if(this.image && this.image.parentNode) {

            this.image.src = this.src;

            return true;

        }

        return false;

    };

    Request.compare = function compare(a, b) {

        return b.sort - a.sort;

    };

    return Request;

})();


});

require.define("/Mouse.js",function(require,module,exports,__dirname,__filename,process,global){

var Core = require("./Core")



function element_size(element) {

    if(element == document.body) {

        return new Core.Point(window.innerWidth, window.innerHeight);

    }

    return new Core.Point(element.clientWidth, element.clientHeight);

}

exports.element_size = element_size;

var Control = (function () {

    function Control(map) {

        this.map = map;

    }

    Control.prototype.onDoubleclick = function () {

        var mouse = d3.mouse(this.map.parent), anchor = new Core.Point(mouse[0], mouse[1]), amount = d3.event.shiftKey ? -1 : 1;

        this.map.grid.zoomByAbout(amount, anchor);

        this.map.redraw();

    };

    Control.prototype.onMousedown = function () {

        var control = this, start_mouse = new Core.Point(d3.event.pageX, d3.event.pageY);

        d3.select(window).on('mousemove.map', this.getOnMousemove(start_mouse)).on('mouseup.map', function () {

            control.onMouseup();

        });

        d3.event.preventDefault();

        d3.event.stopPropagation();

    };

    Control.prototype.onMouseup = function () {

        d3.select(window).on('mousemove.map', null).on('mouseup.map', null);

    };

    Control.prototype.getOnMousemove = function (start) {

        var map = this.map, prev = start;

        return function () {

            var curr = new Core.Point(d3.event.pageX, d3.event.pageY), dx = curr.x - prev.x, dy = curr.y - prev.y;

            map.grid.panBy(dx, dy);

            map.redraw();

            prev = curr;

        };

    };

    Control.prototype.onMousewheel = function () {

        var mouse = d3.mouse(this.map.parent), anchor = new Core.Point(mouse[0], mouse[1]);

        this.map.grid.zoomByAbout(this.d3_behavior_zoom_delta(), anchor);

        this.map.redraw();

        d3.event.preventDefault();

        d3.event.stopPropagation();

    };

    Control.prototype.d3_behavior_zoom_delta = function () {

        if(!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 delta = 250 - this.d3_behavior_zoom_div['scrollTop'];

        } catch (error) {

            var delta = d3.event.wheelDelta || (-d3.event.detail * 5);

        }

        return delta * 0.005;

    };

    return Control;

})();

exports.Control = Control;


});

require.define("/Core.js",function(require,module,exports,__dirname,__filename,process,global){var Point = (function () {

    function Point(x, y) {

        this.x = x;

        this.y = y;

    }

    Point.prototype.toString = function () {

        return "(" + this.x.toFixed(3) + ", " + this.y.toFixed(3) + ")";

    };

    return Point;

})();

exports.Point = Point;

var Coordinate = (function () {

    function Coordinate(row, column, zoom) {

        this.row = row;

        this.column = column;

        this.zoom = zoom;

    }

    Coordinate.prototype.toString = function () {

        return "(" + this.row.toFixed(3) + ", " + this.column.toFixed(3) + " @" + this.zoom.toFixed(3) + ")";

    };

    Coordinate.prototype.copy = function () {

        return new Coordinate(this.row, this.column, this.zoom);

    };

    Coordinate.prototype.container = function () {

        var coord = this.zoomTo(Math.floor(this.zoom));

        return new Coordinate(Math.floor(coord.row), Math.floor(coord.column), coord.zoom);

    };

    Coordinate.prototype.zoomTo = function (destination) {

        var power = Math.pow(2, destination - this.zoom);

        return new Coordinate(this.row * power, this.column * power, destination);

    };

    Coordinate.prototype.zoomBy = function (distance) {

        var power = Math.pow(2, distance);

        return new Coordinate(this.row * power, this.column * power, this.zoom + distance);

    };

    Coordinate.prototype.up = function (distance) {

        if (typeof distance === "undefined") { distance = 1; }

        return new Coordinate(this.row - distance, this.column, this.zoom);

    };

    Coordinate.prototype.right = function (distance) {

        if (typeof distance === "undefined") { distance = 1; }

        return new Coordinate(this.row, this.column + distance, this.zoom);

    };

    Coordinate.prototype.down = function (distance) {

        if (typeof distance === "undefined") { distance = 1; }

        return new Coordinate(this.row + distance, this.column, this.zoom);

    };

    Coordinate.prototype.left = function (distance) {

        if (typeof distance === "undefined") { distance = 1; }

        return new Coordinate(this.row, this.column - distance, this.zoom);

    };

    return Coordinate;

})();

exports.Coordinate = Coordinate;


});

require.define("/Base.js",function(require,module,exports,__dirname,__filename,process,global){


});

require.define("/Tile.js",function(require,module,exports,__dirname,__filename,process,global){

var Grid = require("./Grid")

var Tile = (function () {

    function Tile(coordinate, grid) {

        this.coord = coordinate;

        this.grid = grid;

    }

    Tile.prototype.toString = function () {

        return [

            this.coord.toString(), 

            this.left(), 

            this.top()

        ].join(' ');

    };

    Tile.prototype.toKey = function () {

        return [

            Math.floor(this.coord.zoom), 

            Math.floor(this.coord.column), 

            Math.floor(this.coord.row)

        ].join('/');

    };

    Tile.prototype.left = function () {

        var point = this.grid.coordinatePoint(this.coord.container());

        return Math.round(point.x) + 'px';

    };

    Tile.prototype.top = function () {

        var point = this.grid.coordinatePoint(this.coord.container());

        return Math.round(point.y) + 'px';

    };

    Tile.prototype.width = function () {

        var scale = Math.pow(2, this.grid.coord.zoom - this.coord.zoom);

        return Math.ceil(scale * Grid.TileSize) + 'px';

    };

    Tile.prototype.height = function () {

        var scale = Math.pow(2, this.grid.coord.zoom - this.coord.zoom);

        return Math.ceil(scale * Grid.TileSize) + 'px';

    };

    Tile.prototype.transform = function () {

        var scale = Math.pow(2, this.grid.coord.zoom - this.coord.zoom);

        if(scale * Grid.TileSize % 1) {

            scale += (1 - scale * Grid.TileSize % 1) / Grid.TileSize;

        }

        var zoomedCoord = this.grid.roundCoord().zoomBy(this.coord.zoom - this.grid.roundCoord().zoom), x = Math.round(this.grid.center.x + (this.coord.column - zoomedCoord.column) * Grid.TileSize * scale), y = Math.round(this.grid.center.y + (this.coord.row - zoomedCoord.row) * Grid.TileSize * scale);

        return matrix_string(scale, x, y, Grid.TileSize / 2.0, Grid.TileSize / 2.0);

    };

    return Tile;

})();

exports.Tile = Tile;

exports.transform_property = null;

if('transform' in document.documentElement.style) {

    exports.transform_property = 'transform';

} else if('-webkit-transform' in document.documentElement.style) {

    exports.transform_property = '-webkit-transform';

} else if('-o-transform' in document.documentElement.style) {

    exports.transform_property = '-o-transform';

} else if('-moz-transform' in document.documentElement.style) {

    exports.transform_property = '-moz-transform';

} else if('-ms-transform' in document.documentElement.style) {

    exports.transform_property = '-ms-transform';

}

function matrix_string(scale, x, y, cx, cy) {

    if('WebKitCSSMatrix' in window && ('m11' in new window['WebKitCSSMatrix']())) {

        scale = scale || 1;

        return 'translate3d(' + [

            x.toFixed(0), 

            y.toFixed(0), 

            '0px'

        ].join('px,') + ') scale3d(' + [

            scale.toFixed(8), 

            scale.toFixed(8), 

            '1'

        ].join(',') + ')';

    }

    var unit = (exports.transform_property == 'MozTransform') ? 'px' : '';

    return 'matrix(' + [

        (scale || '1'), 

        0, 

        0, 

        (scale || '1'), 

        (x + ((cx * scale) - cx)) + unit, 

        (y + ((cy * scale) - cy)) + unit

    ].join(',') + ')';

}

exports.matrix_string = matrix_string;


});

require.define("/Grid.js",function(require,module,exports,__dirname,__filename,process,global){var Core = require("./Core")

var Tile = require("./Tile")

exports.TileSize = 256;

exports.TileExp = Math.log(exports.TileSize) / Math.log(2);

var MinZoom = 0;

var MaxZoom = 18;

var Grid = (function () {

    function Grid(w, h, pyramid) {

        this.resize(w, h);

        this.pyramid = pyramid;

    }

    Grid.prototype.roundCoord = function () {

        return this.coord.zoomTo(Math.round(this.coord.zoom));

    };

    Grid.prototype.resize = function (w, h) {

        this.center = new Core.Point(w / 2, h / 2);

    };

    Grid.prototype.panBy = function (x, y) {

        var new_center = new Core.Point(this.center.x - x, this.center.y - y);

        this.coord = this.pointCoordinate(new_center);

    };

    Grid.prototype.zoomByAbout = function (delta, anchor) {

        var offset = new Core.Point(this.center.x * 2 - anchor.x, this.center.y * 2 - anchor.y), coord = this.pointCoordinate(new Core.Point(anchor.x, anchor.y));

        this.coord = coord;

        this.coord = this.coord.zoomBy(delta);

        if(this.coord.zoom > MaxZoom) {

            this.coord = this.coord.zoomTo(MaxZoom);

        } else if(this.coord.zoom < MinZoom) {

            this.coord = this.coord.zoomTo(MinZoom);

        }

        this.coord = this.pointCoordinate(offset);

    };

    Grid.prototype.coordinatePoint = function (coord) {

        var pixel_center = this.coord.zoomBy(exports.TileExp), pixel_coord = coord.zoomTo(pixel_center.zoom), x = this.center.x - pixel_center.column + pixel_coord.column, y = this.center.y - pixel_center.row + pixel_coord.row;

        return new Core.Point(x, y);

    };

    Grid.prototype.pointCoordinate = function (point) {

        var x = point.x - this.center.x, y = point.y - this.center.y, pixel_center = this.coord.zoomBy(exports.TileExp), pixel_coord = pixel_center.right(x).down(y);

        return pixel_coord.zoomTo(this.coord.zoom);

    };

    Grid.prototype.visible_tiles = function () {

        var round_coord = this.roundCoord(), tl = this.pointCoordinate(new Core.Point(0, 0)), br = this.pointCoordinate(new Core.Point(this.center.x * 2, this.center.y * 2));

        tl = tl.zoomTo(round_coord.zoom).container();

        br = br.zoomTo(round_coord.zoom).container();

        var tiles = [], parents = {

        };

        for(var i = tl.row; i <= br.row; i++) {

            for(var j = tl.column; j <= br.column; j++) {

                var coord = new Core.Coordinate(i, j, round_coord.zoom);

                tiles.push(new Tile.Tile(coord, this));

                for(var k = coord.zoom - 1; k >= coord.zoom - this.pyramid && k >= 0; k--) {

                    var parent = coord.zoomTo(k).container();

                    if(parent.toString() in parents) {

                        break;

                    }

                    parents[parent.toString()] = true;

                    tiles.push(new Tile.Tile(parent, this));

                }

            }

        }

        return tiles;

    };

    return Grid;

})();

exports.Grid = Grid;


});

require.define("/Div.js",function(require,module,exports,__dirname,__filename,process,global){var Mouse = require("./Mouse")

var Base = require("./Base")

var Core = require("./Core")

var Grid = require("./Grid")



var Map = (function () {

    function Map(parent, row, column, zoom) {

        this.selection = d3.select(parent);

        this.parent = parent;

        this.setup_mouse_control();

        var size = Mouse.element_size(this.parent);

        this.grid = new Grid.Grid(size.x, size.y, 0);

        this.grid.coord = new Core.Coordinate(row, column, zoom);

        var map = this;

        d3.select(window).on('resize.map', function () {

            map.update_gridsize();

        });

    }

    Map.prototype.setup_mouse_control = function () {

        var mouse_ctrl = new Mouse.Control(this);

        this.selection.on('dblclick.map', function () {

            mouse_ctrl.onDoubleclick();

        }).on('mousedown.map', function () {

            mouse_ctrl.onMousedown();

        }).on('mousewheel.map', function () {

            mouse_ctrl.onMousewheel();

        }).on('DOMMouseScroll.map', function () {

            mouse_ctrl.onMousewheel();

        });

        return mouse_ctrl;

    };

    Map.prototype.update_gridsize = function () {

        var size = Mouse.element_size(this.parent);

        this.grid.resize(size.x, size.y);

        this.redraw();

    };

    Map.prototype.redraw = function () {

        var tiles = this.grid.visible_tiles(), join = this.selection.selectAll('div.tile').data(tiles, Map.tile_key);

        join.exit().remove();

        join.enter().append('div').attr('class', 'tile').style('border-top', '1px solid pink').style('border-left', '1px solid pink').text(Map.tile_key).attr('id', Map.tile_key);

        this.selection.selectAll('div.tile').style('left', Map.tile_left).style('top', Map.tile_top).style('width', Map.tile_width).style('height', Map.tile_height);

    };

    Map.tile_key = function tile_key(tile) {

        return tile.toKey();

    };

    Map.tile_left = function tile_left(tile) {

        return tile.left();

    };

    Map.tile_top = function tile_top(tile) {

        return tile.top();

    };

    Map.tile_width = function tile_width(tile) {

        return tile.width();

    };

    Map.tile_height = function tile_height(tile) {

        return tile.height();

    };

    Map.tile_xform = function tile_xform(tile) {

        return tile.transform();

    };

    return Map;

})();

exports.Map = Map;


});

require.define("/Map.js",function(require,module,exports,__dirname,__filename,process,global){var Image = require("./Image")

var Div = require("./Div")

var sorry_docbody_safari5 = 'Sorry, for the moment I can’t 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?';

function makeImgMap(parent, template, row, column, zoom) {

    if(parent == document.body) {

        throw Error(sorry_docbody_safari5);

    }

    return new Image.Map(parent, template, row, column, zoom);

}

function makeDivMap(parent, row, column, zoom) {

    if(parent == document.body) {

        throw Error(sorry_docbody_safari5);

    }

    return new Div.Map(parent, row, column, zoom);

}

window['makeImgMap'] = makeImgMap;

window['makeDivMap'] = makeDivMap;


});
require("/Map.js");

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");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>New Newness</title>
    <script src="http://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'),
                             'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg',
                             1582, 656, 12);

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