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.

Visualization example

https://nakamura196.github.io/tei_visualize_demo/01/

Source code

https://github.com/nakamura196/tei_visualize_demo/blob/main/docs/01/index.html

Implementation Example Using MarkerCluster

The visualization example is as follows.

https://nakamura196.github.io/tei_visualize_demo/02/

The source code is as follows.

https://github.com/nakamura196/tei_visualize_demo/blob/main/docs/02/index.html

This uses data from “Reconstruction and Utilization of Text Data from ‘Shibusawa Eiichi Biographical Materials’ Using TEI”.

Adding the Library

Add the following.

    <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>

Using L.markerClusterGroup

Create markers and add individual marker objects using the addLayer method. Finally, add markers to the map using the addLayer method.

        ...

        // Initialize the map
        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); // Convert string to numeric latitude/longitude

            // Create a marker and add it to the map
            var marker = L.marker([lat, lon]);

            const placeName =
              place.getElementsByTagName("placeName")[0].textContent;

            // Set popup on marker click
            marker.bindPopup(placeName);

            markers.addLayer(marker);
          }
        }

        map.addLayer(markers);

Summary

I hope this serves as a helpful reference for visualizing TEI/XML.