Overview

I investigated how to use “Peripleo,” so here are my notes. “Peripleo” is described as follows.

Peripleo is a browser-based tool for the mapping of things related to place.

https://github.com/britishlibrary/peripleo

This time, I will introduce how to use it in combination with “Rekichizu” (Historical Maps), which was introduced in the following article.

Result

You can try it out at the following URL.

https://nakamura196.github.io/peripleo/

The repository is available here.

https://github.com/nakamura196/peripleo

In this blog post, I use the following as sample data: “Bird’s-eye View Map of the Main Campus and Faculty of Agriculture Buildings of Tokyo Imperial University” (held by the University of Tokyo Graduate School of Agricultural and Life Sciences Library).

https://iiif.dl.itc.u-tokyo.ac.jp/repo/s/agriculture/document/187cc82d-11e6-9912-9dd4-b4cca9b10970

Background

I participated in the following conference and learned about “Peripleo.” I would like to thank the people involved in developing “Peripleo,” those who organized the conference, and Gethin Rees for teaching me how to use it.

http://codh.rois.ac.jp/conference/linked-pasts-10/

Basic Usage

Documentation is available at the following link.

https://github.com/britishlibrary/peripleo?tab=readme-ov-file#installation-guide

Here, I will introduce the customizations I made for using the “Bird’s-eye View Map of the Main Campus and Faculty of Agriculture Buildings of Tokyo Imperial University” data.

Data Preparation

Prepare a spreadsheet like the following.

https://docs.google.com/spreadsheets/d/1ZZJZL0K4cBOc0EgMHNV9NQ56C_fcZm0eceBg_OPmxe4/edit?usp=sharing

Gray cells are unnecessary columns.

Once the data is ready, download it in CSV format.

Conversion to JSON Format

Use the tool called Locolligo to convert the CSV data to JSON format.

https://github.com/docuracy/Locolligo

First, access the following.

https://docuracy.github.io/Locolligo/

After uploading the CSV file, pressing “Assign CSV Columns” displays the following.

By using reserved words in the CSV headers, manual mapping was not necessary. If mapping does not work correctly, it can be configured manually.

The reserved words can be found at the following link.

https://github.com/docuracy/Locolligo/blob/main/js/data-converter.js

function assign(){
	$('#assign').removeClass('throb');
	var assignmentOptions = [
		['(ignore)'],
		['@id','identifier|uuid|id|@id'],
		['properties.title','title|name|label'],
		['properties.%%%'],
		['geometry.coordinates','coordinates|coords|OSGB'],
		['geometry.coordinates[0]','longitude|long|lng|easting|westing|X'],
		['geometry.coordinates[1]','latitude|lat|northing|southing|Y'],
		['names[0].toponym','toponym'],
		['links[0].type'],
		['links[0].identifier'],
		['depictions[0].@id'],
		['depictions[0].title'],
		['descriptions[0].@id'],
		['descriptions[0].value'],
		['types[0].identifier'],
		['types[0].label'],
		['{custom}']
	];

Downloading the result provides data with items like the following stored in features.

{
            "@id": "https://uv-v4.netlify.app/#?manifest=https://nakamura196.github.io/portal_pro/usage/agriculture/manifest.json&xywh=11126.0%2C8124.0%2C1000%2C1000",
            "type": "Feature",
            "properties": {
                "title": "医学部　第二号館"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    139.7622949,
                    35.7109037
                ]
            },
            "depictions": [
                {
                    "@id": "https://iiif.dl.itc.u-tokyo.ac.jp/iiif/2/agriculture_re%2Fnou_tatemonochokanzu%2F0002.tif/11126.0,8124.0,1000,1000/600,/0/default.jpg",
                    "title": "東京大学農学生命科学研究科・農学部 / Graduate School of Agricultural and Life Sciences/Faculty of Agriculture, The University of Tokyo"
                }
            ],
            "types": [
                {
                    "label": "医学部"
                }
            ],
            "links": [
                {
                    "identifier": "https://en.wikipedia.org/wiki/Graduate_School_of_Medicine_and_Faculty_of_Medicine,_University_of_Tokyo"
                }
            ]
        },

Starting the Viewer

!

Below I introduce a method of downloading the source code and working locally, but as described in the Peripleo README.md mentioned at the beginning, you can also update files through the GitHub GUI.

git clone https://github.com/britishlibrary/peripleo.git
cd peripleo
python -m http.server

Then, accessing the following URL will show the default display content.

http://localhost:8000/docs/

If running locally and git or python -m http.server does not work, please refer to other articles available on the internet.

Changing Viewer Settings

Updating the Data

First, copy the contents of the JSON file downloaded earlier and overwrite the following file.

docs/data/VisitPlus-UK.lp.json

After reloading the browser and navigating to the Tokyo area, you can confirm that custom data is displayed as shown below.

Updating the Configuration

The viewer configuration is located at the following path.

docs/peripleo.config.json

Modify it as follows.

{
  "initial_bounds": [
    139.7573,
    35.7076,
    139.7673,
    35.7176
  ],
  "map_style": "https://mierune.github.io/rekichizu-style/styles/street/style.json",
  "data": [
    {
      "name": "東京帝國大學本部構内及農學部建物鳥瞰圖",
      "format": "LINKED_PLACES",
      "src": "./data/VisitPlus-UK.lp.json",
      "attribution": "東京大学農学生命科学研究科・農学部 / Graduate School of Agricultural and Life Sciences/Faculty of Agriculture, The University of Tokyo"
    }
  ],
...
}

First, change initial_bounds to the area around the University of Tokyo.

Also, change map_style to “Rekichizu” (Historical Maps).

Furthermore, update the attribution.

As a result, custom data is displayed on “Rekichizu” as shown below.

Feature Introduction

By setting depictions[0].@id, thumbnail images are displayed. The link destination uses the value set in identifier.

When zoomed in, the string set in depictions[0].title is displayed.

Also, based on the DBpedia link set in links[0].identifier, Related Web Resources are displayed.

Furthermore, filtering is possible based on the value of types[0].label.

Summary

There may be some inaccuracies or incomplete explanations, but I hope this serves as a useful reference.

I found it very convenient that such applications become available by conforming to the Linked Places Format (LPF).

https://github.com/LinkedPasts/linked-places-format/blob/master/README.md