Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
372 lines (339 sloc) 20.3 KB
<!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">&#x21F2;</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">&minus;</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&rsquo;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 &amp; Crime</a></h3>
<p>Trees, Cabs &amp; 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 &copy; 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&rsquo;d love to see these maps used around the web, so we&rsquo;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" >&lt;<span>COPY HTML</span>&gt;</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 &ldquo;Map data by OpenStreetMap, under CC-BY-SA.&rdquo;
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">&lt;script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.0"&gt;&lt;/script&gt;</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 &#x2192; Type &#x2192; Edit</strong>,
add a new map type and enter one of these values:</p>
<ul>
<li><tt>http://tile.stamen.com/toner/&lt;zoom&gt;/&lt;x&gt;/&lt;y&gt;.png</tt></li>
<li><tt>http://tile.stamen.com/terrain/&lt;zoom&gt;/&lt;x&gt;/&lt;y&gt;.jpg</tt></li>
<li><tt>http://tile.stamen.com/watercolor/&lt;zoom&gt;/&lt;x&gt;/&lt;y&gt;.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>