Skip to content

Instantly share code, notes, and snippets.

@linusmarco

linusmarco/index.html

Created August 22, 2017 16:00
Show Gist options
  • Save linusmarco/6f7350ace33b5a2be9c07ce7a74bb019 to your computer and use it in GitHub Desktop.
Save linusmarco/6f7350ace33b5a2be9c07ce7a74bb019 to your computer and use it in GitHub Desktop.
Download ZIP
d3-tile aspectRatio
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
form {
margin: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tile .water-layer, .tile .river, .tile .stream, .tile .canal { fill: none; stroke: none; stroke-width: 0.5px; }
.tile .water, .tile .ocean { fill: #9DD9F2 }
.tile .water_boundary, .tile .ocean_boundary, .tile .riverbank_boundary { fill: none; stroke: black; stroke-width: 0.5px; }
</style>
<form>
<select id="type-select">
<option value="ESRI_Imagery_World_2D">ESRI_Imagery_World_2D</option>
<option value="ESRI_StreetMap_World_2D">ESRI_StreetMap_World_2D</option>
<option value="NatGeo_World_Map">NatGeo_World_Map</option>
<option value="NGS_Topo_US_2D">NGS_Topo_US_2D</option>
<option value="Ocean_Basemap">Ocean_Basemap</option>
<option value="USA_Topo_Maps">USA_Topo_Maps</option>
<option value="World_Imagery">World_Imagery</option>
<option value="World_Physical_Map">World_Physical_Map</option>
<option value="World_Shaded_Relief">World_Shaded_Relief</option>
<option value="World_Street_Map">World_Street_Map</option>
<option value="World_Terrain_Base">World_Terrain_Base</option>
<option value="World_Topo_Map">World_Topo_Map</option>
</select>
</form>
<svg></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-array')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-array'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3));
}(this, function (exports,d3Array) { 'use strict';
function tile() {
var x0 = 0,
y0 = 0,
x1 = 960,
y1 = 500,
tx = (x0 + x1) / 2,
ty = (y0 + y1) / 2,
tileSize = 256,
aspectRatio = 1;
scale = 256,
zoomDelta = 0,
wrap = true;
function tile() {
var z = Math.max(Math.log(scale) / Math.LN2 - Math.log2(tileSize), 0),
z0 = Math.round(z + zoomDelta),
// j is number of tiles on which the width of the world will fit
j = 1 << z0,
k = Math.pow(2, z - z0 + Math.log2(tileSize)),
x = tx - scale / 2,
y = ty - scale / 2,
tiles = [],
cols = d3Array.range(
Math.max(wrap ? -Infinity : 0, Math.floor((x0 - x) / k)),
Math.min(Math.ceil((x1 - x) / k), wrap ? Infinity : j)
),
rows = d3Array.range(
Math.max(0, Math.floor((y0 - y) / k)),
Math.min(Math.ceil((y1 - y) / k), j)
);
// console.log(z)
// console.log(z0)
// console.log(k)
// console.log(x0, ",", x)
console.log(j)
console.log(rows)
console.log(cols)
rows.forEach(function(y) {
cols.forEach(function(x) {
tiles.push({
x: (x % j + j) % j,
// x: (x % (j*(tileSize/scale))),
y: y,
z: z0,
tx: x * tileSize,
ty: y * tileSize
});
});
});
tiles.translate = [x / k, y / k];
tiles.scale = k;
tiles.tileSize = tileSize;
tiles.aspectRatio = aspectRatio;
return tiles;
}
tile.size = function(_) {
return arguments.length ? (x0 = y0 = 0, x1 = +_[0], y1 = +_[1], tile) : [x1 - x0, y1 - y0];
};
tile.extent = function(_) {
return arguments.length ? (x0 = +_[0][0], y0 = +_[0][1], x1 = +_[1][0], y1 = +_[1][1], tile) : [[x0, y0], [x1, y1]];
};
tile.scale = function(_) {
return arguments.length ? (scale = +_, tile) : scale;
};
tile.translate = function(_) {
return arguments.length ? (tx = +_[0], ty = +_[1], tile) : [tx, ty];
};
tile.zoomDelta = function(_) {
return arguments.length ? (zoomDelta = +_, tile) : zoomDelta;
};
tile.wrap = function(_) {
return arguments.length ? (wrap = _, tile) : wrap;
};
tile.tileSize = function(_) {
return arguments.length ? (tileSize = _, tile) : tileSize;
};
tile.aspectRatio = function(_) {
return arguments.length ? (aspectRatio = _, tile) : aspectRatio;
};
return tile;
}
exports.tile = tile;
Object.defineProperty(exports, '__esModule', { value: true });
}));
</script>
<script>
var resolutions = {
"ESRI_Imagery_World_2D": { tileSize: 512, aspectRatio: 2 },
"ESRI_StreetMap_World_2D": { tileSize: 512, aspectRatio: 2 },
"NatGeo_World_Map": { tileSize: 256, aspectRatio: 1 },
"NGS_Topo_US_2D": { tileSize: 512, aspectRatio: 2 },
"Ocean_Basemap": { tileSize: 256, aspectRatio: 1 },
"USA_Topo_Maps": { tileSize: 256, aspectRatio: 1 },
"World_Imagery": { tileSize: 256, aspectRatio: 1 },
"World_Physical_Map": { tileSize: 256, aspectRatio: 1 },
"World_Shaded_Relief": { tileSize: 256, aspectRatio: 1 },
"World_Street_Map": { tileSize: 256, aspectRatio: 1 },
"World_Terrain_Base": { tileSize: 256, aspectRatio: 1 },
"World_Topo_Map": { tileSize: 256, aspectRatio: 1 }
};
var baseUrl = "https://services.arcgisonline.com/arcgis/rest/services/{type}/MapServer/tile/{z}/{y}/{x}";
var pi = Math.PI,
tau = 2 * pi;
var width = 960,
height = 500;
var projection = d3.geoMercator()
.scale(1 / tau)
.translate([0, 0]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
var raster = svg.append("g");
var scale = 1 << 3;
loadTiles("ESRI_Imagery_World_2D");
d3.select("#type-select")
.on("change", function() { loadTiles(this.value); });
function loadTiles(type) {
var tiles = d3.tile()
// .wrap(false)
.tileSize(resolutions[type])
.aspectRatio()
.size([width, height])
.scale(scale)
.translate([scale / 2, scale / 2])
();
console.log(tiles);
raster.selectAll("*").remove();
var image = raster
.attr("transform", function(d) { return "translate(" + tiles.translate[0] + "," + tiles.translate[1] + ")" })
.selectAll("image")
.data(tiles, function(d) { return d; });
image.exit().remove();
image.enter().append("image")
.attr("xlink:href", function(d) { return url(baseUrl, type, d); })
.attr("x", function(d) { return d.tx; })
.attr("y", function(d) { return d.ty; })
.attr("width", resolutions[type])
.attr("height", resolutions[type]);
}
function url(template, type, d) {
return template
.replace("{type}", type)
.replace("{x}", d.x)
.replace("{y}", d.y)
.replace("{z}", d.z);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment