Published
Edited
Oct 5, 2020
Insert cell
Insert cell
map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">${tile().map(([x, y, z]) => {
const earth = svg`<path class="earth" fill="#CCCCCCFF" stroke="none" stroke-width=".5">`;
const landuse = svg`<path class="landuse" fill="#A7B898" stroke="none" stroke-width=".5">`;
const waterBodies= svg`<path class="waterBodies" fill="#D2DEF2FF" stroke="#0F0" stroke-width="2">`;
const waterLines = svg`<path class="waterLines" fill="none" stroke="#00F" stroke-width="1">`;
const waterBorders=svg`<path class="waterBorders" fill="none" stroke="#F00" stroke-width="1">`;
const roads = svg`<path class="roads" fill="none" stroke="#B66" stroke-width=".5">`;
const buildings = svg`<path class="buildings" fill="#666666">`;
fetch(`https://tile.nextzen.org/tilezen/vector/v1/512/all/${z}/${x}/${y}.json?api_key=${key}`)
//fetch(`https://tile.thunderforest.com/thunderforest.outdoors-v2/${z}/${x}/${y}.vector.pbf?apikey=67ec34f09c33464b9585dc9c9be0326a`)
.then(response => response.json())
.then(data => {
earth.setAttribute("d", path(data.earth));
waterBodies.setAttribute("d", path({ // green
type: "FeatureCollection",
features: data.water.features.filter(d => d.geometry.type !='LineString')
}));
waterLines.setAttribute("d", path({ // blue
type: "FeatureCollection",
features: data.water.features.filter(d => d.geometry.type =='LineString')
}));
waterBorders.setAttribute("d", path({ // red
type: "FeatureCollection",
features: data.water.features.filter(d => d.properties.boundary)
}));
roads.setAttribute("d", path(data.roads));
landuse.setAttribute("d", path(data.landuse));
buildings.setAttribute("d", path(data.buildings));
});
return svg`${landuse}${waterBodies}${waterLines}${roads}${buildings}`;
})}</svg>`
Insert cell
projection = d3.geoMercator()
.center([-122.4183, 37.7750]) // San Francisco, CA, USA
//.center([107.04411, 13.86445]) // Village 1
//.center([107.10675, 13.77522]) // Village 2
//.center([107.03090, 13.48652]) // Village 3
//.center([106.98460, 13.73730]) // Balung
.scale(Math.pow(2, 21) / (2 * Math.PI))
.translate([width * 0.60, height * 0.15])
Insert cell
tile = d3.tile()
.tileSize(512)
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.zoomDelta(2)
Insert cell
key = "zbhLxPNbSN-PxzJ9FWKtcA" // Sign up for an API key: https://www.nextzen.org
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 954
Insert cell
height = Math.round(width * 2)
Insert cell
d3 = require("d3-geo@1", "d3-tile@1")
Insert cell

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.
Learn more