forked from stamen/maps.stamen.com
/
index.html
371 lines (339 loc) · 20.3 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html>
<html>
<head>
<title>maps.stamen.com</title>
<meta name="description" content="Stamen's toner, terrain and watercolor map styles are lovingly crafted and free for the taking.">
<meta property="og:title" content="Stamen Maps">
<meta property="og:type" content="website">
<meta property="og:url" content="http://maps.stamen.com/">
<meta property="og:description" content="Stamen's toner, terrain and watercolor map styles are lovingly crafted and free for the taking.">
<meta property="og:image" content="http://maps.stamen.com/images/fb-watercolor.png">
<meta property="og:image" content="http://maps.stamen.com/images/fb-toner.png">
<meta property="og:image" content="http://maps.stamen.com/images/fb-terrain.png">
<script type="text/javascript" src="js/vendor/modestmaps.min.js"></script>
<script type="text/javascript" src="js/vendor/reqwest.min.js"></script>
<script type="text/javascript" src="js/tile.stamen.js?v1.2.0"></script>
<script type="text/javascript" src="js/common.js?recaptcha"></script>
<script type="text/javascript" src="js/vendor/google-code-prettify/prettify.js"></script>
<style type="text/css">
@import url(css/bootstrap/bootstrap.css);
@import url(css/screen.css?white-maps);
</style>
</head>
<body>
<div id="header" class="navbar">
<div class="navbar-inner">
<div class="container">
<h1 class="brand">maps.stamen.com</h1>
<a id="stamen" class="brand" href="http://stamen.com">stamen</a>
<a id="toggle-feedback" class="brand toggler">report a bug</a>
</div>
</div>
</div>
<div id="hero">
<div id="map-main" class="map switch" data-provider="toner">
<div id="bottom">
<div class="container">
<h2 id="main-title"><a id="main-permalink" class="permalink" href="#"><span class="provider-name"></span><span class="icon">⇲</span></a></h2>
</div>
</div>
</div>
<div id="maps-sub" class="container">
<form id="search" action="#">
<p>
<input id="search-location" class="span3" type="text" placeholder="Type a location">
<input id="search-submit" class="btn" type="submit" value="Find">
</p>
</form>
<div id="controls" class="controls">
<a id="zoom-in" title="zoom in">+</a>
<a id="zoom-out" title="zoom out">−</a>
</div>
<div id="map-sub2" class="map switch" data-provider="terrain"><h3><a class="provider-name" href="#terrain">Terrain</a></h3></div>
<div id="map-sub3" class="map switch" data-provider="watercolor"><h3><a class="provider-name" href="#watercolor">Watercolor</a></h3></div>
<div id="feedback" class="toggle" style="display: none;">
<form id="feedback-form" target="_blank" method="POST" action="feedback.php">
<input id="feedback-center" name="center" type="hidden">
<input id="feedback-style" name="style" type="hidden">
<p><strong>Not looking right?</strong>
<a href="http://citytracking.org/some-known-bugs-and-whats-to-do/">See here for more info.</a><br>
You can help us track down problems by sending us a
brief description of what’s wrong:</p>
<textarea name="description"></textarea>
<p><small>A link to the current view will be included automatically.</small></p>
<p><label>Your email (optional): <input type="text" name="sender"></label></p>
<div id="recaptcha"></div>
<p><input id="send-feedback" class="btn btn-success" type="submit" value="submit"></p>
</form>
</div>
</div>
</div>
<div id="content" class="container content">
<p id="desc">For over a decade, Stamen has been exploring
<a href="http://stamen.com/cartography">cartography</a>
with our <a href="http://stamen.com/clients">clients</a>
and in <a href="http://stamen.com/projects">research</a>.
These maps are presented here for your enjoyment and use wherever
you display <a href="http://openstreetmap.org">OpenStreetMap</a>
data.</p>
<div id="tiles-toner" class="tiles row">
<a href="toner/#14/37.8024/-122.2645" class="map span3"
data-provider="toner"
data-center="37.8024,-122.2645"
data-zoom="14"></a>
<div class="span6">
<h3><a class="hashish" href="toner/">Toner</a></h3>
<p>These high-contrast B+W (black and white) maps are
featured in our Dotspotting project. They are perfect for data
mashups and exploring river meanders and coastal zones.
Available in six flavors:
<a class="hashish" href="toner/">standard toner</a>,
<a class="hashish" href="toner-hybrid/">hybrid</a>,
<a class="hashish" href="toner-labels/">labels</a>,
<a class="hashish" href="toner-lines/">lines</a>,
<a class="hashish" href="toner-background/">background</a>,
and <a class="hashish" href="toner-lite/">lite</a>.</p>
<p><strong>Available worldwide.</strong></p>
</div>
<div class="span3">
<ul>
<li><a href="https://github.com/Citytracking/toner">Fork on Github</a></li>
<li><a href="http://content.stamen.com/dotspotting_toner_cartography_available_for_download">Read about it</a></li>
</ul>
</div>
</div>
<div id="tiles-terrain" class="tiles row">
<a href="terrain/#11/36.3716/-121.7322" class="map span3"
data-provider="terrain"
data-center="36.3716,-121.7322"
data-zoom="11"></a>
<div class="span6">
<h3><a class="hashish" href="terrain/">Terrain</a></h3>
<p>Orient yourself with our terrain maps, featuring hill shading
and natural vegetation colors. These maps showcase advanced
labeling and linework generalization of dual-carriageway roads.
Terrain was developed in collaboration with Gem Spear and Nelson Minar.
Available in four flavors:
<a class="hashish" href="terrain/">standard terrain</a>,
<a class="hashish" href="terrain-labels/">labels</a>,
<a class="hashish" href="terrain-lines/">lines</a>,
and <a class="hashish" href="terrain-background/">background</a>.</p>
<p><strong>Available in the USA only.</strong></p>
</div>
<div class="span3">
<ul>
<li><a href="https://github.com/Citytracking/Terrain">Fork on Github</a></li>
<li><a href="http://mike.teczno.com/notes/osm-us-terrain-layer/foreground.html">Read about it</a></li>
</ul>
</div>
</div>
<div id="tiles-watercolor" class="tiles row">
<a href="watercolor/#10/37.7682/-122.4451" class="map span3"
data-provider="watercolor"
data-center="37.7682,-122.4451"
data-zoom="9"></a>
<div class="span6">
<h3><a class="hashish" href="watercolor/">Watercolor</a></h3>
<p>Reminiscent of hand drawn maps, our watercolor maps apply
raster effect area washes and organic edges over a paper texture
to add warm pop to any map. Watercolor was inspired by the
<a href="http://www.kickstarter.com/projects/bicycleportraits/bicycle-portraits-a-photographic-book-part-iii-fin">Bicycle Portraits project</a>.
Thanks to <a href="http://otherthings.com/blog/">Cassidy Curtis</a> for his early advice.</p>
<p><strong>Available worldwide.</strong></p>
</div>
<div class="span3">
<ul>
<li><a href="http://citytracking.org/talking-maps/">Read about it</a></li>
</ul>
</div>
</div>
<div id="burningmap" class="tiles row">
<a href="burningmap/#10/37.7682/-122.4451" class="span3"><img
src="images/burningmap.gif" alt="Really hot heatmaps"></a>
<div class="span6">
<h3><a class="hashish" href="burningmap/">Burning Map</a></h3>
<p>The roof, the roof, the roof is on fire! These "heat
maps" use <a href="toner-lines/">toner-lines</a> as the
foundation on which to draw fiery animations. It's our way
of showing that maps don't have to lie still on the screen
anymore, and that we can use the whole world as a canvas
for interaction and movement.</p>
<p><strong>Requires a WebGL-enabled browser, such as <a href="http://google.com/chrome">Google Chrome</a>.</strong></p>
</div>
<div class="span3">
<ul>
<!-- <li><a href="#">Read about it</a></li> -->
</ul>
</div>
</div>
<div id="trees-cabs-crime" class="tiles row">
<a href="trees-cabs-crime/" class="map span3"
data-provider="trees-cabs-crime"
data-center="37.770,-122.425"
data-zoom="13"></a>
<div class="span6">
<h3><a href="trees-cabs-crime/">Trees, Cabs & Crime</a></h3>
<p>Trees, Cabs & Crime started off as a weekend hack
and ended up in the Venice Biennale. This map uses
combines three data sets (street tree locations, taxi cab
GPS positions, and crime reports) with
subtractive blending to reveal halftones hidden in the
urban fabric of San Francisco.</p>
<p><strong>Available in San Francisco, California.</strong></p>
</div>
<div class="span3">
<ul>
<li><a href="http://content.stamen.com/trees-cabs-crime_in_venice">Read about it</a></li>
</ul>
</div>
</div>
<div id="howto">
<h2>How to Use These Tiles Elsewhere</h2>
<div id="license" class="row">
<h4 class="span2"><a
href="http://creativecommons.org/licenses/by/3.0"><img
src="http://i.creativecommons.org/l/by/3.0/88x31.png"
alt="CC-BY License"></a></h4>
<div class="span10">
<p><em>Except otherwise noted, each of these map tile sets are © Stamen Design, under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution (CC BY 3.0)</a> license.</em></p>
<p>We’d love to see these maps used around the web, so we’ve included some brief instructions to help you use them in the mapping system of your choice.
These maps are available free of charge. If you use the tiles we host here, please use this attribution:</p>
</div>
</div>
<div id="attribution" class="row">
<h4 class="span2">Attribution:</h4>
<div class="span10">
<p>
<span id="attr">Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.</span>
<small><a href="#" id="attr-show-html" ><<span>COPY HTML</span>></a></small>
</p>
<textarea rows="3" class="row span10" id="attr-html"></textarea>
<script type="text/javascript">
(function() {
var link = document.getElementById("attr-show-html"),
source = document.getElementById("attr"),
target = document.getElementById("attr-html"),
showing = false;
MM.addEvent(link, "click", function(e) {
showing = !showing;
if (showing) {
target.value = source.innerHTML;
target.style.display = "block";
target.focus();
target.select();
} else {
target.style.display = "none";
}
return MM.cancelEvent(e);
});
})();
</script>
<p>If you roll your own tiles from another source you will still need to credit “Map data by OpenStreetMap, under CC-BY-SA.”
And if you <em>do</em> use these maps elsewhere, please post a tweet to <a href="http://twitter.com/stamen">@stamen</a>!</p>
</div>
</div>
<div class="usage" id="usage-js">
<h3>JavaScript Libraries</h3>
<div id="usage-intro" class="row">
<div class="span12">
<p>To use these tiles, just include
<a href="js/tile.stamen.js?v1.2.0">our JavaScript</a>
alongside your favorite mapping library:</p>
<pre class="prettyprint"><script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.0"></script></pre>
<p>Then, follow the instructions below for your preferred library:</p>
</div>
</div>
<div id="usage-modestmaps">
<h4><a href="http://github.com/modestmaps/modestmaps-js">ModestMaps</a></h4>
<div class="row">
<p class="span4">ModestMaps is a no-frills mapping library by Stamen and friends.
View the <a href="test/modestmaps.html">example</a>.</p>
<div class="span8">
<pre class="prettyprint">// replace "toner" here with "terrain" or "watercolor"
var layer = new MM.StamenTileLayer("toner");
var map = new MM.Map("element_id", layer);
map.setCenterZoom(new MM.Location(37.7, -122.4), 12);</pre>
</div>
</div>
</div>
<div id="usage-leaflet">
<h4><a href="http://leaflet.cloudmade.com/">Leaflet</a></h4>
<div class="row">
<p class="span4">Leaflet is a lightweight and easy-to-use library by <a href="http://cloudmade.com">Cloudmade</a>.
View the <a href="test/leaflet.html">example</a>.</p>
<div class="span8">
<pre class="prettyprint">// replace "toner" here with "terrain" or "watercolor"
var layer = new L.StamenTileLayer("toner");
var map = new L.Map("element_id", {
center: new L.LatLng(37.7, -122.4),
zoom: 12
});
map.addLayer(layer);</pre>
</div>
</div>
</div>
<div id="usage-openlayers">
<h4><a href="http://openlayers.org/">OpenLayers</a></h4>
<div class="row">
<p class="span4">OpenLayers is a hefty and featureful mapping library for use with a variety of GIS applications.
View the <a href="test/openlayers.html">example</a>.</p>
<div class="span8">
<pre class="prettyprint">// replace "toner" here with "terrain" or "watercolor"
var layer = new OpenLayers.Layer.Stamen("toner");
var map = new OpenLayers.Map("element_id");
map.addLayer(layer);</pre>
</div>
</div>
</div>
<div id="usage-google">
<h4><a href="http://code.google.com/apis/maps/documentation/javascript/">Google Maps</a></h4>
<div class="row">
<p class="span4">The Google Maps API is ubiquitous and feature-rich, but requires an <a href="#">API key</a> and may <a href="http://code.google.com/apis/maps/faq.html#usage_pricing">cost money</a> if your usage exceeds 25,000 map views per day.
View the <a href="test/google.html">example</a>.</p>
<div class="span8">
<pre class="prettyprint">// replace "toner" here with "terrain" or "watercolor"
var layer = "toner";
var map = new google.maps.Map(document.getElementById("element_id"), {
center: new google.maps.LatLng(37.7, -122.4),
zoom: 12,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));</pre>
</div>
</div>
</div>
</div>
<div class="usage" id="usage-iphone">
<h3>On Your iPhone</h3>
<p><a href="http://itunes.apple.com/us/app/openmaps/id359719250">OpenMaps</a>
is a free iPhone application from IZE, Ltd. that can display
map tiles from sources you configure.</p>
<p>Under <strong>Settings → Type → Edit</strong>,
add a new map type and enter one of these values:</p>
<ul>
<li><tt>http://tile.stamen.com/toner/<zoom>/<x>/<y>.png</tt></li>
<li><tt>http://tile.stamen.com/terrain/<zoom>/<x>/<y>.jpg</tt></li>
<li><tt>http://tile.stamen.com/watercolor/<zoom>/<x>/<y>.jpg</tt></li>
</ul>
</div>
</div>
<div id="footer" class="row light">
<p id="credit" class="span9 light">These tiles are made available as part of the
<a href="http://citytracking.org">CityTracking</a> project,
funded by the <a href="http://www.knightfoundation.org/">Knight Foundation</a>,
in which Stamen is building web services and
<a href="http://github.com/Citytracking">open source tools</a>
to display public data in easy-to-understand, highly visual ways.</p>
<div id="logo" class="span3">
<a href="http://citytracking.org"><img src="images/citytracking-logo.png" alt="CityTracking"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js?feedback" defer></script>
<!-- google code prettify -->
<script type="text/javascript" defer>prettyPrint();</script>
</body>
</html>