Compiled TypeScript sample

squares-map.js

var Map = (function () {
    function Map(parent, template, proj, loc, zoom) {
        this.selection = d3.select(parent);
        this.loaded_tiles = {
        };
        this.template = template;
        this.parent = parent;
        var size = Mouse.element_size(this.parent), coord = proj.locationCoordinate(loc).zoomTo(zoom);
        this.grid = new Grid.Grid(size.x, size.y, coord, 3);
        this.projection = proj;
        this.queue = new Queue(this.loaded_tiles);
        this.tile_queuer = this.getTileQueuer();
        this.tile_dequeuer = this.getTileDequeuer();
        this.tile_onloaded = this.getTileOnloaded();
        Mouse.link_control(this.selection, new Mouse.Control(this, true));
        Hash.link_control(this);
        var map = this;
        d3.select(window).on('resize.map', function () {
            map.update_gridsize();
        });
        this.selection.selectAll('img.tile').remove();
        this.redraw(true);
    }
    Map.prototype.update_gridsize = function () {
        var size = Mouse.element_size(this.parent);
        this.grid.resize(size.x, size.y);
        this.redraw(true);
    };
    Map.prototype.pointLocation = function (point) {
        var coord = this.grid.pointCoordinate(point ? point : this.grid.center);
        return this.projection.coordinateLocation(coord);
    };
    Map.prototype.locationPoint = function (loc) {
        var coord = this.projection.locationCoordinate(loc);
        return this.grid.coordinatePoint(coord);
    };
    Map.prototype.setCenterZoom = function (loc, zoom) {
        this.grid.setCenter(this.projection.locationCoordinate(loc, zoom));
        this.redraw(true);
    };
    Map.prototype.onMoved = function (callback) {
        var map = this, before = this.moved_callback;
        this.moved_callback = function () {
            if(before) {
                before();
            }
            callback(map);
        };
    };
    Map.prototype.redraw = function (moved) {
        var tiles = this.grid.visibleTiles(), join = this.selection.selectAll('img.tile').data(tiles, tile_key);
        join.exit().each(this.tile_dequeuer).remove();
        join.enter().append('img').attr('class', 'tile').attr('id', tile_key).style('z-index', tile_zoom).style('display', 'none').on('load', this.tile_onloaded).each(this.tile_queuer);
        if(Tile.transform_property) {
            this.selection.selectAll('img.tile').style(Tile.transform_property, tile_xform);
        } else {
            this.selection.selectAll('img.tile').style('left', tile_left).style('top', tile_top).style('width', tile_width).style('height', tile_height);
        }
        if(moved && this.moved_callback) {
            this.moved_callback();
        }
        this.queue.process();
    };
    Map.prototype.getTileOnloaded = function () {
        var map = this;
        return function (tile, i) {
            d3.select(this).style('display', 'block');
            map.loaded_tiles[this.src] = Date.now();
            map.queue.close(this);
            map.redraw(false);
        };
    };
    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;
})();