map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">${tiles.map(d =>
!d.layers ? '' : svg`
<path fill="brown" stroke="brown" d="${path(geojson(d, d.layers.earth))}"></path>
<path fill="green" stroke="green" stroke-width="2" d="${path(geojson(d, d.layers.landuse))}"></path>
<path fill="blue" stroke="orange" d="${path(filter(geojson(d, d.layers.water), d => !is_water_line(d)))}"></path>
<path fill="none" stroke="lightblue" stroke-width=2 d="${path(filter(geojson(d, d.layers.water), is_water_line))}"></path>
<path fill="none" stroke="#000" stroke-width="1" d="${path(geojson(d, d.layers.roads))}"></path>
<path fill="red" stroke="red" d="${path(geojson(d, d.layers.buildings))}"></path>
<path fill="yellow" d="${path(geojson(d, d.layers.places))}"></path>
`
)}
</svg>`
// https://mapzen.com/documentation/vector-tiles/layers/#water
is_water_line = (d) => d.properties.boundary || ["canal", "ditch", "drain", "river", "stream"].indexOf(d.properties.kind) > -1
projection = d3.geoMercator()
//.precision(0) // no spherical interpolation
.center(center)
.scale((1 << z) / (2 * Math.PI))
.translate([width / 2, height / 2])
tiles = Promise.all(tile().map(async d => {
d.layers = new VectorTile(new Protobuf(
await d3.buffer(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.mvt?api_key=${apikey}`)
.catch(_ => ({}))
)).layers; // Sign up for an API key: https://www.nextzen.org
return d;
}))
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
function geojson({x, y, z}, layer) {
if (!layer) return;
const features = new Array(layer.length);
for (let i = 0; i < layer.length; ++i) features[i] = layer.feature(i).toGeoJSON(x, y, z);
var t = ({type: "FeatureCollection", features});
if (res) {
t = resample(t);
//t.features = t.features.map(fixMultiPolygon);
}
return t;
}
geojson(tiles[0], tiles[0].layers.water, false).features[0].geometry.coordinates[0]
geojson(tiles[0], tiles[0].layers.water, true).features[0].geometry.coordinates[0]
//import { resample } from "@fil/wgs84resample"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
