-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
executable file
·225 lines (198 loc) · 13.4 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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Define the versions of IE that will be used to render the page. See Microsoft documentation for details. Optional.-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- End Responsive -->
<meta property="og:url" content="https://livingatlas.arcgis.com/topoexplorer/index.html" />
<meta property="og:type" content="application" />
<meta property="og:title" content="Esri Topo Explorer" />
<meta property="og:description" content="The USGS Historical Topographic Map Explorer brings the rich tapestry of US historical maps to everyone, and it allows them to share views of the collection as a web maps." />
<meta property="og:image" content="https://images.safe.com/logos/partners/esri.png" />
<!-- SEO -->
<meta name="Keywords" content="USGS, Topographic Maps, Historical Maps, Map, Esri"/>
<meta name="Description" content="This interactive map..."/>
<link rel="icon" href="https://www.esri.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-shadow.css"/>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.33/esri/css/esri.css"/>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.27/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" type="text/css" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.4/css/calcite-web.min.css">
</head>
<body class="nihilo">
<!-- main window -->
<div id="main-window" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', liveSplitters:true, gutters:false">
<!-- header -->
<div class="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a href="http://www.esri.com/" target="_blank">
<img class="header-logo" src="images/esri.png">
</a>
<a href="http://www.usgs.gov/" target="_blank">
<img class="header-logo" src="images/usgswhite.green.jpg">
</a>
<div class="header-title"></div>
<div class="subheader-title"></div>
<div class="right social">
<span class="share_facebook icon-social-facebook"></span>
<span class="share_twitter icon-social-twitter"></span>
<span class="share_bitly icon-social-share" id="bitlyIcon" title="Get a short link to the application"></span>
<span class="padding-left-quarter padding-right-0 padding-leader-0 padding-trailer-0 btn btn-small btn-transparent icon-ui-gray about-modal icon-ui-description font-size-1"></span>
<div class="popover fade left in" data-toggle="popover" data-placement="left">
<div class="arrow"></div>
<div class="popover-content" id="bitlyContent">
<div class="bitlyInputContainer">
<input id="bitlyInput" class="bitlyInput" type="text" value="">
</div>
<div class="copy-btn icon-ui-link btn btn-small btn-white btn-clear">Copy</div>
</div>
</div>
</div>
</div>
<!-- sidebar container -->
<div class="sidebar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
<!-- STEP ONE -->
<div class="step-one-message-container">
<div class="halfCircleRight stepOne step-one-half-circle-msg"></div>
<div class="step-one-message"></div>
</div>
<div class="geocoder-container">
<div id="geocoder"></div>
</div>
<!-- STEP TWO -->
<div class="step-two-message-container hide">
<div class="halfCircleRight stepTwo step-two-half-circle-msg"></div>
<div class="step-two-message"></div>
</div>
<!-- STEP THREE -->
<div class="step-three-message-container hide">
<div class="halfCircleRight stepThree step-three-half-circle-msg"></div>
<!-- STEP THREE -->
<div class="step-three-message"></div>
</div>
<!-- sign in / sign out -->
<div class="step-four-message-container hide">
<div class="step-four-message">
<div class="font-size--2 sign-in-message text-center hide">
<div class="save-maps-container">
<span class='sign-in-btn avenir-demi btn btn-transparent padding-leader-0 padding-trailer-0 padding-left-0 padding-right-0'>Sign in</span>
<span> to save web maps to your ArcGIS Online account</span>
</div>
</div>
<div class="font-size--2 save-maps-message hide">
<div class="save-maps-container">
<div class="left-col">
<img class="user-thumbnail" src="images/profile-pictures.png">
<div class="user-name text-ellipsis"></div>
</div>
<div class="right-col">
<span class='save-maps-btn avenir-demi btn btn-transparent padding-leader-0 padding-trailer-0 padding-left-0 padding-right-0'>Save</span>
<span> web map to your ArcGIS Online account</span>
<div class="sign-out-btn">Sign Out</div>
</div>
</div>
</div>
</div>
</div>
<!-- GRID CONTAINER / STEP THREE / GRID -->
<div class="gridContainer">
<div id="grid"></div>
</div>
<div class="reset-btn btn btn-small btn-white icon-ui-refresh">Reset</div>
</div>
<!-- map container -->
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center', splitter:true">
<img id="loadingImg" src="images/loading.gif"/>
</div>
<!-- timeline container -->
<div id="timeline-container" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'bottom', splitter:true">
<!-- timeline legend -->
<div class="timeline-legend-container">
<div class="timeline-legend-header"></div>
<div class="btn-group btn-group-vertical topo-legend" data-toggle="buttons"></div>
</div>
<div class="timeline-message"></div>
<!-- timeline -->
<div id="timeline"></div>
</div>
<!-- about modal -->
<div class="js-modal modal-overlay " data-modal="foo">
<div class="modal-content column-18" role="dialog" aria-labelledby="modal" role="dialog">
<a class="js-modal-toggle right" href="#" aria-label="close-modal">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 32 32" class="svg-icon"><path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/></svg>
</a>
<h3 class='trailer-half font-size-2'>About the USGS Historical Topographic Map Collection and Explorer</h3>
<p>
In 2014, the US Geological Survey (USGS) and Esri collaborated to bring the ever-increasing collection of US historical topographic maps to everyone through the USGS Historical Topographic Map Explorer. This app brings to life more than 178,000 maps dating from 1882 to 2006. Previously available only as printed lithographic copies, the legacy quadrangles are now available as web viewable images and free, downloadable digital files. The USGS Historical Topographic Map Explorer allows users to explore the historical maps, save the current view as a web map, and download the maps as high-resolution georeferenced images in GeoTIFF format for use in web mapping applications and GIS. Learn more about the app in the <a href="https://www.arcgis.com/home/item.html?id=15118046711648a783844109bfdd2203" target="_blank">item description</a> on ArcGIS Online.
</p>
<p>
The historical maps are part of the USGS Historical Topographic Map Collection ― a project that was launched in 2011. The collection includes all scales and all
editions of the topographic maps published by the USGS since the inception of the topographic mapping program in 1879. The maps have been prepared at scales
ranging from 1:10,000 to 1:250,000. Some scales have broad coverage across the United States, while others may have only one map.
</p>
<p>
The USGS scanned each map as is to capture the content and condition of each map sheet. All maps were georeferenced, and metadata was captured as part of the
process. Using ArcGIS, the scanned maps were made into
the USGS Historical Topographic Maps image service that
can be viewed on the web and provides links to allow users to download individual scanned images. Learn more about the image service in the <a href="https://www.arcgis.com/home/item.html?id=ee19794feeed4e068ba99b2ddcb6c2db" target="_blank">item description</a> in ArcGIS Online.
</p>
<p>
"We are so pleased to see these historic topographic maps being made more accessible to the nation," said Kevin Gallagher, associate director of
Core Science Systems for the USGS. "We recognize the fundamental role of government in acquiring mapping information and putting it in the public domain.
At the same time, we recognize the tremendous benefits of the private industry adding value through innovative approaches to access and distribution."
</p>
<div class="font-size-2">
Using the app is simple:
</div>
<ul style="list-style-type: none;">
<li>1. Find or search for your place of interest.</li>
<li>2. Click on the map view to see which USGS maps are available for that location.</li>
<li>3. Use the timeline to explore thumbnails of the maps, see their extents, and select the ones you want to view.</li>
<li>4. Use the slider for each map in the side panel to control its transparency and compare it to other maps.</li>
<li>5. Use the links at the top of the app to share the current map view with others via social media or embeddable links.</li>
<li>6. Download the map images, if you wish.</li>
<li>7. Once logged in to your ArcGIS Online account, you can create a web map that includes the historical maps you have selected.</li>
</ul>
<div class="leader-1">
Use this key to learn how to read the thumbnails that appear in the timeline:
</div>
<div class="leader-quarter center">
<img src="images/Thumbnail_explanation.jpg" alt="thumbnail explanation">
</div>
<div class="leader-1 trailer-1">
The USGS had published <a href="https://www.usgs.gov/faqs/where-can-i-find-topographic-map-symbol-sheet" target="_blank">these symbol keys</a> to help you identify the symbols used on their topographic maps.
</div>
<blockquote class="font-size--2">
"We are pleased to partner with the USGS on this app to bring this national treasure to life," said Jack Dangermond, president of Esri.
"This application provides an easy way for anyone to explore the historic map collection by both place and time. The ArcGIS platform supports the building and sharing of amazing maps and content such as this collection."
</blockquote>
<p>
Please contact us at <a href="mailto:topoexplorer@esri.com">topoexplorer@esri.com</a> with your questions or comments about the map collection or the online app.
</p>
<div class="text-right">
<button class="btn btn-white js-modal-toggle">close</button>
</div>
</div>
</div>
<a class="foo-modal js-modal-toggle btn hide" href="#" data-modal="foo"><span></span></a>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.4/js/calcite-web.min.js"></script>
<script type="text/javascript" src="https://js.arcgis.com/3.33/"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/tooltip-min.js"></script>
<script type="text/javascript" src="js/tmin.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="https://assets.adobedtm.com/2e9cd01e19dc5ac4867e752f17a2f1ea1923e5af/satelliteLib-0ed1001fd441a838aefe8e755be42aaafddcc46b.js"></script>
</body>
</html>