{
let container = html`<div style='height:450px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
center: [130.7393, 32.2118],
zoom: 13,
pitch: 60,
bearing: -60,
style: {
'version': 8,
'sources': {
'base': {
'type': 'raster',
'tiles': [
'https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png'
],
'tileSize': 256,
'attribution': '地理院タイル'
},
'flood': {
'type': 'raster',
'tiles': [
// 令和2年7月豪雨 浸水推定図 球磨川水系球磨川 人吉市周辺（2020年7月4日13時作成）
'https://cyberjapandata.gsi.go.jp/xyz/20200703oame_kumagawahitoyoshi_0704dansaizu/{z}/{x}/{y}.png'
],
'tileSize': 256,
'attribution': "地理院タイル"
}
},
'layers': [
{
'id': 'base-tiles',
'type': 'raster',
'source': 'base',
'minzoom': 1,
'maxzoom': 18
},
{
'id': 'flood-tiles',
'type': 'raster',
'source': 'flood',
'minzoom': 1,
'maxzoom': 18,
'paint': {
'raster-opacity': 0.8
}
}
]
},
scrollZoom: true
});
map.addControl(new mapboxgl.NavigationControl(), "top-right");
map.on('load', function () {
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
'tileSize': 512,
'maxzoom': 13
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
});
invalidation.then(() => map.remove());
}
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.
