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}`)
.then(response => response.json())
.then(data => {
earth.setAttribute("d", path(data.earth));
waterBodies.setAttribute("d", path({
type: "FeatureCollection",
features: data.water.features.filter(d => d.geometry.type !='LineString')
}));
waterLines.setAttribute("d", path({
type: "FeatureCollection",
features: data.water.features.filter(d => d.geometry.type =='LineString')
}));
waterBorders.setAttribute("d", path({
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>`