Mapping Qing Relay Stations

The beta stage site is here.

During the Qing dynasty, the large network of postal and military stations, connecting the ruling kernel with China proper, Manchuria, Mongolia, Sinkiang, and Tibet, were venues of information and military logistics for monitoring the empire, and also routes which officials, scholars, merchants traveled. My recent project has been one of retracing these routes and transforming them into GIS databases. I will give a very brief technical overview of the backstage process here, and more blogs concerning specific routes will be posted in the coming months(most likely in Chinese).

Data Aggregation

The main primary source that I used was The Jiaqing Administrative Code of the Qing Dynasty (Jiaqing Huidian 嘉慶會典). My initial plan was to extract the information using OCR and then geocoding the raw data with a Google API. However, most of the OCR software that I tried was quite abysmal at discerning Chinese characters that were oriented vertically. I tinkered around a lot with various software parameters and have even thought of writing my own OCR specialized for this purpose but to no avail. In the end, I decided that for my data size, it was faster to have a flawed OCRed result and then eyeball the data for corrections. Geocoding was also pretty challenging: the Google API could only identify place names that had not changed since the Qing period and I had to do a lot of textual research in travel logs and gazettes to uncover the present-day location. For anyone interested, Xiao fang hu zhai yu di cong chao (小方壺齋輿地叢鈔) is a good source to look into.

In the frontier regions (Mongolia, Manchuria, Tibet & Sinkiang), it was another set of problems. Traditionally, there has not been a lot of historical sources on these regions, and unlike China Proper where changes in the administrative division can be traced after some searching, many of the places in the frontier region had already vanished in history without a trace. Harvard’s CHGIS was quite helpful in locating many relay points but there were still large gaps in the data that I had to fill in manually, with the aid of old maps, most of them Japanese Gaihozu maps from the 1920s-1930s. By transforming the coordinates of raster maps and overlaying them on a Google terrain map (like the one below), I was quite able to locate an approximate position.

Visual Presentation

For the visual presentation, I originally used ArcGIS for mapping, but for a project of this size, it proved to be rather cumbersome. ArcGIS also required a paid server connection if I were to use their publishing service. I ended up with MapBox JS, which was a far simpler platform for visualizing GIS data. A short python script was written to convert all the existing data in GeoJSON, which was then fed into MapBox. There is still a lot to add, such as searching capabilities, node property widgets, multi-layering functions, etc. I am also still working on constructing an accompanying database to sort, query, and display data.

Below are some very ugly codes for a basic mapping of the relay points.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>清代驿站</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <style>
        #menu {
            background: #fff;
            position: absolute;
            z-index: 1;
            top: 10px;
            right: 100px;
            border-radius: 3px;
            width: 120px;
            border: 1px solid rgba(0, 0, 0, 0.4);
            font-family: 'Open Sans', sans-serif;
        }

        #menu a {
            font-size: 13px;
            color: #404040;
            display: block;
            margin: 0;
            padding: 0;
            padding: 10px;
            text-decoration: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.25);
            text-align: center;
        }

        #menu a:last-child {
            border: none;
        }

        #menu a:hover {
            background-color: #f8f8f8;
            color: #404040;
        }

        #menu a.active {
            background-color: #3887be;
            color: #ffffff;
        }

        #menu a.active:hover {
            background: #3074a4;
        }
    </style>

    <nav id="menu"></nav>
    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'token_here';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v9',
            center: [116.363625, 39.913818],
            zoom: 3
        });

        map.addControl(new mapboxgl.NavigationControl());

        map.on('load', function () {
            map.addSource("routes", {
                "type": "geojson",
                "data": "./routes.geojson" //geojson with all the stored coordinates
            });

            map.addLayer({
                "id": "routes",
                "type": "circle",
                "source": "routes",
                "paint": {
                    "circle-radius": 3,
                    "circle-color": "#859900"
                }
            });

            map.addSource("zdot", {
                "type": "geojson",
                "data": "./zdot.geojson" //smuggling route geodata compiled from ArcGIS
            });

            map.addLayer({
                "id": "zdot",
                "type": "circle",
                "source": "zdot",
                'layout': {
                    //'visibility': 'none'
                },
                "paint": {
                    "circle-radius": 3,
                    "circle-color": "#FF00FF"
                }
            });

            map.addSource("zline", {
                "type": "geojson",
                "data": "./zline.geojson" //smuggling route line joined from dots
            });

            map.addLayer({
                "id": "zline",
                "type": "line",
                "source": "zline",
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round',
                    //'visibility': 'none'
                },
                'paint': {
                    'line-color': '#FF00FF',
                    'line-width': 2
                }
            });
        });

        var toggleableLayerIds = ['routes', 'zdot', 'zline'];

        for (var i = 0; i < toggleableLayerIds.length; i++) {
            var id = toggleableLayerIds[i];

            var link = document.createElement('a');
            link.href = '#';
            link.className = '';
            link.textContent = id;

            link.onclick = function (e) {
                var clickedLayer = this.textContent;
                e.preventDefault();
                e.stopPropagation();

                var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

                if (visibility === 'visible') {
                    map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                    this.className = '';
                } else {
                    this.className = 'active';
                    map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                }
            };

            var layers = document.getElementById('menu');
            layers.appendChild(link);
        }
    </script>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

