Attribution ShadowDOM

[naogify]

Attribution Controlが外部のCSSの影響を受けてしまうので、 Attribution Controlのみを ShadowDOMとして追加しました。

最新版の Maplibre GL JS ではスマホで地図を表示した時、デフォルトでアトリビューションがオープンになるように変更があったので、それに併せて CSS を追加しました。

サンプル
https://codepen.io/naogify/pen/RwyMMrp

アトリビューションの open がデフォルトになった理由

ドラフトとして提出されている 新しい OSM の著作権ガイドラインに、ユーザーの操作なしに著作権表示をする項目が盛り込まれため、スマホ時のアトリビューションがデフォルトがオープンにする変更が加えられたとの事でした。

You may use a mechanism to fade/collapse the attribution under certain conditions:

・immediately with a dismiss interaction, for example clicking an 'x' in the corner of a dialog
・automatically on map interaction such as panning, clicking, or zooming
・automatically after five seconds. This also applies to splash screens or pop-ups.

https://wiki.osmfoundation.org/wiki/Licence/Attribution_Guidelines#Interactive_maps:~:text=You%20may%20use,or%20pop%2Dups

Issue
maplibre/maplibre-gl-js#205
PR
maplibre/maplibre-gl-js#795

[naogify]

@keichan34
地図を動かした時にアトリビューションを閉じる CSS も追加されていました、、。こちらレビューを少し待って頂ければと!

[naogify]

@keichan34
こちらの CSS の件、修正しました!

[naogify]

@keichan34
こちら © で改行しないように、css を追加しました。確認お願いします!

プレビュー
https://deploy-preview-306--geolonia-embed.netlify.app/debug.html

[keichan34]

細かい修正ですがよろしくお願いします。
あと、テスト用のファイルを削除お願いします。(debug.html, style-long-attrb.json）

[keichan34]

maplibreから抽出したutilを別ファイルに分けましょう。maplibre-util.js とかかな。
もし将来このライブラリをTSに移行したら、簡単に元ソースを参照して使えるようにしたい

[keichan34]

ここでは .mapbox-* 系の互換性のためのセレクタは不要です（shadow DOM内では完全にコントロールされているという環境なので、他のユーザーがこの中に何かしら入れたりすることはないし、外から触れることも無いので）

[keichan34]

あ、ごめんなさい。©とその後の文言が改行しないようにCSSを指定したところをみせてもらってもいいですか？（なんか差分に埋もれてしまったような気がします。。。）（そして、debug.htmlのサンプルだとリンクになっていないので本番環境とは若干違うと思います。。

[naogify]

@keichan34
ありがとうございます! 上で指定して頂いた点を修正しました。 （後で、debug.html , style-long-attrb.json は削除します）
https://deploy-preview-306--geolonia-embed.netlify.app/debug.html

あ、ごめんなさい。©とその後の文言が改行しないようにCSSを指定したところをみせてもらってもいいですか？

こちらの件ですが下のように指定しています。（overflow-wrap: nowrap を指定したのですが、©️の直後に改行されてしまったので、 *1 word-break を使用しました。）

embed/src/lib/CustomAttributionControl.js

Line 174 in e692a52

word-break: break-all;

[keichan34]

なるほど。すごい細かいのですが、その実装だとこういうことが起こりうるんですね。この場合は「OpenStreetMap」などの一つの文言は分けたくないなと思って、 break-all が不適切かなと思います。

変わりに、それぞれのattributionを別のspanに入れて、そのspan自体がブレークしないようにできないかな。display: inline-block とか？

[naogify]

@keichan34

の場合は「OpenStreetMap」などの一つの文言は分けたくないなと思って

これは確かにですね、、、。

下のように指定し直しました。どうでしょうか？
https://github.com/geolonia/embed/blob/attribution-shadowdom/src/lib/CustomAttributionControl.js#L162

[keichan34]

なるほど。これでいいですね。ありがとうございました！

[keichan34]

ありがとうございます！

[keichan34]

おっと、アプルーブするの忘れた。ありがとうございました！