Leaflet

IIIF Georeference Viewer: Visualizing Georeferenced Content on Interactive Maps

Introduction In the fields of digital archives and humanities research, there is a growing need to view historical maps, old photographs, and other materials within a geographic context. IIIF (International Image Interoperability Framework) is an international standard for enhancing image interoperability, and with the recent IIIF Georeference Extension, it is now possible to attach geographic coordinate information to IIIF images. The IIIF Georeference Viewer (iiif_geo) is a web application for visualizing such georeferenced IIIF content on interactive maps. ...

March 14, 2026 · 3 min · Nakamura

Complete Guide to Annotation Coordinate Conversion in Leaflet-IIIF

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

October 19, 2025 · Updated: October 19, 2025 · 6 min · Nakamura

Bringing a Specified Marker to the Front in nuxt3-leaflet

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. <template v-for="marker in markers"> <LMarker @click="selectMarker(marker)" :lat-lng="[marker.lat, marker.lng]" :z-index-offset="selectedSpotId === marker.id ? 1000 : 0" > <LTooltip> {{ marker.title }} </LTooltip> <LIcon :iconUrl="marker.icon" :iconSize="[25, 41]" :iconAnchor="[12, 41]" :popupAnchor="[1, -34]" :tooltipAnchor="[16, -28]" shadowUrl="https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png" :shadowSize="[41, 41]" :shadowAnchor="[12, 41]" ></LIcon> </LMarker> </template> Summary I hope this is helpful when using nuxt3-leaflet. ...

July 23, 2024 · Updated: July 23, 2024 · 1 min · Nakamura

TEI/XML Visualization Example: Map Display Using 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. ...

April 12, 2024 · Updated: April 12, 2024 · 2 min · Nakamura

Trying Leaflet Marker Cluster with Nuxt 3 and Composition API

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: npm i leaflet leaflet.markercluster @vue-leaflet/vue-leaflet npm i -D @types/leaflet @types/leaflet.markercluster Source Code Please refer to the following: https://github.com/nakamura196/nuxt3-demo/blob/main/components/map/MarkerCluster.vue Summary There are some parts where TypeScript support is incomplete, but I hope this serves as a useful reference. ...

November 24, 2023 · Updated: November 24, 2023 · 1 min · Nakamura

Trying Leaflet Marker Cluster with Nuxt 3

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.

March 16, 2023 · Updated: March 16, 2023 · 1 min · Nakamura

Usage Example of Leaflet with Vue 3 (Including Coordinate Range Retrieval)

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.

April 14, 2022 · Updated: April 14, 2022 · 1 min · Nakamura