
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の可視化にあたり、参考になりましたら幸いです。 ...









