EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

Leaflet

Leafletによるインタラクティブ地図

IIIF Georeference Viewer：地理参照コンテンツを地図上で可視化するツール

IIIF Georeference Viewer：地理参照コンテンツを地図上で可視化するツール

はじめに デジタルアーカイブや人文学研究の分野では、歴史地図や古写真などの資料を地理的な文脈の中で閲覧したいというニーズが増えています。IIIF（International Image Interoperability Framework）は画像の相互運用性を高めるための国際標準ですが、近年ではIIIF Georeference Extensionによって、IIIF画像に地理座標情報を付与できるようになりました。 今回紹介する IIIF Georeference Viewer（iiif_geo）は、こうした地理参照付きIIIFコンテンツを対話的な地図上で可視化するためのWebアプリケーションです。 IIIF Georeference Extensionとは IIIF Georeference Extensionは、IIIFマニフェストやキャンバスに地理座標情報を埋め込むための仕様です。これにより、歴史地図などのIIIF画像を現代の地図上に正確に重ね合わせることが可能になります。 従来、歴史地図のジオリファレンスにはGIS専用ソフトウェアが必要でしたが、この拡張仕様を活用することで、Webブラウザ上で手軽に地理参照コンテンツを閲覧・比較できるようになります。 IIIF Georeference Viewerの機能 動的なURL読み込み クエリパラメータを使って、任意のIIIFマニフェストやGeoJSONファイルをURLから直接読み込むことができます。例えば以下のようなURLでデモを確認できます。 デモサイト: https://nakamura196.github.io/iiif_geo/ 対応するデータ形式 IIIF Manifest — IIIF Presentation API 3.0のマニフェスト IIIF Canvas — 個別のキャンバスオブジェクト Linked Places Format — 歴史的な地名データの標準フォーマット GeoJSON — 広く使われている地理データフォーマット インタラクティブな地図表示 LeafletおよびMapLibre GLを使用した地図表示では、マーカーのクラスタリングによって大量のポイントデータも効率的に表示できます。ベースマップの切り替えも可能で、航空写真や地理院タイルなど複数の背景地図を選択できます。 分割ペインレイアウト 画面を分割して、左側に地図、右側にIIIF画像のディープズーム表示（OpenSeadragon）を配置するレイアウトに対応しています。歴史地図と現代地図を並べて比較する際に便利です。 ディープズーム OpenSeadragonによる高解像度画像のディープズームに対応しています。巨大な歴史地図でも、細部まで拡大して閲覧することが可能です。 多言語対応 日本語と英語のバイリンガルUIを備えており、国際的な利用にも対応しています。 技術スタック 本ツールは以下の技術で構成されています。 技術 用途 Nuxt 4 / Vue 3 アプリケーションフレームワーク Leaflet 2Dタイル地図表示 MapLibre GL ベクタータイル地図表示 OpenSeadragon IIIF画像のディープズーム GitHub Pages ホスティング Nuxt 4の静的サイト生成（SSG）機能を利用してGitHub Pagesにデプロイしているため、サーバーサイドの運用コストが不要です。 ...

2026年3月14日 · 1 分 · Nakamura
Leaflet-IIIFでのアノテーション座標変換の完全ガイド

Leaflet-IIIFでのアノテーション座標変換の完全ガイド

