UN Smart Maps Lead. We keep web maps open for a better world.
STYLE = (() => {
C2.sources.pop = {
type: "vector",
minzoom: 7,
maxzoom: 14,
url: "pmtiles://https://cloudflare-ipfs.com/ipfs/QmWSbvv3ZBjMw54XFBmJ1xXkqbBwHk4TjVJNVBPHEyrJ3W",
attribution: "「国土数値情報（500mメッシュ別将来推計人口データ）」（国土交通省）を加工して作成"
}
C2.sources.et10b.tiles = ["https://smb.optgeo.org/et10b/et512/{z}/{x}/{y}.webp"]
const COLOR = [
"interpolate-hcl",
["linear"],
["get", "r"],
0,
["rgb", 64, 64, 64],
1,
["rgb", 34, 58, 112],
100,
["rgb", 0, 255, 0],
300,
["rgb", 255, 255, 0]
]
const OPACITY = [
"interpolate",
["linear"],
["get", "PTN_2015"],
0,
0.0,
100,
1.0
]
C2.layers.splice(
C2.layers.findIndex(layer => {return layer.id == 'wa'}),
0,
{
id: "pg",
maxzoom: 22,
type: "fill",
source: "pop",
"source-layer": "pg",
paint: {
"fill-color": COLOR,
"fill-opacity": OPACITY
}
}
)
C2.layers.splice(
C2.layers.findIndex(layer => {return layer.id == 'wa'}),
0,
{
id: "pt",
maxzoom: 10.3,
type: "circle",
source: "pop",
"source-layer": "pt",
paint: {
"circle-color": COLOR,
"circle-opacity": OPACITY,
"circle-radius": [
"interpolate",
["exponential", 2],
["zoom"],
7, 0.5,
10, 5
]
}
}
)
C2.layers.splice(
C2.layers.findIndex(layer => {return layer.id == 'anno-priority'}),
0,
{
id: "pop-anno",
minzoom: 11.2,
type: "symbol",
source: "pop",
"source-layer": "pt",
layout: {
"text-field": [
"step",
["zoom"],
[
"concat",
["get", "r"],
"%"
],
14.1,
[
"concat",
["get", "r"],
"% (",
["get", "PTN_2015"],
"人→",
["get", "PTN_2050"],
"人)"
]
],
"text-font": ["NotoSansJP-Regular"],
"text-allow-overlap": true,
"text-size": [
"interpolate",
["exponential", 2],
["zoom"],
11, 6,
13, 16
]
},
paint: {
"text-color": "black",
"text-halo-color": "white",
"text-halo-width": 1
}
}
)
return C2
})()
C2 = fetch("https://optgeo.github.io/c2/style.json").then((resp) => resp.json())
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.
