Leaflet

概要 IIIF (International Image Interoperability Framework) Presentation API v3のマニフェストに含まれるアノテーション座標（xywh形式）を、Leaflet-IIIFを使用したマップビューアー上で正確に表示する方法について解説します。 この問題は一見シンプルに見えますが、Leaflet-IIIFの内部動作を理解しないと正確な座標変換ができません。 問題の背景 IIIFマニフェストのアノテーション形式 IIIF Presentation API v3では、アノテーションの対象領域は以下のようなxywh形式で指定されます： { } " " " " } " i t m b , t d y o o " " " a " p t d t v l r : e i y y a a g " v " p l n e " : a : e u g t h t " e u " t " i { : " a : t A o : g p n n " e " s n " T " " h : : e 雅 : t t x 屯 t / a " t 河 " p e t c u " j s x i o a , a : a o m l " / m n m B / p " e o e l , n d x e t y a . i " m o n , p r g l g " e / , . i o i r i g f / / i c i a i n f v / a c s a / n 1 v / a a s n / n 1 o # t x a y t w i h o = n 4 / 1 1 0 " 1 , 2 , 8 1 , 1 1 5 , 4 9 " このxywh=41012,81,115,49は： ...

概要 nuxt3-leafletで、指定したマーカーを前面に表示する方法に関する備忘録です。 方法 以下のように、LMarkerにz-index-offset属性を用いることで、指定したマーカーを前面に表示することができました。 < t e m / p < t l L / e a M @ : : < < L m t a c l z L / L M p e r l a - T { L I : : : : : s : : / a l k i t i o { T c i i i p t h s s L r a e c - n o o o c c c o o a h h I k t - r k l d l m o n o o o p o d a a c e e f = n e t a l n n n u l o d d o r > o " g x i r t U S A p t w o o n > r s = - p k i r i n A i U w w > = e " o > e p l z c n p r S A " l [ f r > = e h c A l i n m e m f . " = o h n = z c a c a s t m " r o c " e h r t r e i a [ = r h h = o k M k t t r 2 " = o t " r e a e = l k 5 [ " r t [ = r r r " e e , 1 [ = p 4 " k . s r 2 1 " s 1 [ i e l e } . 4 , , [ : , 1 n r a l } i 1 1 / 2 ( t e c ] 4 - 6 / 4 , m m , c o " 1 3 , e 1 a a t n ] 4 s ] 4 r r m e " " ] - m " 1 k k a d " 2 . ] e e r S 8 s " r r k p ] h s ) e o " / " " r t l > . I e l d a n f g = l ] = e " = t @ m 1 a . r 9 k . e 2 r / . d i i d s t ? / i 1 m 0 a 0 g 0 e s : / m 0 a " r k e r - s h a d o w . p n g " まとめ nuxt3-leafletの利用にあたり、参考になりましたら幸いです。 ...

概要 TEI/XMLファイルの可視化にあたり、可視化例とソースコードを公開するリポジトリを作成しました。 https://github.com/nakamura196/tei_visualize_demo 可視化例は以下のページでご確認いただけます。 https://nakamura196.github.io/tei_visualize_demo/ 今回、MarkerClusterを用いたマーカー表示の例を追加しましたので、紹介します。 前提 Leafletを使って、（MarkerClusterを使用せずに、）マーカーの表示ができていることを前提とします。まだの方は、以下の可視化例、およびソースコードを参考にしてください。 可視化例 https://nakamura196.github.io/tei_visualize_demo/01/ ソースコード https://github.com/nakamura196/tei_visualize_demo/blob/main/docs/01/index.html MarkerClusterを使った実装例 可視化例は以下です。 https://nakamura196.github.io/tei_visualize_demo/02/ ソースコードは以下です。 https://github.com/nakamura196/tei_visualize_demo/blob/main/docs/02/index.html 「TEIを用いた『渋沢栄一伝記資料』テキストデータの再構築と活用」のデータを利用しています。 ライブラリの追加 以下を追記します。 < < < l l s i r h i r h c n e r n e r r k l e k l e i = f = f p " = " = t s " s " t h t h s y t y t r l t l t c e p e p = s s s s " h : h : h e / e / t e / e / t t l t l p " e " e s a a : f f / l l / e e l t t e . . a g g f i i l t t e h h t u u . b b g . . i i i t o o h / / u L L b e e . a a i f f o l l / e e L t t e . . a m m f a a l r r e k k t e e . r r m c c a l l r u u k s s e t t r e e c r r l / / u d d s i i t s s e t t r / / / M M d a a i r r s k k t e e / r r l C C e l l a u u f s s l t t e e e t r r . . . m c D a s e r s f k " a e u r l c t l . u c s s t s e " r - s r c . j s " > < / s c r i p t > L.markerClusterGroupの利用 markersを作成して、個々のmarkerをaddLayerメソッドを使って追加します。最後に、mapにaddLayerメソッドを使って、markersを追加します。 ...

概要 以下の記事で、Nuxt 3でLeaflet Marker Clusterを試す方法を紹介しました。今回は、Composition APIを使った書き方に更新したので、その備忘録です。 インストール 以下をインストールします。 n n p p m m i i l - e D a f @ l t e y t p e l s e / a l f e l a e f t l . e m t a r @ k t e y r p c e l s u / s l t e e a r f l @ e v t u . e m - a l r e k a e f r l c e l t u / s v t u e e r - l e a f l e t ソースコード 以下を参考にしてください。 ...

Nuxt 3でLeaflet Marker Clusterを試す機会がありました。実装例は以下です。 https://nuxt3-demo-nine.vercel.app/map-cluster 本実装にあたり、以下のページを参考にさせていただきました。 https://codesandbox.io/s/ns238 ソースコードは以下です。 https://github.com/nakamura196/nuxt3-demo 2023年3月時点においては、POC（Proof of Concept）の段階のようです。参考になりましたら幸いです。

LeafletのVue3での使用例（座標範囲の取得を含む）を紹介するリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-leaflet/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-leaflet Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。