Describe tiles.

simplegeo · Aug 14, 2010 · e098c8c · e098c8c
1 parent 359e00d
commit e098c8c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/www/ex/blue-marble.m4 b/www/ex/blue-marble.m4
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <title>Polymaps - NASA Blue Marble</title>
+    <title>Polymaps - Blue Marble</title>
     <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
     <script type="text/javascript" src="../polymaps.min.js?1.6.0"></script>
     <script type="text/javascript" src="../nns.min.js?1.1.0"></script>

diff --git a/www/ex/grid.m4 b/www/ex/grid.m4
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <title>Polymaps - Grid</title>
+    <title>Polymaps - Lat-Lon Grid</title>
     <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
     <script type="text/javascript" src="../polymaps.min.js?1.6.0"></script>
     <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
@@ -48,6 +48,26 @@
       </div>
       <div class="span-18 last">
 
+        <h2>Lat-Lon Grid</h2>
+
+        <p>The built-in <tt>grid</tt> control draws lines of constant latitude
+        and longitude over the map. The grid reveals that the spherical mercator
+        projection is cylindrical: longitudes are uniformly spaced. <a
+        href="javascript:map.zoom(1.51);">Zoom out</a> to see the exaggeration of
+        latitudes near the poles caused by the log-tan transform.</p>
+
+        <p>The lines are subdivided as you zoom in to maintain constant apparent
+        density&mdash;useful for debugging tiles! A future enhancement of this
+        control might display proper major and minor ticks, as well as labels to
+        show the visible latitudes and longitudes.</p>
+
+        <p>The map background is an <a href="../docs/#image">image</a>
+        layer from <a href="http://www.cloudmade.com/">CloudMade</a>. Register
+        a <a href="http://cloudmade.com/register">developer account</a> with
+        CloudMade for your own API key.</p>
+
+        <h3>Source Code</h3>
+
 m4_include(`../../examples/grid/grid.js.html')
 
       </div>

diff --git a/www/ex/index.html b/www/ex/index.html
@@ -272,10 +272,12 @@ <h4><a href="overlay.html">Image Overlay</a></h4>
         </div>
         <div class="span-11 last">
           <h4><a href="grid.html">Lat-Lon Grid</a></h4>
-          Lorem Ipsum is simply dummy text of the printing and typesetting
-          industry. Lorem Ipsum has been the industry's standard dummy text
-          ever since the 1500s, when an unknown printer took a galley of type
-          and scrambled it to make a type specimen book.
+
+          <p>The built-in <tt>grid</tt> control draws lines of constant latitude
+          and longitude over the map. The grid reveals that the spherical
+          mercator projection is cylindrical: longitudes are uniformly
+          spaced. The lines are subdivided as you zoom in to maintain constant
+          density.</p>
         </div>
 
         <hr class="space"/>
@@ -287,10 +289,11 @@ <h4><a href="grid.html">Lat-Lon Grid</a></h4>
         </div>
         <div class="span-11 last">
           <h4><a href="tiles.html">Tile Grid</a></h4>
-          Lorem Ipsum is simply dummy text of the printing and typesetting
-          industry. Lorem Ipsum has been the industry's standard dummy text
-          ever since the 1500s, when an unknown printer took a galley of type
-          and scrambled it to make a type specimen book.
+
+          <p>Use this lightweight layer implementation to explore the tile
+          grid. Polymaps uses a polygon-fill algorithm to determine exactly
+          which tiles are visible, given arbitrary zooming, panning and affine
+          transforms.</p>
         </div>
 
         <hr class="space"/>

diff --git a/www/ex/tiles.m4 b/www/ex/tiles.m4
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <title>Polymaps - Tiles</title>
+    <title>Polymaps - Tile Grid</title>
     <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
     <script type="text/javascript" src="../polymaps.min.js?1.6.0"></script>
     <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
@@ -51,6 +51,36 @@
       <hr class="space"/>
       <div class="span-18 prepend-6 last">
 
+        <h2>Tile Grid</h2>
+
+        <p>Use this lightweight layer implementation to explore the tile
+        grid. Polymaps uses
+        a <a href="http://en.wikipedia.org/wiki/Scanline_rendering">polygon-fill
+        algorithm</a> to determine exactly which tiles are visible, given
+        arbitrary zooming, panning and affine transforms.</p>
+
+        <p>As you pan and zoom with the mouse, watch how tiles outside the
+        viewport (the red border) are removed. Tiles that come into view are
+        dynamically generated and cached using the layer. Use the 'A' and 'D'
+        keys to rotate the map!</p>
+
+      </div>
+      <hr class="space"/>
+      <div id="copy" class="span-5 append-1">
+
+        <p>The tile overlay is implemented using an anonymous subclass
+        of <tt>po.layer</tt></a>, which delegates tile creation to
+        the <tt>grid</tt> method. You can copy-and-paste this lightweight layer
+        implementation into your own example for debugging!</p>
+
+        <p>The <tt>resize</tt> method isn&rsquo;t strictly needed for this
+        example, but we wanted to show how Polymaps recomputes the visible tiles
+        as the map changes size.</p>
+
+      </div>
+      <div class="span-18 last">
+        <h3>Source Code</h3>
+
 m4_include(`../../examples/grid/tiles.js.html')
 
       </div>