A simpler example of Mapzen vector tiles, without panning and zooming. Just a static map!
Map tiles © OpenStreetMap contributors, Who’s On First.
forked from mbostock's block: Vector Tiles
license: gpl-3.0 |
A simpler example of Mapzen vector tiles, without panning and zooming. Just a static map!
Map tiles © OpenStreetMap contributors, Who’s On First.
forked from mbostock's block: Vector Tiles
d3.geo.tile=function(){function t(){var t=Math.max(Math.log(n)/Math.LN2-8,0),h=Math.round(t+e),o=Math.pow(2,t-h+8),u=[(r[0]-n/2)/o,(r[1]-n/2)/o],l=[],c=d3.range(Math.max(0,Math.floor(-u[0])),Math.max(0,Math.ceil(a[0]/o-u[0]))),M=d3.range(Math.max(0,Math.floor(-u[1])),Math.max(0,Math.ceil(a[1]/o-u[1])));return M.forEach(function(t){c.forEach(function(a){l.push([a,t,h])})}),l.translate=u,l.scale=o,l}var a=[960,500],n=256,r=[a[0]/2,a[1]/2],e=0;return t.size=function(n){return arguments.length?(a=n,t):a},t.scale=function(a){return arguments.length?(n=a,t):n},t.translate=function(a){return arguments.length?(r=a,t):r},t.zoomDelta=function(a){return arguments.length?(e=+a,t):e},t}; |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
margin: 0; | |
} | |
svg { | |
background-color: #fff; | |
} | |
path { | |
fill: none; | |
stroke: #000404; | |
stroke-opacity: 0.7; | |
stroke-width: 2; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
} | |
.major_road { | |
/*stroke: #4fa242; fill: #7aea90; */ | |
stroke-width: 1; | |
} | |
.minor_road { | |
/*stroke: #4fa242; fill: #7aea90; */ | |
stroke-width: 1; | |
} | |
/* | |
.highway { stroke: #f39; stroke-width: 1.5px; } | |
.rail { stroke: #7de; } | |
*/ | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="d3.geo.tile.min.js"></script> | |
<script> | |
var width = Math.max(960, window.innerWidth), | |
height = Math.max(500, window.innerHeight); | |
var tiler = d3.geo.tile() | |
.size([width, height]); | |
var projection = d3.geo.mercator() | |
.center([-84.2500477,30.437805]) | |
//.center([-122.4183, 37.7750]) | |
//.scale((1 << 21) / 2 / Math.PI) | |
.scale((1 << 20) / 2 / Math.PI + 40000) | |
.translate([width / 2, height / 2]); | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
.style("filter", "url(#gooey)") //Set the filter on the container svg | |
//SVG filter for the gooey effect | |
//Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ | |
var defs = svg.append('defs'); | |
var filter = defs.append('filter').attr('id','gooey'); | |
filter.append('feGaussianBlur') | |
.attr('in','SourceGraphic') | |
.attr('stdDeviation','1') | |
.attr('result','blur'); | |
filter.append('feColorMatrix') | |
.attr('in','blur') | |
.attr('mode','matrix') | |
.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 29 -6'); | |
svg.selectAll("g.tile") | |
.data(tiler | |
.scale(projection.scale() * 2 * Math.PI) | |
.translate(projection([0, 0]))) | |
.enter().append("g").classed("tile", true) | |
.each(function(d) { | |
var g = d3.select(this); | |
d3.json("https://tile.mapzen.com/mapzen/vector/v1/all/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) { | |
if (error) throw error; | |
//console.log("data", json) | |
g.selectAll("path") | |
.data(json.roads.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; })) | |
.enter().append("path") | |
.attr("class", function(d) { return d.properties.kind; }) | |
.attr("d", path); | |
}); | |
}); | |
</script> |