This repository has been archived by the owner on Nov 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtrip.html
104 lines (91 loc) · 5.55 KB
/
trip.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Navigating The Green Book | NYPL Labs</title>
<meta name="description" content="Experimental interfaces by the NYPL Labs that explore the Green Book, a travel guide published between 1936 and 1966 that listed hotels, restaurants, bars, gas stations, etc. where black travelers would be welcome.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:site_name" content="Navigating The Green Book"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://publicdomain.nypl.org/greenbook-map/" />
<meta property="og:title" content="Navigating The Green Book" />
<meta property="og:description" content="Experimental interfaces by the NYPL Labs that explore the Green Book, a travel guide published between 1936 and 1966 that listed hotels, restaurants, bars, gas stations, etc. where black travelers would be welcome." />
<meta property="og:image" content="http://publicdomain.nypl.org/greenbook-map/img/green-book.jpg" />
<meta name="image_src" content="http://publicdomain.nypl.org/greenbook-map/img/green-book.jpg">
<link rel="image_src" href="http://publicdomain.nypl.org/greenbook-map/img/green-book.jpg" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/trip.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<!-- mapbox -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<script src="js/vendor/leaflet-mapbox-gl.js"></script>
</head>
<body>
<div id="main" class="container">
<div id="map" class="map"></div>
<div id="path" class="path">
<div class="title">
<h2><small>Navigating</small><br />The Green Book</h2>
<p>A travel guide published between 1936 and 1966 that listed hotels, restaurants, bars, etc. where black travelers would be welcome.
</p>
<p class="button-group">
<a href="index.html" class="button">About This Project</a>
<a class="button form-button">Map Another Trip</a>
</p>
</div>
<div class="path-list-wrapper">
<ul id="path-list" class="path-list">
</ul>
<div class="path-line"></div>
</div>
</div>
<div id="modal" class="modal active">
<div id="path-form-modal" class="modal-content form-modal loading active">
<p class="intro">The <a href="http://digitalcollections.nypl.org/collections/the-green-book" target="_blank">Green Book</a> was a travel guide published between 1936 and 1966 that listed hotels, restaurants, bars, gas stations, etc. where black travelers would be welcome. Using data extracted from the books themselves, we welcome you to visualize a trip one may have taken using these books. <a href="index.html">Learn More.</a></p>
<form id="path-form" class="form">
<label>Choose a year</label>
<div id="select-year" class="select-group"></div>
<label>Enter an address U.S. address</label>
<input id="origin" type="text" value="New York, NY" />
<label>Enter a destination address</label>
<input id="destination" type="text" value="Atlanta, GA" />
<button id="path-form-submit" type="submit"></button>
</form>
</div>
<a href="#close" class="modal-close">x</a>
</div>
<div id="map-info" class="infobox">
<p>This map is currently using <span class="data-count">--</span> addresses extracted from <a href="#" class="data-link" target="_blank">--</a>. The path tries to look for a restaurant every <strong><span class="data-restaurant-miles">--</span> miles</strong> and a lodging every <strong><span class="data-hotel-miles">--</span> miles</strong>.</p>
<p class="button-group">
<a href="index.html" class="button">About This Project</a>
<a href="map.html#year=1956" class="button map-link">View All The Data</a>
</p>
</div>
</div>
<div class="nypl-header">
<a href="http://nypl.org" target="_blank" title="open nypl.org in a new window"><span class="lion">The New York Public Library</span></a>
A <a href="//publicdomain.nypl.org">public domain remix</a> by <a href="http://brianfoo.com" target="_blank">Brian Foo</a> of <a href="http://labs.nypl.org">NYPL Labs</a>, using the <a href="https://github.com/NYPL-publicdomain/data-and-utilities">data released by NYPL</a>.
<a href="//github.com/nypl-publicdomain/greenbook-map">View source code</a>.
</div>
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/config.js"></script>
<script src="js/trip.js"></script>
<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-1420324-131', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>