概要 IIIF (International Image Interoperability Framework) Presentation API v3のマニフェストに含まれるアノテーション座標（xywh形式）を、Leaflet-IIIFを使用したマップビューアー上で正確に表示する方法について解説します。 この問題は一見シンプルに見えますが、Leaflet-IIIFの内部動作を理解しないと正確な座標変換ができません。 問題の背景 IIIFマニフェストのアノテーション形式 IIIF Presentation API v3では、アノテーションの対象領域は以下のようなxywh形式で指定されます： { "id": "https://example.org/iiif/canvas/1/annotation/1", "type": "Annotation", "motivation": "commenting", "body": { "type": "TextualBody", "value": "雅屯河", "language": "ja" }, "target": "https://example.org/iiif/canvas/1#xywh=41012,81,115,49" } このxywh=41012,81,115,49は： x: 41012（左端のピクセル位置） y: 81（上端のピクセル位置） w: 115（幅） h: 49（高さ） を意味します。これらは元画像のピクセル座標 です。 Leaflet-IIIFの座標系 Leaflet-IIIFは、IIIF Image APIで提供される高解像度画像をタイル形式で表示するLeafletプラグインです。内部的には： CRS.Simple座標参照系を使用 画像を複数のズームレベルで縮小して管理 ズームレベルごとに異なる座標スケールを使用 この複雑な座標系のため、単純にmap.unproject()やpointToLatLng()を使っても正しい位置に配置できません。 試行錯誤の過程 失敗した試み1: map.unproject()の直接使用 // ❌ これは動かない const point = L.point(x, y); const latLng = map.unproject(point, 3); // ズームレベル3を指定 問題点 : unproject()は現在のマップの座標系を前提としており、Leaflet-IIIFが内部で使用している座標系とは異なります。 失敗した試み2: マップ境界からの比例計算 // ❌ これも不正確 const bounds = map.getBounds(); const normX = imgX / imageWidth; const normY = imgY / imageHeight; const lng = bounds.getWest() + (normX * (bounds.getEast() - bounds.getWest())); const lat = bounds.getNorth() - (normY * (bounds.getNorth() - bounds.getSouth())); 問題点 : Leaflet-IIIFは画像のアスペクト比を保持するため、マップ境界と実際の画像境界は異なります。 ...

2025年10月19日 · 更新: 2025年10月19日 · 4 分 · Nakamura
nuxt3-leafletで、指定したマーカーを前面に表示する

nuxt3-leafletで、指定したマーカーを前面に表示する

概要 nuxt3-leafletで、指定したマーカーを前面に表示する方法に関する備忘録です。 方法 以下のように、LMarkerにz-index-offset属性を用いることで、指定したマーカーを前面に表示することができました。 <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> まとめ nuxt3-leafletの利用にあたり、参考になりましたら幸いです。

2024年7月23日 · 更新: 2024年7月23日 · 1 分 · Nakamura
TEI/XMLの可視化例：Leafletを用いた地図表示

TEI/XMLの可視化例：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を用いた『渋沢栄一伝記資料』テキストデータの再構築と活用」のデータを利用しています。 ライブラリの追加 以下を追記します。 <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" /> <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> L.markerClusterGroupの利用 markersを作成して、個々のmarkerをaddLayerメソッドを使って追加します。最後に、mapにaddLayerメソッドを使って、markersを追加します。 ... // 地図の初期化 var map = L.map("map").setView(center, zoom); ... var markers = L.markerClusterGroup(); for (var i = 0; i < places.length; i++) { var place = places[i]; const geoList = place.getElementsByTagName("geo"); for (const geo of geoList) { var [lat, lon] = geo.textContent.trim().split(" ").map(Number); // 文字列を数値の緯度経度に変換 // マーカーを作成して地図上に追加 var marker = L.marker([lat, lon]); const placeName = place.getElementsByTagName("placeName")[0].textContent; // マーカーにクリック時のポップアップを設定 marker.bindPopup(placeName); markers.addLayer(marker); } } map.addLayer(markers); まとめ TEI/XMLの可視化にあたり、参考になりましたら幸いです。 ...

2024年4月12日 · 更新: 2024年4月12日 · 1 分 · Nakamura
Nuxt 3 x Composition APIでLeaflet Marker Clusterを試す

Nuxt 3 x Composition APIでLeaflet Marker Clusterを試す

概要 以下の記事で、Nuxt 3でLeaflet Marker Clusterを試す方法を紹介しました。今回は、Composition APIを使った書き方に更新したので、その備忘録です。 インストール 以下をインストールします。 npm i leaflet leaflet.markercluster @vue-leaflet/vue-leaflet npm i -D @types/leaflet @types/leaflet.markercluster ソースコード 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-demo/blob/main/components/map/MarkerCluster.vue まとめ TypeScriptに一部対応できていない点がありますが、参考になりましたら幸いです。

2023年11月24日 · 更新: 2023年11月24日 · 1 分 · Nakamura
Nuxt 3でLeaflet Marker Clusterを試す

Nuxt 3でLeaflet Marker Clusterを試す

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）の段階のようです。参考になりましたら幸いです。

2023年3月16日 · 更新: 2023年3月16日 · 1 分 · Nakamura
LeafletのVue3での使用例（座標範囲の取得を含む）

LeafletのVue3での使用例（座標範囲の取得を含む）

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

2022年4月14日 · 更新: 2022年4月14日 · 1 分 · Nakamura