30:[] 2e:{"title":"D3 Vector Tiles (WIP)","cells":[{"id":0,"value":"md`# D3 Vector Tiles (WIP)\n\n(Building on Mike's work at https://beta.observablehq.com/@mbostock/d3-mapbox-vector-tiles and https://beta.observablehq.com/@mbostock/d3-vector-tiles .)\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) [Mapbox vector tiles](/@mbostock/mapbox-vector-tiles). The vector tiles are provided by [Nextzen](https://www.nextzen.org/) and require an API key, which is tied to the notebook's origin (in this case, \\`https://fil.static.observableusercontent.com\\`).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"apikey = \"7b1mrgvcThKgwl1ZslAhKQ\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"center = [-122.4183, 37.7750] // [0.963, 47.811] //","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`Zoom level: ${z}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`Should we resample the planar coordinates? (see https://github.com/d3/d3-geo-projection/issues/108 and https://github.com/d3/d3-geo-projection/issues/75)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof res = md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof z = md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features ? features.filter(test) : []};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"// https://mapzen.com/documentation/vector-tiles/layers/#water\nis_water_line = (d) => d.properties.boundary || [\"canal\", \"ditch\", \"drain\", \"river\", \"stream\"].indexOf(d.properties.kind) > -1","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoMercator()\n //.precision(0) // no spherical interpolation\n .center(center)\n .scale((1 << z) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"tiles = Promise.all(tile().map(async d => {\n d.layers = new VectorTile(new Protobuf(\n await d3.buffer(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.mvt?api_key=${apikey}`)\n .catch(_ => ({})) \n )).layers; // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"function geojson({x, y, z}, layer) {\n if (!layer) return;\n const features = new Array(layer.length);\n for (let i = 0; i < layer.length; ++i) features[i] = layer.feature(i).toGeoJSON(x, y, z);\n var t = ({type: \"FeatureCollection\", features});\n if (res) {\n t = resample(t);\n //t.features = t.features.map(fixMultiPolygon);\n }\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"function fixMultiPolygon(g) {\n if (g.geometry) g.geometry = fixMultiPolygon(g.geometry);\n if (g.type == \"MultiPolygon\") g.coordinates = d3.merge(g.coordinates), g.type = \"Polygon\";\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"geojson(tiles[0], tiles[0].layers.water, false).features[0].geometry.coordinates[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"geojson(tiles[0], tiles[0].layers.water, true).features[0].geometry.coordinates[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"rendering = d3.geoOrthographic()\n .rotate(center.map(d => -d))\n .fitSize([width, height], {type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(rendering)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"VectorTile = (await require(\"https://bundle.run/@mapbox/vector-tile@1.3.1\")).VectorTile","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"Protobuf = require(\"pbf@3.1.0/dist/pbf.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-array@1\", \"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"import { resample } from \"@fil/wgs84-resampling\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"//import { resample } from \"@fil/wgs84resample\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}