| 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
forked from enjalot's block: Vector Tiles: Gooey Tallahassee
forked from enjalot's block: Vector Tiles: Gooey East Bay
| 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: #072e31; | |
| stroke-opacity: 0.4; | |
| stroke-width: 2; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .major_road { | |
| /*stroke: #4fa242; fill: #7aea90; */ | |
| stroke-width: 2; | |
| } | |
| .minor_road { | |
| /*stroke: #4fa242; fill: #7aea90; */ | |
| stroke-width: 2; | |
| } | |
| /* | |
| .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.2183, 37.830]) | |
| .center([-118.3614976, 34.0937458]) | |
| //.scale((1 << 21) / 2 / Math.PI) | |
| .scale((1 << 20) / 2 / Math.PI + 15000) | |
| .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 17 -4'); | |
| 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> |
