⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
TEMP_TOKEN = "pk.eyJ1Ijoic2VsZW5lY29kZXMiLCJhIjoiY2t2aDdteThhM3RwdTJxb2syZjZqbjd0dCJ9.BtnrFEPsWw_qShFqR8DY3w"
viewof mapContainer = {
const featureIDs = new Set();
const geoJson = {
type: "FeatureCollection",
features: []
};
// const container = html`<div style='height:${width}px;border-radius:50%' />`;
const container = html`<div style='height:${width}px;' />`;
yield container;
const attribution =
wfsConfig.name == "BAG" ? "PDOK.nl" : "© 3D BAG by tudelft3d";
const map = new mapboxgl.Map({
container,
center: [5.38774, 52.155499],
zoom: 7,
style: "mapbox://styles/selenecodes/ckvgs50no1yw214pkrjm4dy05",
attributionControl: false
}).addControl(
new mapboxgl.AttributionControl({
customAttribution: attribution
})
);
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);
map.on("load", () => {
map.addSource("buildings", {
attribution: attribution,
type: "geojson",
data: geoJson
});
map.addLayer({
id: "buildings",
type: "fill",
source: "buildings", // reference the data source
layout: {},
paint: {
"fill-color": generateMapboxColorSwatch()
}
});
});
map.on("moveend", () => handleMapDrag(map, geoJson, featureIDs));
map.on("mousemove", (e) => handleMouseMove(e, container, featureIDs));
}
height = 700
buildingAge = ({
startYear: 1400,
endYear: new Date().getFullYear()
})
projection = ({
name: "EPSG:28992",
string:
"+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs"
})
centuries = getCentury(buildingAge.endYear) -
getCentury(buildingAge.startYear) +
1
// BAG = {
// const rootUrl = "https://geodata.nationaalgeoregister.nl/bag/wfs/v1_1";
// const defaultParameters = {
// service: "WFS",
// version: "2.0.0",
// request: "GetFeature",
// typeName: "acme:pand",
// outputFormat: "application/json",
// srsName: "EPSG:28992",
// bbox: `153112,472050,153942,472990`
// };
// const parameters = L.Util.extend(defaultParameters);
// const URL = rootUrl + L.Util.getParamString(parameters);
// const response = await fetch(URL);
// const body = await response.json();
// yield body;
// }
// threeDimensionalBAG = {
// const rootUrl = "https://data.3dbag.nl/api/BAG3D_v2/wfs";
// const defaultParameters = {
// service: "WFS",
// version: "2.0.0",
// request: "GetFeature",
// typeName: "bag3d_v2:lod22",
// outputFormat: "application/json",
// srsName: "EPSG:4326",
// bbox: `153112,472050,153942,472990`
// };
// const parameters = new URLSearchParams(defaultParameters).toString();
// const URL = `${rootUrl}?${parameters}`;
// const response = await fetch(URL);
// const body = await response.json();
// yield body;
// }
async function handleMapDrag(map, geoJson, featureIDs) {
const bounds = map.getBounds();
const features = await featuresWithinBounds(bounds, wfsConfig);
if (features) {
geoJson.features.push(...existingFeatureFilter(features, featureIDs));
}
if (map.getSource("buildings")) {
map.getSource("buildings").setData(geoJson);
}
}
function existingFeatureFilter(features, featureIDs) {
return features.filter((feature) => {
const featureID = feature.properties.gid;
const knownFeature = featureIDs.has(featureID);
if (!knownFeature) {
featureIDs.add(featureID);
}
// Only return new features
return !knownFeature;
});
}
async function wfsRequest(bounds) {
const rootUrl = wfsConfig.url;
const bbox =
wfsConfig.name == "BAG"
? `${bounds.northEast.join(",")},${bounds.southWest.join(",")}`
: `${bounds.southWest.join(",")},${bounds.northEast.join(",")}`;
const defaultParameters = {
...wfsConfig.params,
bbox: bbox
};
const parameters = new URLSearchParams(defaultParameters).toString();
const URL = `${rootUrl}?${parameters}`;
const response = await fetch(URL);
const body = await response.json();
return reproject.reproject(body, "EPSG:28992", "EPSG:4326", {
"EPSG:28992": proj4.defs("EPSG:28992"),
"EPSG:4326": proj4.defs("EPSG:4326")
});
}
function handleMouseMove(mouseMoveEvent, container, featureIDs) {
container.value = {
location: mouseMoveEvent.lngLat,
uniqueFeatureCount: featureIDs.size
};
container.dispatchEvent(new CustomEvent("input"));
}
function getCentury(year) {
return Math.ceil(year / 100);
}
function getRangePercentage(value, min, max) {
return (value - min) / (max - min);
}
function swatches(colors) {
return html`${colors.map(
(c) => `<div title="${c}" style="
display: inline-block;
margin-right: 3px;
width: 33px;
height: 33px;
background: ${c};
"></div>`
)}`;
}
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken = mapBoxApiKey;
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
MapboxGeocoder = {
const geocoder = require("https://bundle.run/@mapbox/mapbox-gl-geocoder@4.7.4");
const href = await require.resolve(
"@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css"
);
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return geocoder;
}
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.
