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