-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
98 lines (73 loc) · 4.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Taiwanese City Maps in WWII and now</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="http://imrehg.github.io/taiwanmap/" />
<meta property="og:image" content="http://imrehg.github.io/taiwanmap/img/thumbnail.jpg" />
<meta property="og:title" content="Taiwanese City Maps in WWII and now" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Formosa (Taiwan) City Plans from 1944/45 overlaid on current satellite imagery. Discover what has and hasn't changed in the years since." />
<meta name="description" content="Formosa (Taiwan) City Plans from 1944/45 overlaid on current satellite imagery. Discover what has and hasn't changed in the years since." />
<meta property="fb:admins" content="36800015" />
<meta name="twitter:site" content="@imrehg"/>
<link rel="me" href="https://fosstodon.org/@imrehg">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var mapData;
$.getJSON( "taiwanmap.json", function( data ) {
mapData = data;
setupList(mapData);
});
var setupList = function (mapData) {
var maplist = $("#maplist");
$.each(mapData, function(key, value) {
var text, link;
text = key + " / " + value["name"];
link = $("<a></a>").attr("href","taiwanmap.html?location="+key).text(text)
maplist.append($("<li></li>").append(link));
});
};
</script>
<style>
body {
max-width: 800px;
margin: 0 auto;
}
#usage {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div><img src="img/header.png"></div>
<h1>Taiwan City Maps overlays</h1>
<p>Recently I've found a collection of <a href="http://www.lib.utexas.edu/maps/ams/formosa_city_plans/">Formosa (Taiwan) City Plans</a> made by the US Army in 1944 and 1945, based on aerial photographs. To compare how much has changed (or hasn't!) in the years since, I've put together tool to overlay these city plans on their present day satellite imagery (courtesy of Google Maps).</p>
<p>There are altogether 26 maps in the collection, so far I've added the following ones to this site:</p>
<h2>List of maps</h2>
<ul id="maplist"></ul>
<h2>Usage</h2>
<p>Use the tool bar at the top of the page to <strong>toggle visibility</strong> of the overlay, <strong>adjust the opacity</strong> to blend the old and new maps, or <strong>select another map</strong>.</p>
<div><img src="img/usage.png" id="usage"></div>
<p>You can also switch between <strong>satellite</strong> and <strong>map</strong> views using the selector in the upper left corner, for a different experience.</p>
<h2>More info</h2>
<p>If you want to know more about how this page was made, and some historical lessons I've found, check out the <a href="https://gergely.imreh.net/blog/2015/11/taiwan-wwii-map-overlays/">Taiwan WWII Map Overlays</a> writeup on my blog about the topic!</p>
<h2>Source Material</h2>
<p>The maps included are from the <a href="http://www.lib.utexas.edu/maps/">Perry-Castañeda Library Map Collection</a>, and Courtesy of the University of Texas Libraries, The University of Texas at Austin. They are under public domain according to the <a href="http://www.lib.utexas.edu/usage_statement.html">Library Web Material Usage Statement</a>. I'm greatful for their release!</p>
<h2>Created by</h2>
<p>Hacked together by <a href="https://gergely.imreh.net">Gergely Imreh</a>. Feedback and comments are welcome!</p>
<p>The source code is available on <a href="https://github.com/imrehg/taiwanmap">GitHub</a>.</p>
<p><a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons CC-BY 4.0</a> license for all text, <a href="https://github.com/imrehg/taiwanmap/blob/gh-pages/ReadMe.md#license">MIT license</a> for all code.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12127510-16', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>