UN Smart Maps Lead. We keep web maps open for a better world.
pane = {
const MAX_RADIUS = 1000
const container = yield html`<div style="height:800px;">`
const style_url = 'https://tile.openstreetmap.jp/styles/maptiler-toner-en/style.json'
let style = await fetch(style_url).then((resp) => resp.json())
style.sources['event'] = {
type: 'vector',
//url: 'pmtiles://https://cloudflare-ipfs.com/ipfs/Qmeguu9vsViuKh5m4rc1zhCsYuzwjMxEwa7YYRvKrgGQ5C',
url: 'pmtiles://https://cloudflare-ipfs.com/ipfs/QmV33dC8kFHNdoncsSeoEKGR6otSJtNSKqYk9GGyj3t4qZ',
attribution: 'UCDP GED Global version 23.1'
}
style.layers[style.layers.findIndex(layer => {return layer.id == 'water'})]['paint']['fill-color'] = '#ddd'
for (let id of ['boundary_state', 'boundary_country_z5-', 'boundary_country_z0-4']) {
style.layers[style.layers.findIndex(layer => {return layer.id == id})]['paint']['line-color'] = '#ddd'
}
style.layers.splice(
style.layers.findIndex(layer => {return layer.id == 'place_label_continent'}),
0,
{
id: 'event',
source: 'event',
'source-layer': 'event',
type: 'circle',
maxzoom: 22,
paint: {
'circle-radius': [
'interpolate',
['exponential', 2],
['zoom'],
2, 2,
14, ['min', MAX_RADIUS, ['get', 'best']]
],
'circle-color': '#418fde',
'circle-opacity': 0.9
},
layout: {
}
}
)
style.layers.splice(
style.layers.findIndex(layer => {return layer.id == 'place_label_continent'}),
0,
{
id: "event-anno",
minzoom: 8,
type: "symbol",
source: "event",
"source-layer": "event",
layout: {
"text-field": [
"step",
["zoom"],
[
"concat",
["get", "year"]
],
10.1,
[
"concat",
["get", "year"],
":",
["get", "dyad_name"],
"(",
["get", "best"],
")"
],
13,
[
"concat",
["get", "year"],
":",
["get", "dyad_name"],
"(",
["get", "best"],
")-",
["get", "source_article"]
]
],
"text-font": ["Noto Sans Bold"],
"text-allow-overlap": false,
"text-size": [
"interpolate",
["exponential", 2],
["zoom"],
6, 8,
11, 16
]
},
paint: {
"text-color": "#418fde",
"text-halo-color": "white",
"text-halo-width": 1
}
}
)
const map = (container.value = new maplibregl.Map({
container,
center: [56.6, 27.8], // 2.81/27.75/56.6
zoom: 3,
style: style,
}));
map.addControl(new maplibregl.FullscreenControl())
}
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.
