OpenLayersのポップアップの「吹き出しの三角（矢印）」の位置を変更する

2026/4/10 GIS, JavaScript, OpenLayers, プログラミング

はじめに

OpenLayersにol.Overlayクラスを利用して、ポップアップ表示する機能が提供されていますが、ポップアップの「吹き出しの三角（矢印）」位置が左端（中心位置ではない）ので、中心位置に変更してみました。

サンプルでは、cssの「吹き出しの三角（矢印）」位置が固定位置ですが、変更後では、中心位置がポップアップ画面のサイズによって変わるため、javascript側で動的に設定しています。また、.ol-popup:after は「吹き出しの三角（矢印）」を作るための疑似要素ですが、
こちらにも設定されてます

変更前のポップアップイメージ

変更前のcss

.ol-popup {
    left: -50px;
}
.ol-popup:after {
    left: 48px;
}

.ol-popup:before {
    left: 48px;
}

.ol-popup {

left: -50px;

}

.ol-popup:after {

left: 48px;

}

.ol-popup:before {

left: 48px;

}

変更後のcss

疑似要素ですが、javascriptで直接編集できないので、CSS変数に設定します。

.ol-popup {
left: -50px;
--arrow-left: 48px;
}
.ol-popup:after {
    left: var(--arrow-left);
}

.ol-popup:before {
    left: var(--arrow-left);
}

.ol-popup {

left: -50px;

--arrow-left: 48px;

}

.ol-popup:after {

left: var(--arrow-left);

}

.ol-popup:before {

left: var(--arrow-left);

}

変更後のjavascript

    const dialogCenter = this.windowWidth / 2;
    const arrowCenter = dialogCenter - 2;
    $('.ol-popup').css('left', `-${dialogCenter}px`);
    $('.ol-popup').css('--arrow-left', `${arrowCenter}px`);