mle 0110 - izudon/izudon.github.io GitHub Wiki

0110 Add an icon to the map

この順でやる。

  1. マップのロード
  2. を待って、アイコン画像のロード
  3. を待って、GeoJSON（お猫様の鎮座ましまする経緯度）ソースの追加
  4. レイヤを追加
map.on('load', () => {
    map.loadImage(
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
        (error, image) => {
            // ロードエラー よけ
            map.addImage('cat', image);
            map.addSource('point', {
                'type': 'geojson',
                'data': {
                    //...
                }
            });
            map.addLayer({
                'id': 'points',
                'type': 'symbol',
                'source': 'point',
                'layout': {
                    'icon-image': 'cat',
                    // ...
                }
            });
        }
    );
});