cb37の日記

地理情報系大学院生

Mapbox で街路灯のヒートマップを作る

概要

自分は基本的に地図ライブラリに JavaScript の Leaflet か，それの Python バージョンの folium を使っています．簡単な描画であればこれが最適だと思いますが，もっと複雑なものを描画したい，大容量のデータを描画したいとなった時，これでは限界があります．そこで Mapbox を使ってみようと思います． Mapbox のすごさが分かるのはこちら．

練習用なので何でもよかったんですが，街路灯のヒートマップを作ろうと思います．街路灯データはこちら

実装

csv から geojson への変換

今回は簡単のために pbf ではなく， geojson を使います．上記で提供されているデータは csv 形式なのでこれをまず geojson に変換します．geojson への変換は次のツールを使います．日本語が対応していないっぽいですが今回は点だけ使うので文字化けは一旦無視します．

GitHub - mapbox/csv2geojson: magically convert csv files to geojson files

完成

参考はヒートマップレイヤーの作成 | Mapbox GL JS | ドキュメント | Mapbox （というかほぼ同じ） Mapbox は API キーが必要ですがログインしておけば勝手に入れてくれているのでそのままコピー&ペーストで試せます．データソースを先ほど変換した geojson にし，初期のズームレベルや位置等を変更して出来上がりです．点の描画とヒートマップの堺がうまくいっていませんが今回はこれで良しとします．

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ヒートマップレイヤーの作成</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
   mapboxgl.accessToken = 'APIkey';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [139.6792, 35.7601],
        zoom: 12
    });


    map.on('load', () => {
        // Add a geojson point source.
        // Heatmap layers also work with a vector tile source.
        map.addSource('nighlight', {
            'type': 'geojson',
            'data': 'geo.geojson'
        });

        map.addLayer(
            {
                'id': 'nighlight-heat',
                'type': 'heatmap',
                'source': 'nighlight',
                'maxzoom': 14,
                'paint': {
                    // Increase the heatmap weight based on frequency and property magnitude
                    'heatmap-weight': [
                        'interpolate',
                        ['linear'],
                        ['get', 'mag'],
                        0,
                        0,
                        6,
                        1
                    ],
                    // Increase the heatmap color weight weight by zoom level
                    // heatmap-intensity is a multiplier on top of heatmap-weight
                    'heatmap-intensity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        0,
                        1,
                        14,
                        3
                    ],
                    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                    // Begin color ramp at 0-stop with a 0-transparancy color
                    // to create a blur-like effect.
                    'heatmap-color': [
                        'interpolate',
                        ['linear'],
                        ['heatmap-density'],
                        0,
                        'rgba(33,102,172,0)',
                        0.2,
                        'rgb(103,169,207)',
                        0.4,
                        'rgb(209,229,240)',
                        0.6,
                        'rgb(253,219,199)',
                        0.8,
                        'rgb(239,138,98)',
                        1,
                        'rgb(178,24,43)'
                    ],
                    // Adjust the heatmap radius by zoom level
                    'heatmap-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        0,
                        2,
                        14,
                        20
                    ],
                    // Transition from heatmap to circle layer by zoom level
                    'heatmap-opacity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        12,
                        1,
                        14,
                        0
                    ]
                }
            },
            'waterway-label'
        );

        map.addLayer(
            {
                'id': 'nighlight-point',
                'type': 'circle',
                'source': 'nighlight',
                'minzoom': 12,
                'paint': {
                    // Size circle radius by earthquake magnitude and zoom level
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        12,
                        ['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
                        16,
                        ['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50]
                    ],
                    // Color circle by earthquake magnitude
                    'circle-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'mag'],
                        1,
                        'rgba(33,102,172,0)',
                        2,
                        'rgb(103,169,207)',
                        3,
                        'rgb(209,229,240)',
                        4,
                        'rgb(253,219,199)',
                        5,
                        'rgb(239,138,98)',
                        6,
                        'rgb(178,24,43)'
                    ],
                    'circle-stroke-color': 'white',
                    'circle-stroke-width': 1,
                    // Transition from heatmap to circle layer by zoom level
                    'circle-opacity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        12,
                        0,
                        13,
                        1
                    ]
                }
            },
            'waterway-label'
        );
    });
</script>

</body>
</html>