MapLibre GL JS #010 - ポリゴン表示

ポリゴンを表示するメモ。

script.js

// MapTiler読み込み
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=[APIキー]',
    center: [139.767, 35.681],
    zoom: 11,
});

map.on('load', function () {
    // ポリゴン設定
    map.addSource('polygon_sample', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'geometry': {
                'type': 'Polygon',
                'coordinates': [[
                    [139.76617813110352,35.675949251235025],
                    [139.77188587188718,35.67410157813001],
                    [139.77227210998535,35.67455478492641],
                    [139.77862358093262,35.683757812281115],
                    [139.77343082427979,35.68431553740134],
                    [139.77094173431396,35.68469897115985],
                    [139.76871013641357,35.679923346539084],
                    [139.76617813110352,35.675949251235025]
                ]]
            }
        }
    });
    // スタイル設定
    map.addLayer({
        'id': 'polygon_sample',
        'type': 'fill',
        'source': 'polygon_sample',
        'layout': {},
        'paint': {
            'fill-color': '#E92D63',
            'fill-opacity': 0.7
        }
    });
});

// コントロール関係表示
map.addControl(new maplibregl.NavigationControl());

MapLibre GL JSを手軽に始めるビルド環境公開しています。
maplibregljs-starter

• 参考文献
  MapLibre GL JS