マーカーをクリックしたときや、任意の位置にポップアップを表示させることができます。
既定の背景色は「白」ですが、css でカスタマイズできます。
こんな見た目にカスタマイズできます
const opt = {
container: 'map',
style: {
version: 8,
sources: {
OSM: {
type: "raster",
tiles: [
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
],
tileSize: 256,
attribution:
"OpenStreetMap",
},
},
layers: [{
id: "BASEMAP",
type: "raster",
source: "OSM",
minzoom: 0,
maxzoom: 18,
}],
},
};
opt.center = [138.73072, 35.36286];
opt.zoom = 13;
const map = new mapboxgl.Map(opt);
map.addControl(new mapboxgl.NavigationControl());
const html = `<H3>富士山</H3>
<span>
富士山（ふじさん、英語: Mount Fuji）は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と、山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。標高3776.12 m、日本最高峰（剣ヶ峰）の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。<a href='https://ja.wikipedia.org/wiki/%E5%AF%8C%E5%A3%AB%E5%B1%B1' target="_blank">Wikipedia より</a>
<span>
`;
// create the popup
const popup = new mapboxgl.Popup({
//anchor: 'bottom',
className: 'my-class',
closeButton: false,
})
.setMaxWidth('400px')
.setHTML(html);
// create the marker
new mapboxgl.Marker()
.setLngLat([138.73072, 35.36286])
.setPopup(popup) // sets a popup on this marker
.addTo(map)
.togglePopup();
body { margin: 0; padding: 0; }
/* $popupBkColor: darkblue; */
.my-class {
color: white;
}
.my-class .mapboxgl-popup-content {
background-color: darkblue;
box-shadow: 6px 6px 6px rgba(1,1,1,.4);
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
align-self: center;
border-bottom: none;
border-top-color: darkblue;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
align-self: center;
border-top: none;
border-bottom-color: darkblue;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
align-self: center;
border-left: none;
border-right-color: darkblue;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
align-self: center;
border-right: none;
border-left-color: darkblue;
}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
align-self: flex-start;
border-top: none;
border-left: none;
border-bottom-color: darkblue;
}
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
align-self: flex-end;
border-top: none;
border-right: none;
border-bottom-color: darkblue;
}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
align-self: flex-end;
border-bottom: none;
border-right: none;
border-top-color: darkblue;
}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
align-self: flex-start;
border-bottom: none;
border-left: none;
border-top-color: darkblue;
}
解説
Popup 生成時のオプションに className: 'my-class' などとして任意のクラス名を割り当てることができます。
が、これは 吹き出し全体(コンテンツ部と矢印＜三角形のつなぎ＞部)を示します。
このクラスの backgroud-color を指定しても期待した結果にはなりません。
既定の吹き出しっぽいデザインを完全に捨てて、オリジナルの吹き出しを配置する場合は使用することになると考えられます。
ポップアップのコンテンツ部は .mapboxgl-popup-content というクラスを上書きすることで背景色などを変更できます。
矢印＜三角形のつなぎ＞部のところはちょっと面倒で、ポップアップが表示される8方向に応じて bottom, left, top, right, top-right, top-left, bottom-right, bottom-left のそれぞれのクラスを上書きする必要があります。
Popup の anchor を指定しない場合は、ポップアップの出現方向が可変になるため、8方向すべての CSS 定義が必要になります（次の図は bottom-right の例）。
anchor を bottom と設定した場合は、ポップアップは上方向にしか表示されず、CSS上書きは bottom だけで大丈夫そうです。
ポップアップの幅は、Popup.setMaxWidth('400px') として拡張できます。高さはコンテンツ次第なようなので、制限する場合は自力で行う必要がありそうです。
ギモン
anchor の CSS セレクタは
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
としていますが、
.my-class .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
こう書きたかったのですよね。でも効いてくれませんでした。
「一つのマーカーのポップアップのみ、背景色を変える」ということができないかな？と考えたのですが・・・。