padding: 0;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

</style>

</head>

<body>

<style>

#menu {

background: #fff;

position: absolute;

z-index: 1;

top: 10px;

right: 100px;

border-radius: 3px;

width: 120px;

border: 1px solid rgba(0, 0, 0, 0.4);

font-family: 'Open Sans', sans-serif;

}

#menu a {

font-size: 13px;

color: #404040;

display: block;

margin: 0;

padding: 0;

padding: 10px;

text-decoration: none;

border-bottom: 1px solid rgba(0, 0, 0, 0.25);

text-align: center;

}

#menu a:last-child {

border: none;

}

#menu a:hover {

background-color: #f8f8f8;

color: #404040;

}

#menu a.active {

background-color: #3887be;

color: #ffffff;

}

#menu a.active:hover {

background: #3074a4;

}

</style>

mapboxgl.accessToken = 'token_here';

var map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/dark-v9',

center: [116.363625, 39.913818],

zoom: 3

});

map.addControl(new mapboxgl.NavigationControl());

map.on('load', function () {

map.addSource("routes", {

"type": "geojson",

"data": "./routes.geojson" //geojson with all the stored coordinates

});

map.addLayer({

"id": "routes",

"type": "circle",

"source": "routes",

"paint": {

"circle-radius": 3,

"circle-color": "#859900"

}

});

map.addSource("zdot", {

"type": "geojson",

"data": "./zdot.geojson" //smuggling route geodata compiled from ArcGIS

});

map.addLayer({

"id": "zdot",

"type": "circle",

"source": "zdot",

'layout': {

//'visibility': 'none'

"paint": {

"circle-radius": 3,

"circle-color": "#FF00FF"

}

});

map.addSource("zline", {

"type": "geojson",

"data": "./zline.geojson" //smuggling route line joined from dots

});

map.addLayer({

"id": "zline",

"type": "line",

"source": "zline",

'layout': {

'line-join': 'round',

'line-cap': 'round',

//'visibility': 'none'

'paint': {

'line-color': '#FF00FF',

'line-width': 2

}

});

var toggleableLayerIds = ['routes', 'zdot', 'zline'];

for (var i = 0; i < toggleableLayerIds.length; i++) {

var id = toggleableLayerIds[i];

var link = document.createElement('a');

link.href = '#';

link.className = '';

link.textContent = id;

link.onclick = function (e) {

var clickedLayer = this.textContent;

e.preventDefault();

e.stopPropagation();

var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

if (visibility === 'visible') {

map.setLayoutProperty(clickedLayer, 'visibility', 'none');

this.className = '';

} else {

this.className = 'active';

map.setLayoutProperty(clickedLayer, 'visibility', 'visible');

}

};

var layers = document.getElementById('menu');

layers.appendChild(link);

}

</script>

</body>

</html>

Future Roadmap

The next stage of the project involves the expansion of the current framework in both spatial and temporal dimensions. Spatially, the primary source that I used earlier contains only information on routes radiating from the capital Beijing towards provincial capitals. I intend to explore sources that shed light on sub-provincial level relay networks to better understand the penetration of the Qing imperial information structure. Temporally, the database can be expanded to incorporate a continuous time series of records that track changes in place name, administrative status, and geographic locations. By adding data from the Qianlong Reign (1735-1796) when the Qing Dynasty was still conquering new territories, and data from the Guangxu Reign (1875-1908) when telegraphs, railways, and postal services began displacing the relay system, I think that it is rather possible to make out an interesting story of the transformation of the Qing information infrastructure.

txia