ポップアップもマーカーと同様に、HTMLとCSSで見た目を柔軟にカスタマイズすることができます。
var rosen;
function init() {
// 路線図初期化
rosen = new Rosen('map', {
apiKey: "2jr5nchcswemrfjj67jvjaqu", // アクセスキーはサンプル用です。実際にご利用されるときは書き換えてください。
center: [61335, 49824, 17],
zoom: 16,
});
// 東京
var tokyo = 22828;
var tokyo_popup = Rosen.htmlPopup({
closeButton: false, // ☓ボタン非表示
className: "popup_tokyo", // ポップアップにつけるCSSクラス名
}).setHTML('<h3>CSSで背景をピンクにしています。</h3><p>下のまちなみくんのポップアップをクリックしてみてください。</p>');
rosen.setStationPopup(tokyo, tokyo_popup, false);
// 日の出
var hinode = 29052;
var hinode_popup = Rosen.htmlPopup({
closeButton: false,
className: "popup_hinode",
offset: [-20, 140] // オフセット。ピクセル単位
}).setHTML('<img width="240" height="240" src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1068284/LINEStorePC/main.png?__=20150924"></img>');
// ↑width, heightを指定しないと親divからはみ出してしまう
rosen.setSectionPopup(7180210, hinode_popup, true);
$('body').on('click', '.popup_hinode .leaflet-popup-content', function() {
alert("こんにちは、ぼくまちなみくん");
});
};
window.addEventListener('load', init);
.popup_tokyo .leaflet-popup-content-wrapper { background: pink; }
.popup_tokyo .leaflet-popup-tip { background: pink; }
.popup_hinode .leaflet-popup-content-wrapper { opacity: 1; border-radius: 0; box-shadow: none; padding: 0; background: none; }
.popup_hinode .leaflet-popup-tip { opacity: 0; }
.popup_hinode .leaflet-popup-content { opacity: 1; margin: 0; cursor: pointer; }