Published
Edited
Sep 6, 2020
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function geojson([x, y, z], layer, filter = () => true) {
if (!layer) return;
const features = [];
for (let i = 0; i < layer.length; ++i) {
const f = layer.feature(i).toGeoJSON(x, y, z);
if (filter.call(null, f, i, features)) features.push(f);
}
return { type: "FeatureCollection", features };
}
Insert cell
function filter({ features }, test) {
return { type: "FeatureCollection", features: features.filter(test) };
}
Insert cell
/*function render(svg) {
tiles.map(d => {
drawForest(svg, d);
drawWaterArea(svg, d);
drawBuildings(svg, d);
drawRoads(svg, d);
});
}*/
Insert cell
function render(svg) {
parsedStyle.layers.map((layer, index) => {
tiles.map(tile => {
switch (layer.type) {
case "background":
drawBackground(svg, layer);
break;
case "fill":
// if (layer.source === "local") drawFill(svg, tile, layer, styleDoc.layers[index]);
break;
case "line":
if (layer.source === "local") drawLine(svg, tile, layer, styleDoc.layers[index]);
break;
}
});
});
}
Insert cell
styleFilter(
geojson(tiles[0], tiles[0].layers[styleDoc.layers[7]["source-layer"]]).features[0],
styleDoc.layers[7]
)
Insert cell
function styleFilter(geoJson, layerStyle) {
console.log(geoJson);
layerStyle.filter.map(item => {
// console.log(item);
});
return true;
}
Insert cell
function drawBackground(svgNode, layer) {
svgNode
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr('fill', layer.paint["background-color"]())
.attr('fill-opacity', layer.paint["background-opacity"]());
}
Insert cell
Insert cell
function drawLine(svgNode, tile, layer, style) {
// console.log(layer["source-layer"], layer.paint["fill-outline-color"]());
if (tile.layers.hasOwnProperty(layer["source-layer"])) {
const g = svgNode.append("g");
g.append('path')
.datum(
filter(
geojson(
[tile[0], tile[1], tile[2]],
tile.layers[layer["source-layer"]]
),
l => {
if (style.filter) {
console.log(style.filter);
}
return true;
//return l.properties.subclass.match(/^(forest|wood|scrub)$/);
}
)
)
.attr('d', d3.geoPath().projection(projection))
.attr('fill', 'none')
.attr('stroke', layer.paint["line-color"]())
.attr('stroke-width', layer.paint["line-width"]());
}
}
Insert cell
function drawForest(svg, d) {
const g = svg.append("g");
g.append('path')
.datum(
filter(geojson(d, d.layers.landcover), p =>
p.properties.subclass.match(/^(forest|wood|scrub)$/)
)
)
.attr('d', d3.geoPath().projection(projection))
.attr('fill', 'rgba(176, 208, 144, 1)')
.attr('stroke', 'none');
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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