Mapbox GL JS #019 – マーカーとポップアップを表示2

マーカーとポップアップを表示するメモ。

「Mapbox GL JS #013 – マーカーとポップアップを表示」で紹介したのとは別の方法です。

style.css

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

/*マーカー設定*/
.marker {
    background-image: url('../img/marker-icon.png');
    background-size: cover;
    width: 32px;
    height: 52px;
}

script.js

// MIERUNE MONO読み込み
var map = new mapboxgl.Map({
    container: "map",
    style: {
        version: 8,
        sources: {
            m_mono: {
                type: "raster",
                tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
                tileSize: 256
            }
        },
        layers: [{
            id: "m_mono",
            type: "raster",
            source: "m_mono",
            minzoom: 0,
            maxzoom: 18
        }]
    },
    center: [139.767, 35.681],
    zoom: 13
});

map.on("load", function () {

    // ポップアップ設定
    var popup = new mapboxgl.Popup({
        offset: 50,
        anchor: "bottom"
    })
        .setText("サンプル!!");

    // マーカー追加
    var el = document.createElement("div");
    el.className = "marker";
    var addmarker = new mapboxgl.Marker(el, {
        anchor: "bottom"
    })
        .setLngLat([139.767, 35.681])
        .setPopup(popup)
        .addTo(map);

});

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

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

• 参考文献
  Mapbox GL JS