-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (136 loc) · 9.67 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
99
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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Time travel map - Bartholomap</title>
<meta id='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Overlock' rel='stylesheet' type='text/css'>
<link href='./style/style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="container">
<div class="sidebar">
<div id="menu">
<ul>
<li class="ulhead"><b>Chapters</b></li>
<li><a href="./#top">Bartholomap project</a></li>
<li><a href="./#bartholomew">John George Bartholomew's map</a></li>
<li><a href="./#airtravel">Air travel map</a></li>
<li><a href="./#routing">Enhance with actual destinations</a></li>
<li><a href="./#crow">As the crow flies</a></li>
<li><a href="./#manual">Manual labour</a></li>
<li class="ulhead"><b>Other pages</b></li>
<li><a href="howto.html">HOWTO</a></li>
<li><a href="view.html">Slippy map</a></li>
</ul>
</div>
</div>
<div class="content">
<h1 id="top">Bartholomap project</h1>
<div class="text">
The map below, the 'Bartholomap' shows how long it takes from London to any place in the world. This page tells the story how I came to make the Bartholomap. For the technical details and code I refer you to the <a href="howto.html">HOWTO</a> and <a href="https://github.com/stvno/Bartholomap">GitHub repository</a>. If you have any questions feel free to <a href="mailto:[email protected]">contact</a> <a href="https://twitter.com/stvno">me</a>.</div>
<div class="img text">
<a href="img/map.png"><img src="img/map-thumb.png"/></a>
<div class="caption text">The isochronic map created by <a href="https://twitter.com/stvno">me</a> showing various travel times from London in 2015 - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC-BY Steven M. Ottens</a></div>
</div>
<h2 id="bartholomew">John George Bartholomew's map</h2><span class="goup"><a href="./#top">menu</a></span>
<div class="text">
A while ago I read an article in <a href="http://www.intelligentlifemagazine.com/places/cartophilia/time-travel">Intelligent Life</a> about a hundred year old map that showed how long it took to travel from London to anywhere on the globe. The map, made before airtravel was common, shows the influence of shipping routes and intercontinental railways. Within a month you could travel to all but the most remote and landlocked places.
</div>
<div class="img text">
<a href="img/map.jpg"><img src="img/map-thumb.jpg"/></a>
<div class="caption text">An isochronic map created by John George Bartholomew showing various travel times from London in 1914 Photo: RGS/Intelligent Life</div>
</div>
<div class="text">
<a onclick="show()">Side by side</a>
</div>
<div id="dualmap">
<span class="closebutton">close</span>
<img class="duoimg" style="width:48%;"src="img/map-thumb.png"/>
<img class="duoimg" style="width:48%;" src="img/map-thumb.jpg"/>
</div>
<h2 id="airtravel">Air travel map</h2><span class="goup"><a href="./#top">menu</a></span>
<div class="text">
Since that map was created the world has changed, and I was wondering how such a map would look like if it was created today. Since airtravel is the popular choice for long distance travel I decided to start with that. The <a href="http://openflights.org/data.html">OpenFlights</a> project provides a list of airport-locations and flight-routes. Taking London as a starting point and using 600km/h as travelspeed it was fairly easy to calculate the time it takes to get to each of the ~3000 airports in the list. <a href="">TBD: link naar github</a>. Since contemporary travel is so much faster I changed the scale from days to hours:
</div>
<div class="text">
<span class="legend"><span class="nul">within 5 hours</span><span class="vijf">5 to 10 hours</span><span class="tien">10 to 20 hours</span><span class="twintig">20 to 30 hours</span><span class="dertig">30 to 40 hours</span><span class="veertig">over 40 hours</span>
</div>
<div class="img text">
<a href="img/airports.png"><img src="img/airports.png" width="300px" height="300px"/></a>
<a href="img/airports-lines.png"><img src="img/airports-lines.png" width="300px" height="300px"/></a>
</div>
<div class="caption text">Map of all airports as ±3000 dots classified by travel time (left) and as isochronal lines (right)</div>
<h2 id="routing">Enhance with actual destinations</h2><span class="goup"><a href="./#top">menu</a></span>
<div class="text">
However as any traveler knows, being at the airport doesn't mean that you have arrived. To further the resolution of the isochronic map I used the 7000 places from <a href="http://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-populated-places/">Natural Earth Data</a> to calculate the travel time to actual places. For each place I looked up the nearest airport and within a radius of a 1000km the nearest nonstop, one-stop and two-stop airports. For all four airports I calculated the total traveltime from London via that airport to the destination. This was done by using the excellent <a href="http://project-osrm.org/">Open Source Routing Machine</a>.
</div>
<div class="img text">
<a href=="img/airports-places.png"><img src="img/airports-places.png" width="300px" height="300px"/></a>
<a href="img/airports-places-lines.png"><img src="img/airports-places-lines.png" width="300px" height="300px"/></a>
</div>
<div class="caption text">Map of all airports and routable places as ±10350 dots classified by travel time (left) and as isochronal lines (right)</div>
<h2 id="crow">As the crow flies</h2><span class="goup"><a href="./#top">menu</a></span>
<div class="text">For about 190 places which did not get a result from the previous exercise, I decided to divide them into landlocked and coastal cities. (This could be done way more advanced, but I just looked on the map and made a judgement call). For both types of places I calculated the straight line distance (using <a href="http://www.movable-type.co.uk/scripts/latlong.html">great arc</a> distance) and decided upon 5km/h as landspeed and 25km/h for water. This may sound slow, but this is 'as the crow flies' in terrain without roads. Boats obviously are less hindered by the lack of roads.</div>
<div class="img text">
<a href="img/everything.png"><img src="img/everything.png"width="300px" height="300px"/></a>
<a href="img/everything-lines.png"><img src="img/everything-lines.png"width="300px" height="300px"/></a>
</div>
<div class="caption text">Map of all airports and places as ±10500 dots classified by travel time (left) and as isochronic lines (right)</div>
<h2 id="manual">Manual labour</h2><span class="goup"><a href="./#top">menu</a></span>
<div class="text">This is as far as the automated process can go. John George Bartholomew created his map by hand, and to reimagine his map I'll have to do some handwork myself. The isochronal lines generated by <a href="http://turfjs.org">turf.js</a> are lines and not nicely closed polygons with holes. With some QGIS magic I created the necessary polygons which I then could load into Inkscape to create the <a href="#map">map</a> but also load into <a href="https://www.mapbox.com/mapbox-studio/">MapBox Studio</a> to create the slippy map below.</div>
<div class="text">
<a id="slippymap" > </a>
<div class="thinborder">
<div class="thickborder">
<div class="thinborder">
<div id="map"></div>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2hlcmVjYW1wZXUiLCJhIjoieHE4bVNuRSJ9.qFTj9L2TMzVXX8G2QwJl_g';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/wherecampeu/ciiap7a8j00bnnqlz6lw2pefo', //hosted style id
center: [0,51], // starting position
zoom: 1, // starting zoom
maxZoom: 6,
attribution:'test',
});
map.addControl(new mapboxgl.Navigation());
document.getElementsByClassName('mapboxgl-ctrl-bottom-right')[0].innerHTML+='Background: <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a> | Isochrones by <a href="https://twitter.com/stvno">@stvno</a>';
</script>
</div>
<div class="text caption">
Thanks to the kind folks of the <a href="http://www.thespatialcommunity.com/">Spatial Community</a> for their inspiration and help, the <a href="http://openflights.org/">Open Flight</a> and <a href="http://www.naturalearthdata.com/">Natural Earth</a> communities for their data and my wife for the original suggestion to create this map.
</div>
</div>
</div>
<div id="footer">
<div id="footmenu">
<div><a href="./#top">Top</a></div><div><a href="howto.html">HOWTO</a></div><div><a href="img/map-hires.png">High Res Map</a></div><div><a href="view.html">Slippy Map</a></div><div><a href="https://raw.githubusercontent.com/stvno/Bartholomap/master/data/map.svg">SVG map</a></div><div><a href="https://github.com/stvno/Bartholomap">Code</a></div><div><a href="mailto:[email protected]">Contact</a></div><div><a href="https://twitter.com/stvno">Twitter</a></div>
</div>
<div id="theend">
~ SMO ~ 2015 ~ DC ~
</div>
</div>
<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-58675628-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var popup = document.getElementById('dualmap');
popup.onclick =function(d){
popup.style.display = 'none'
};
function show() {
popup.style.display = 'flex'
}
</script>
</body>