Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Compiled TypeScript sample
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;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.