Skip to content

Commit

Permalink
Index is now using Leaflet
Browse files Browse the repository at this point in the history
  • Loading branch information
@sconnelley
sconnelley committed Nov 20, 2014
1 parent 1b987a5 commit 23d3a40
Show file tree
Hide file tree
Showing 4 changed files with 389 additions and 76 deletions.
48 changes: 31 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
<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 src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="js/polyfills.js"></script>
<!--<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.3.0"></script>
<script type="text/javascript" src="js/common.js?recaptcha"></script>
Expand All @@ -20,6 +23,7 @@
@import url(css/bootstrap/bootstrap.css);
@import url(css/screen.css?white-maps);
</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="header" class="navbar">
Expand Down Expand Up @@ -81,16 +85,16 @@ <h2 id="main-title"><a id="main-permalink" class="permalink" href="#"><span clas
data.</p>

<div id="tiles-toner" class="tiles row">
<a href="toner/#14/37.8024/-122.2645" class="map span3"
<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
<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.
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>,
Expand Down Expand Up @@ -119,7 +123,7 @@ <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.
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>,
Expand All @@ -144,7 +148,7 @@ <h3><a class="hashish" href="terrain/">Terrain</a></h3>
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
<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>.
Expand Down Expand Up @@ -179,15 +183,15 @@ <h3><a class="hashish" href="burningmap/">Burning Map</a></h3>
</ul>
</div>
</div>

<div id="mars" class="tiles row">
<a href="mars/" class="span3"><img
src="images/mars-thumbnail.png" alt="Mars!"></a>
<div class="span6">
<h3><a href="mars/">Mars</a>??</h3>
<p>Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an
instrument on the Mars Global Surveyor (MGS), a spacecraft that
was launched on November 7, 1996. The MOLA dataset also
<p>Yes, Mars. The Mars Orbiter Laser Altimeter, or MOLA, is an
instrument on the Mars Global Surveyor (MGS), a spacecraft that
was launched on November 7, 1996. The MOLA dataset also
contains height data, which we've made into a 3D contour map.</p>

<p><strong>Requires a WebGL-enabled browser, such as <a href="http://google.com/chrome">Google Chrome</a>.</strong></p>
Expand All @@ -198,7 +202,7 @@ <h3><a href="mars/">Mars</a>??</h3>
<li><a href="http://mola.gsfc.nasa.gov/">MOLA at NASA</a></li>
</ul>
</div>
</div>
</div>

<div id="trees-cabs-crime" class="tiles row">
<a href="trees-cabs-crime/" class="map span3"
Expand All @@ -208,7 +212,7 @@ <h3><a href="mars/">Mars</a>??</h3>
<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
and ended up in the Venice Biennale. This map
combines three data sets (street tree locations, taxi cab
GPS positions, and crime reports) with
subtractive blending to reveal halftones hidden in the
Expand Down Expand Up @@ -253,7 +257,11 @@ <h4 class="span2">Attribution:</h4>
source = document.getElementById("toner-attr"),
target = document.getElementById("toner-attr-html"),
showing = false;
MM.addEvent(link, "click", function(e) {


link.addEventListener("click", function(e){
e.preventDefault();

showing = !showing;
if (showing) {
target.value = source.innerHTML;
Expand All @@ -263,7 +271,8 @@ <h4 class="span2">Attribution:</h4>
} else {
target.style.display = "none";
}
return MM.cancelEvent(e);

return false;
});
})();
</script>
Expand All @@ -279,7 +288,10 @@ <h4 class="span2">Attribution:</h4>
source = document.getElementById("attr"),
target = document.getElementById("attr-html"),
showing = false;
MM.addEvent(link, "click", function(e) {

link.addEventListener("click", function(e){
e.preventDefault();

showing = !showing;
if (showing) {
target.value = source.innerHTML;
Expand All @@ -289,8 +301,10 @@ <h4 class="span2">Attribution:</h4>
} else {
target.style.display = "none";
}
return MM.cancelEvent(e);

return false;
});

})();
</script>
<p>If you roll your own tiles from another source you will still need to credit &ldquo;Map data by OpenStreetMap, under ODbL.&rdquo;
Expand Down Expand Up @@ -344,7 +358,7 @@ <h4><a href="http://leaflet.cloudmade.com/">Leaflet</a></h4>

<div id="usage-openlayers">
<h4><a href="http://openlayers.org/">OpenLayers</a></h4>
<div class="row">
<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">
Expand Down
Loading

0 comments on commit 23d3a40

Please sign in to comment.