Leaflet

Overview This article explains how to accurately display annotation coordinates (xywh format) from IIIF (International Image Interoperability Framework) Presentation API v3 manifests on a map viewer using Leaflet-IIIF. This problem may seem simple at first glance, but accurate coordinate conversion is not possible without understanding the internal workings of Leaflet-IIIF. Background IIIF Manifest Annotation Format In IIIF Presentation API v3, the target area of an annotation is specified in xywh format as follows: ...

Overview This is a memo on how to bring a specified marker to the front in nuxt3-leaflet. Method By using the z-index-offset attribute on LMarker as shown below, I was able to bring a specified marker to the front. < 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 " Summary I hope this is helpful when using nuxt3-leaflet. ...

Overview For visualizing TEI/XML files, I created a repository that publishes visualization examples and source code. https://github.com/nakamura196/tei_visualize_demo You can see the visualization examples on the following page. https://nakamura196.github.io/tei_visualize_demo/ This time, I added an example of marker display using MarkerCluster, which I’ll introduce here. Prerequisites This assumes that you can already display markers using Leaflet (without using MarkerCluster). If you haven’t done so yet, please refer to the following visualization example and source code. ...

Overview In the following article, I introduced how to use Leaflet Marker Cluster with Nuxt 3. This time, I updated it to use the Composition API, so here are my notes. Installation Install the following: 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 Source Code Please refer to the following: ...

I had the opportunity to try Leaflet Marker Cluster with Nuxt 3. The implementation example is as follows. https://nuxt3-demo-nine.vercel.app/map-cluster For this implementation, I referenced the following page. https://codesandbox.io/s/ns238 The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo As of March 2023, it appears to be at the POC (Proof of Concept) stage. I hope this serves as a useful reference.

I created a repository introducing a usage example of Leaflet with Vue 3 (including coordinate range retrieval). The working example is available here: https://static.ldas.jp/vue3-leaflet/ The source code is available here: https://github.com/ldasjp8/vue3-leaflet As a Vue 3 beginner, there may be errors, but we hope this serves as a useful reference.