マップボックスのポップアップのポインタ/インジケータ

Question

マップボックスのGL JSを使用してマップボックスで表示されるマップのポップアップをスタイリングしています。しかし、私は自動的にポップアップに割り当てられているクラスに関するドキュメントで見つけることができません。これまでのところ、私のCSSは次のようになります。

.mapboxgl-Popup-content { 
    color: #F3F3DD; 
    background-color: #91785D; 
    border-color: #91785D; 
    max-width: 250px; 
    box-shadow: 3px 3px 2px #8B5D33; 
    font-family: 'Oswald'; 
} 

は、これは、これらのかわいいボックスが得られます。

私の問題は、マーカーを指す一番下にある白い三角形です。色を変えたい。

これを修正するために、いくつかのCSSクラスを試しました。 .mapboxgl-popup、.mapboxgl-popup-anchor、.mapboxgl-popup-pointerなどを含むが、これに限定されるものではない。変更するためにどのCSSクラスを使用すべきかを知るためには、この厄介な三角形の色。

Answer 1

必要なものは次のとおりです。チップが位置を変えることができるので、1つのクラスだけではありません：

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { 
    border-bottom-color: #fff; 
    } 
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, 
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { 
    border-top-color: #fff; 
    } 
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { 
    border-right-color: #fff; 
    } 
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { 
    border-left-color: #fff; 
    } 

Answer 2

更新する必要があるCSSクラスは「.mapboxgl-popup-tip」です。あなたのCSSファイルにそのようなクラスがない場合は、それを作成し、 "border-top-color:"属性に色を付けてください。