Published
Edited
May 10, 2021
md`# mapbox 2,700,000 points`
md `ヒートマップからポイントに変わるように全てのデータを表示しながら素早くに地図を動ける。色んなズームをしてみてください。`
{
let container = html`<div style='height:500px;' />`;
yield container;
mapboxgl.accessToken = 'pk.eyJ1IjoiYmlza3dpa21hbiIsImEiOiJjaWxidzVlcGQxcmtxdWJrbjQ2Zng3bWN5In0.KcfLaovMGcEZkl6cyU6_Hw';
let map = new mapboxgl.Map({
container,
style: 'mapbox://styles/biskwikman/ckmn5bcqn0v1i17mra2n1b7r9/draft',
center: [138.3827,34.9756],
zoom: 11, // starting zoom
});
map.on('load', function () {
map.addSource('shizuoka-data', {
type: 'vector',
url: 'mapbox://biskwikman.c1z1zjhw'
});
map.addLayer({
'id': 'shizuoka-point-data',
'type': 'circle',
'source': 'shizuoka-data',
'source-layer': '20210506_GPS_raw_静岡県_20190101_20191231',
'minzoom': 11,
'paint': {
'circle-color': 'purple',
'circle-radius': 3,
'circle-opacity': 0.4
}
});
map.addLayer({
'id': 'shizuoka-heatmap',
'type': 'heatmap',
'source': 'shizuoka-data',
'source-layer': '20210506_GPS_raw_静岡県_20190101_20191231',
'minzoom': 0,
'maxzoom': 15,
'paint': {
'heatmap-opacity': {
'stops': [
[13, 0.8],
[15, 0.1]
]
},
'heatmap-radius': {
'stops': [
[0, 15],
[15, 11]
]
},
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(236,222,239,0)',
0.2,
'rgb(208,209,230)',
0.4,
'rgb(166,189,219)',
0.6,
'rgb(103,169,207)',
0.8,
'rgb(28,144,153)'
],
}
});
map.addLayer({
'id': 'sky',
'type': 'sky',
'paint': {
// set up the sky layer to use a color gradient
'sky-type': 'gradient',
// the sky will be lightest in the center and get darker moving radially outward
// this simulates the look of the sun just below the horizon
'sky-gradient': [
'interpolate',
['linear'],
['sky-radial-progress'],
0.8,
'rgba(135, 206, 235, 1.0)',
1,
'rgba(0,0,0,0.1)'
],
'sky-gradient-center': [0, 0],
'sky-gradient-radius': 90,
'sky-opacity': [
'interpolate',
['exponential', 0.1],
['zoom'],
5,
0,
22,
1
]
}
});
});
invalidation.then(() => map.remove());
}
mapboxgl = {
const gl = await require("mapbox-gl@2.0.0");
if (!gl.accessToken) {
// token allowed only for @sw1227
gl.accessToken = "pk.eyJ1Ijoic3cxMjI3IiwiYSI6ImNqeTFiYXF5cTA2ajYzaHE4cmEycnRteTkifQ.FR2JtUicCVzbH7xszfObEA";
const href = await require.resolve("mapbox-gl@2.0.0/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
