Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' of github.com:simplegeo/polymaps

  • Loading branch information...
commit a7fb3ace927cfea74f4f0386fb3d2a05aaab5790 2 parents 9ff7032 + dfd5375
@mbostock mbostock authored
Showing with 49 additions and 6,713 deletions.
  1. +1 −141 Makefile
  2. +48 −48 README.mkd
  3. +0 −3  www/.htaccess
  4. +0 −37 www/Logo.java
  5. +0 −134 www/docs/arrow.html
  6. +0 −147 www/docs/cache.html
  7. +0 −212 www/docs/compass.html
  8. +0 −138 www/docs/dblclick.html
  9. +0 −154 www/docs/dispatch.html
  10. +0 −116 www/docs/drag.html
  11. +0 −216 www/docs/geoJson.html
  12. +0 −123 www/docs/grid.html
  13. +0 −123 www/docs/hash.html
  14. +0 −131 www/docs/image.html
  15. +0 −437 www/docs/index.html
  16. +0 −118 www/docs/interact.html
  17. +0 −347 www/docs/layer.html
  18. +0 −536 www/docs/map.html
  19. +0 −96 www/docs/ns.html
  20. +0 −137 www/docs/queue.html
  21. +0 −173 www/docs/stylist.html
  22. +0 −93 www/docs/svg.html
  23. +0 −137 www/docs/transform.html
  24. +0 −117 www/docs/url.html
  25. +0 −163 www/docs/wheel.html
  26. +0 −69 www/download.html
  27. BIN  www/ex/bing-m.png
  28. BIN  www/ex/bing-s.png
  29. +0 −91 www/ex/bing.m4
  30. BIN  www/ex/blue-marble-m.png
  31. BIN  www/ex/blue-marble-s.png
  32. +0 −83 www/ex/blue-marble.m4
  33. BIN  www/ex/cluster-m.png
  34. BIN  www/ex/cluster-s.png
  35. +0 −101 www/ex/cluster.m4
  36. BIN  www/ex/flickr-m.png
  37. BIN  www/ex/flickr-s.png
  38. +0 −79 www/ex/flickr.m4
  39. +0 −88 www/ex/fullscreen.js
  40. BIN  www/ex/grid-m.png
  41. BIN  www/ex/grid-s.png
  42. +0 −88 www/ex/grid.m4
  43. +0 −343 www/ex/index.html
  44. BIN  www/ex/mandelbrot-m.png
  45. +0 −81 www/ex/mandelbrot.m4
  46. BIN  www/ex/midnight-commander-m.png
  47. BIN  www/ex/midnight-commander-s.png
  48. +0 −86 www/ex/midnight-commander.m4
  49. BIN  www/ex/overlay-m.png
  50. BIN  www/ex/overlay-s.png
  51. +0 −88 www/ex/overlay.m4
  52. BIN  www/ex/pale-dawn-m.png
  53. BIN  www/ex/pale-dawn-s.png
  54. +0 −79 www/ex/pale-dawn.m4
  55. BIN  www/ex/population-m.png
  56. BIN  www/ex/population-s.png
  57. +0 −119 www/ex/population.m4
  58. BIN  www/ex/shadow-m.png
  59. BIN  www/ex/shadow-s.png
  60. +0 −105 www/ex/shadow.m4
  61. BIN  www/ex/statehood-m.png
  62. BIN  www/ex/statehood-s.png
  63. +0 −113 www/ex/statehood.m4
  64. BIN  www/ex/streets-m.png
  65. BIN  www/ex/streets-s.png
  66. +0 −112 www/ex/streets.m4
  67. BIN  www/ex/tiles-m.png
  68. BIN  www/ex/tiles-s.png
  69. +0 −101 www/ex/tiles.m4
  70. BIN  www/ex/transform-m.png
  71. BIN  www/ex/transform-s.png
  72. +0 −103 www/ex/transform.m4
  73. BIN  www/ex/unemployment-m.png
  74. BIN  www/ex/unemployment-s.png
  75. +0 −125 www/ex/unemployment.m4
  76. BIN  www/ex/world-m.png
  77. BIN  www/ex/world-s.png
  78. +0 −119 www/ex/world.m4
  79. BIN  www/forkme.png
  80. BIN  www/git-16x16.png
  81. +0 −102 www/index.html
  82. +0 −65 www/logo-big.js
  83. BIN  www/logo-big.png
  84. +0 −45 www/logo-small.js
  85. BIN  www/logo-small.png
  86. +0 −9 www/m4d.sh
  87. +0 −242 www/style.css
  88. BIN  www/zip-128x128.png
  89. BIN  www/zip-16x16.png
View
142 Makefile
@@ -27,119 +27,6 @@ JS_COMPILER = \
java -jar lib/google-compiler/compiler-20100616.jar \
--charset UTF-8
-WWW_FILES = \
- polymaps.min.js \
- lib/nns/nns.min.js \
- lib/blueprint/screen.css \
- lib/modernizr/modernizr.min.js \
- lib/colorbrewer/colorbrewer.css \
- lib/protovis/protodata.min.js \
- www/.htaccess \
- www/index.html \
- www/download.html \
- www/forkme.png \
- www/git-16x16.png \
- www/zip-16x16.png \
- www/zip-128x128.png \
- www/logo-big.js \
- www/logo-big.png \
- www/logo-small.js \
- www/logo-small.png \
- www/style.css
-
-WWW_EX_FILES = \
- examples/canvas/procedural.js \
- examples/canvas/mandelbrot-worker.js \
- examples/cluster/kmeans.js \
- examples/overlay/sf1906.png \
- examples/population/population.css \
- examples/statehood/fips.js \
- examples/streets/streets.json \
- examples/tilestache/dot.gif \
- examples/transform/nypl.js \
- examples/unemployment/unemployment-data.js \
- examples/world/internet.tsv \
- examples/world/population.tsv \
- examples/world/tsv.js \
- examples/world/world.json \
- www/ex/index.html \
- www/ex/bing.html \
- www/ex/bing-s.png \
- www/ex/bing-m.png \
- www/ex/blue-marble.html \
- www/ex/blue-marble-s.png \
- www/ex/blue-marble-m.png \
- www/ex/cluster.html \
- www/ex/cluster-s.png \
- www/ex/cluster-m.png \
- www/ex/flickr.html \
- www/ex/flickr-s.png \
- www/ex/flickr-m.png \
- www/ex/grid.html \
- www/ex/grid-s.png \
- www/ex/grid-m.png \
- www/ex/mandelbrot.html \
- www/ex/mandelbrot-m.png \
- www/ex/midnight-commander.html \
- www/ex/midnight-commander-s.png \
- www/ex/midnight-commander-m.png \
- www/ex/overlay.html \
- www/ex/overlay-s.png \
- www/ex/overlay-m.png \
- www/ex/pale-dawn.html \
- www/ex/pale-dawn-s.png \
- www/ex/pale-dawn-m.png \
- www/ex/population.html \
- www/ex/population-s.png \
- www/ex/population-m.png \
- www/ex/shadow.html \
- www/ex/shadow-s.png \
- www/ex/shadow-m.png \
- www/ex/statehood.html \
- www/ex/statehood-s.png \
- www/ex/statehood-m.png \
- www/ex/streets.html \
- www/ex/streets-s.png \
- www/ex/streets-m.png \
- www/ex/tiles.html \
- www/ex/tiles-s.png \
- www/ex/tiles-m.png \
- www/ex/transform.html \
- www/ex/transform-s.png \
- www/ex/transform-m.png \
- www/ex/unemployment.html \
- www/ex/unemployment-s.png \
- www/ex/unemployment-m.png \
- www/ex/world.html \
- www/ex/world-s.png \
- www/ex/world-m.png
-
-WWW_DOCS_FILES = \
- www/docs/arrow.html \
- www/docs/cache.html \
- www/docs/compass.html \
- www/docs/dblclick.html \
- www/docs/dispatch.html \
- www/docs/drag.html \
- www/docs/geoJson.html \
- www/docs/grid.html \
- www/docs/hash.html \
- www/docs/image.html \
- www/docs/index.html \
- www/docs/interact.html \
- www/docs/layer.html \
- www/docs/map.html \
- www/docs/ns.html \
- www/docs/queue.html \
- www/docs/stylist.html \
- www/docs/svg.html \
- www/docs/transform.html \
- www/docs/url.html \
- www/docs/wheel.html
-
-PYGMENT = /Library/Pygments-1.3.1/pygmentize
-PYGMENT_STYLE = trac
-
all: polymaps.min.js polymaps.js
%.min.js: %.js
@@ -154,32 +41,5 @@ polymaps.js: $(JS_FILES) Makefile
cat $(JS_FILES) >> $@
chmod a-w $@
-%.d: %.m4 Makefile www/m4d.sh
- @www/m4d.sh $< > $@
-
-%.d: %.html
- @touch $@
-
--include $(patsubst %.html,%.d,$(filter %.html,$(WWW_EX_FILES)))
-
-html: $(WWW_FILES) $(WWW_EX_FILES) $(WWW_DOCS_FILES) Makefile
- rm -rf $@
- mkdir $@ $@/ex $@/docs
- cp $(WWW_FILES) $@
- cp $(WWW_EX_FILES) $@/ex
- cp $(WWW_DOCS_FILES) $@/docs
-
-%.html: %.m4 Makefile
- rm -f $@
- cd $(dir $<) && m4 -P < $(notdir $<) > $(notdir $@)
- chmod a-w $@
-
-%.js.html: %.js Makefile
- $(PYGMENT) -f html -O cssclass=syntax,style=$(PYGMENT_STYLE) -l js $(filter %.js,$^) > $@
-
-%.js.txt: %.js Makefile
- cat $(filter %.js,$^) > $@
-
clean:
- rm -rf polymaps.js polymaps.min.js html
- rm -f $(patsubst %.html,%.d,$(filter %.html,$(WWW_EX_FILES)))
+ rm -rf polymaps.js polymaps.min.js
View
96 README.mkd
@@ -1,65 +1,65 @@
- _ _ | _ _ _ _ _
- |_)(_)|\/| | |(_||_)_\
- | / |
+# Polymaps
-Polymaps is a BSD-licensed display and interaction library for tile-based vector
-and raster maps using SVG and Javascript.
+Polymaps is a free JavaScript library for making dynamic, interactive maps in
+modern web browsers. See <http://polymaps.org> for more details.
-Our intent is to provide a minimal, extensible, customizable, and free display
-library for discriminating designers and developers who want to use interactive
-maps in their own projects. Polymaps provides a core set of features in a tight,
-clean package, with plenty of hooks for additional functionality.
+This is the `master` branch, which contains the Polymaps source code. If
+you're looking for the Polymaps website, you should checkout the `gh-pages`
+branch instead.
+## Viewing Examples
-CAVEATS, FEATURE REQUESTS AND KNOWN BUGS
+You'll find lots of Polymaps examples in the suitably-named `examples`
+directory. Open any of the HTML files there in your browser to view the
+examples, or open them in your text editor of choice to view the source. Most
+of the examples are replicated on the [Polymaps website](http://polymaps.org),
+though a few of them are only visible locally.
-Browser Support:
+Some of the examples depend on third-party libraries, such as jQuery. These
+third-party libraries are not required to use Polymaps but can certainly make
+it easier! All third-party libraries should be stored in the `lib` directory,
+with an associated `LICENSE` file and optional `README`.
-- Tested in recent Webkit browsers (Safari 4+, Chrome 6, Webkit nightlies)
-- Tested in recent Firefox browsers (3.6+)
-- Optimistic about Opera, IE9, but not part of core testing yet.
-- SVG is *required*, even for image display...
- - in other words: if you can't require SVG, don't use Polymaps!
+## Filing Bugs
-Features:
+We use GitHub to track issues with Polymaps. You can search for existing
+issues, and file new issues, here:
-- Vector overlays in GeoJSON format are supported, both tiled and single file
-- Image layers in Google-y spherical mercator format are supported
-- There are *no default markers* or infobubbles (yet?)
+ <http://github.com/simplegeo/polymaps/issues>
-API:
+You are welcome to file issues either for bugs in the source code, feature
+requests, or issues with the Polymaps website.
-- No defensive copying (on input or output).
-- No type coercion (e.g., String -> Number for zoom).
-- Using == instead of ===.
-- Many properties cannot be changed after load (e.g., tile size, URL).
-- No (easy) way to lookup a GeoJSON elements by feature id.
-- Missing in-code documentation, API reference.
-- Include support (not just examples) for TileCache, TileStache, Bing?
+## Support
-Events:
+If you have questions or problems regarding Polymaps, you can get help by
+joining the `#polymaps` IRC channel on irc.freenode.net. You are also welcome
+to send GitHub messages or tweets to `mbostock`.
-- "move" event does not distinguish zoom / pan / zoom+pan events.
-- "show" events are not supported on image tiles.
-- There are no corresponding "unload" or "hide" events.
-- There is no "error" event if a tile fails to load.
-- Arrow control pans three times for two keydowns.
+## Build Instructions
-Sizing:
+You do not need to build Polymaps in order to view the examples; a compiled
+copy of Polymaps (`polymaps.js` and `polymaps.min.js`) is included in the
+repository.
-- Maps with no explicit size are auto-resized on window resize;
- - This may miss resize based on DOM changes (e.g., element removal).
- - This may generate spurious resize events for fixed-size parents.
-- If the map is bigger than its parent, tiles are not automatically clipped.
+To edit and build a new version of Polymaps, you must first install Java and
+GNU Make. If you are on Mac OS X, you can install Make as part of the UNIX
+tools included with
+[XCode](http://developer.apple.com/technologies/xcode.html). Once you've setup
+your development environment, you can rebuild Polymaps by running the
+following command from the repo's root directory:
-Tiles:
+ make
-- Assumes Mercator projection, with Google-y transform.
-- Anti-aliasing artifacts are visible with smooth zooming / rescaled tiles.
-- When translucent tiles are rescaled, they can overlap with other resolutions.
-
-Queue:
-
-- Should prioritize tile requests from the center out.
-- Create host-specific queues to allow more than 6 simultaneous requests?
+The Polymaps build process is exceptionally simple. First, all the JavaScript
+files are concatenated (using `cat`); the order of files is important to
+preserve dependencies. This produces the file `polymaps.js`. Second, this file
+is put through Google's [Closure
+Compiler](http://code.google.com/closure/compiler/) to minify the JavaScript,
+resulting in a smaller `polymaps.min.js`.
+If you are doing development, it is highly recommended that you use the
+non-minified JavaScript for easier debugging. The minified JavaScript is only
+intended for production, where file size matters. Note that the development
+version is marked as read-only so that you don't accidentally overwrite your
+edits after a re-build.
View
3  www/.htaccess
@@ -1,3 +0,0 @@
-<FilesMatch "\\.(js|json|html|css|tsv)$">
-SetOutputFilter DEFLATE
-</FilesMatch>
View
37 www/Logo.java
@@ -1,37 +0,0 @@
-import java.awt.Font;
-import java.awt.Graphics2D;
-import java.awt.Shape;
-import java.awt.font.FontRenderContext;
-import java.awt.font.GlyphVector;
-import java.awt.geom.PathIterator;
-import java.awt.image.BufferedImage;
-
-public class Logo {
- public static void main(String[] args) {
- String fontName = args.length > 0 ? args[0] : "Helvetica Neue";
- int fontSize = args.length > 1 ? Integer.parseInt(args[1]) : 162;
- String string = "Polymaps";
-
- Font f = new Font(fontName, Font.BOLD, fontSize);
- BufferedImage b = new BufferedImage(500, 500, BufferedImage.TYPE_INT_RGB);
- Graphics2D g = b.createGraphics();
- GlyphVector v = f.createGlyphVector(g.getFontRenderContext(), string);
- for (int i = 0; i < string.length(); i++) {
- Shape s = v.getGlyphOutline(i);
- PathIterator pi = s.getPathIterator(null);
- while (!pi.isDone()) {
- float[] c = new float[6];
- switch (pi.currentSegment(c)) {
- case PathIterator.SEG_CLOSE: System.out.print("Z"); break;
- case PathIterator.SEG_QUADTO: System.out.print("Q" + c[0] + "," + c[1] + " " + c[2] + "," + c[3]); break;
- case PathIterator.SEG_LINETO: System.out.print("L" + c[0] + "," + c[1]); break;
- case PathIterator.SEG_MOVETO: System.out.print("M" + c[0] + "," + c[1]); break;
- case PathIterator.SEG_CUBICTO: System.out.print("C" + c[0] + "," + c[1] + " " + c[2] + "," + c[3] + " " + c[4] + "," + c[5]); break;
- }
- pi.next();
- }
- System.out.println("");
- }
- System.out.flush();
- }
-}
View
134 www/docs/arrow.html
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - arrow</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a class="active" href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>arrow</h2>
-
- <div class="span-4">
- <a href="#po.arrow">arrow</a><br>
- </div>
-
- <div class="span-4">
- <a href="#map">map</a><br>
- </div>
-
- <div class="span-4">
- <a href="#speed">speed</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.arrow">
- <dt>
- <i>po</i>.<b>arrow</b>()
- </dt>
- <dd>
- Constructs an arrow control with default settings. The arrow control
- provides key listeners for the arrow keys for panning, and the plus
- and minus keys for zooming. The arrow control allows multiple keys
- to be pressed simultaneously; for example, the pressing the left and
- down arrows simultaneously will cause the map to pan diagonally.
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>arrow</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a> method and <a
- href="map.html#remove">remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified map.
- If no arguments are specified, this method returns the current map,
- which may be null. Whew!</p>
- </dd>
- </dl>
-
- <dl class="function" id="speed">
- <dt>
- <i>arrow</i>.<b>speed</b>([<i>x</i>])
- </dt>
- <dd>
- Sets or gets the pan speed. If the argument <i>x</i> is specified,
- this method sets the pan speed to the given pixel amount and
- returns <tt>this</tt>. If no arguments are specified, this method
- returns the current pan speed, which defaults to 16.
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
147 www/docs/cache.html
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - cache</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a class="active" href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>cache</h2>
-
- <div class="span-4">
- <a href="#po.cache">cache</a><br>
- <a href="#load">load</a><br>
- </div>
-
- <div class="span-4">
- <a href="#locks">locks</a><br>
- <a href="#peek">peek</a><br>
- </div>
-
- <div class="span-4">
- <a href="#size">size</a><br>
- <a href="#unload">unload</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.cache">
- <dt>
- <i>po</i>.<b>cache</b>(<i>l</i>[, <i>u</i>])
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- <dl class="function" id="peek">
- <dt>
- <i>cache</i>.<b>peek</b>(<i>c</i>)
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- <dl class="function" id="load">
- <dt>
- <i>cache</i>.<b>load</b>(<i>c</i>, <i>p</i>)
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- <dl class="function" id="unload">
- <dt>
- <i>cache</i>.<b>unload</b>(<i>k</i>)
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- <dl class="function" id="locks">
- <dt>
- <i>cache</i>.<b>locks</b>()
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- <dl class="function" id="size">
- <dt>
- <i>cache</i>.<b>size</b>([<i>x</i>])
- </dt>
- <dd>
- &hellip;
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
212 www/docs/compass.html
@@ -1,212 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - compass</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a class="active" href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>compass</h2>
-
- <div class="span-4">
- <a href="#po.compass">compass</a><br>
- <a href="#map">map</a><br>
- </div>
-
- <div class="span-4">
- <a href="#pan">pan</a><br>
- <a href="#position">position</a><br>
- </div>
-
- <div class="span-4">
- <a href="#radius">radius</a><br>
- <a href="#speed">speed</a><br>
- </div>
-
- <div class="span-4">
- <a href="#zoom">zoom</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.compass">
- <dt>
- <i>po</i>.<b>compass</b>()
- </dt>
- <dd>
- <p>Constructs a compass control with default settings. The compass
- control provides a user interface widget for panning and zooming as
- an alternative to mouse and keyboard controls. The compass also
- provides shift-drag support for zooming to a given extent.</p>
-
- <p>The compass is not part of the standard set of interaction
- controls (see <a href="interact.html"><tt><i>po</i>.interact</tt></a
- >). The compass control is rendered using SVG elements and must be
- styled through CSS. An <a href="http://github.com/simplegeo/polymaps/blob/master/examples/example.css"
- >example stylesheet</a> is available in the Git repository.</p>
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>compass</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a>
- and <a href="map.html#remove" >remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified
- map. If no arguments are specified, this method returns the current
- map, which may be null. Whew!</p>
-
- <p>Compass controls should be added <em>after</em> any layers so
- that they are visible. If a compass control is added before a layer,
- it will typically be occluded by the layer&rsquo;s tiles.</p>
- </dd>
- </dl>
-
- <dl class="function" id="radius">
- <dt>
- <i>compass</i>.<b>radius</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the radius of the panning controls. If the
- argument <i>x</i> is specified, this method sets the radius to the
- given value (a number of pixels) and returns <tt>this</tt>. If no
- arguments are specified, this method returns the current radius.</p>
-
- <p>If a custom radius is desired, this method must be called before
- the compass control is added to the map. The default radius is 30
- pixels.</p>
- </dd>
- </dl>
-
- <dl class="function" id="position">
- <dt>
- <i>compass</i>.<b>position</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the position of the compass. If the argument <i>x</i>
- is specified, this method sets the position to the given named value
- and returns <tt>this</tt>. If no arguments are specified, this
- method returns the current named position.</p>
-
- <p>The following position names are supported, representing the four
- corners of the map: &ldquo;top-left&rdquo;, &ldquo;top-right&rdquo;,
- &ldquo;bottom-left&rdquo;, &ldquo;bottom-right&rdquo;.</p>
- </dd>
- </dl>
-
- <dl class="function" id="pan">
- <dt>
- <i>compass</i>.<b>pan</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the pan style of the compass. If the argument
- <i>x</i> is specified, this method sets the pan style to the given
- named value and returns <tt>this</tt>. If no arguments are
- specified, this method returns the current named pan style.</p>
-
- <p>The following pan styles are supported: &ldquo;none&rdquo;,
- &ldquo;small&rdquo;.</p>
- </dd>
- </dl>
-
- <dl class="function" id="zoom">
- <dt>
- <i>compass</i>.<b>zoom</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the zoom style of the compass. If the argument
- <i>x</i> is specified, this method sets the zoom style to the given
- named value and returns <tt>this</tt>. If no arguments are
- specified, this method returns the current named zoom style.</p>
-
- <p>The following zoom styles are supported: &ldquo;none&rdquo;,
- &ldquo;small&rdquo;, &ldquo;big&rdquo;.</p>
- </dd>
- </dl>
-
- <dl class="function" id="speed">
- <dt>
- <i>compass</i>.<b>speed</b>([<i>x</i>])
- </dt>
- <dd>
- Sets or gets the pan speed. If the argument <i>x</i> is specified,
- this method sets the pan speed to the given pixel amount and
- returns <tt>this</tt>. If no arguments are specified, this method
- returns the current pan speed, which defaults to 16.
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
138 www/docs/dblclick.html
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - dblclick</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a class="active" href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>dblclick</h2>
-
- <div class="span-4">
- <a href="#po.dblclick">dblclick</a><br>
- </div>
-
- <div class="span-4">
- <a href="#map">map</a><br>
- </div>
-
- <div class="span-4">
- <a href="#zoom">zoom</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.dblclick">
- <dt>
- <i>po</i>.<b>dblclick</b>()
- </dt>
- <dd>
- Constructs a double-click control with default settings. This
- control allows the user to double-click to zoom in on the given
- point, and shift-double-click to zoom out. The double-click snaps to
- the nearest integral zoom level, providing optimal display of tiles.
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>dblclick</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a> method and <a
- href="map.html#remove">remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified map.
- If no arguments are specified, this method returns the current map,
- which may be null. Whew!</p>
- </dd>
- </dl>
-
- <dl class="function" id="zoom">
- <dt>
- <i>dblclick</i>.<b>zoom</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the zoom mode of this control. If the argument
- <i>x</i> is specified, this method sets the zoom mode to the
- given named value and returns <tt>this</tt>. If no arguments are
- specified, this method returns the current named zoom mode.</p>
-
- <p>The following zoom modes are supported: &ldquo;mouse&rdquo;,
- &ldquo;center&rdquo;. The default mode is &ldquo;mouse&rdquo;, which
- causes the control to zoom around the location at the mouse cursor.
- The &ldquo;center&rdquo; mode will zoom around the map center.</p>
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
154 www/docs/dispatch.html
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - dispatch</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a class="active" href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>dispatch</h2>
-
- <div class="span-4">
- <a href="#dispatch">dispatch</a><br>
- </div>
-
- <div class="span-4">
- <a href="#po.dispatch">dispatch</a><br>
- </div>
-
- <div class="span-4">
- <a href="#off">off</a><br>
- </div>
-
- <div class="span-4">
- <a href="#on">on</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.dispatch">
- <dt>
- <i>po</i>.<b>dispatch</b>(<i>o</i>)
- </dt>
- <dd>
- Assigns <a href="#on">on</a> and <a href="#off">off</a> methods to
- the given object, returing a bound <a href="#dispatch">dispatch</a>
- function. The returned function is typically assigned to the
- <tt>dispatch</tt> property of the same object, but this is not
- required.
- </dd>
- </dl>
-
- <dl class="function" id="on">
- <dt>
- <i>dispatch</i>.<b>on</b>(<i>t</i>, <i>f</i>)
- </dt>
- <dd>
- <p>Registers the given event listener <i>f</i> to receive events of
- type <i>t</i>, where <i>f</i> is a function and <i>t</i> is a string;
- returns <tt>this</tt>. When an event of the given type is
- dispatched, any registered listeners will receive the given event as
- a single argument to the function <i>f</i>. The <tt>this</tt>
- context of the function will be this dispatch object.</p>
-
- <p>This method is similar to the W3C-specified <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener"
- >addEventListener</a>.</p>
- </dd>
- </dl>
-
- <dl class="function" id="off">
- <dt>
- <i>dispatch</i>.<b>off</b>(<i>t</i>, <i>f</i>)
- </dt>
- <dd>
- <p>Removes the given event listener <i>f</i> from events of
- type <i>t</i>, where <i>f</i> is a function and <i>t</i> is a
- string; returns <tt>this</tt>. If the listener <i>f</i> is not
- registered to receive events of type <i>t</i> then this method has
- no effect.</p>
-
- <p>This method is similar to the W3C-specified <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-removeEventListener"
- >removeEventListener</a>.</p>
- </dd>
- </dl>
-
- <dl class="function" id="dispatch">
- <dt>
- <i>dispatch</i>.<b>dispatch</b>(<i>e</i>)
- </dt>
- <dd>
- Dispatches the given event <i>e</i> to any registered listeners. The
- event <i>e</i> must have a <tt>type</tt> string attribute, which
- determines which listeners will be notified. This method is
- typically not needed unless implementing a custom layer.
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
116 www/docs/drag.html
@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - drag</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a class="active" href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>drag</h2>
-
- <div class="span-4">
- <a href="#po.drag">drag</a><br>
- </div>
-
- <div class="span-4">
- <a href="#map">map</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.drag">
- <dt>
- <i>po</i>.<b>drag</b>()
- </dt>
- <dd>
- Constructs a drag control with default settings. The drag control
- allows the user to pan the map with the mouse by clicking and
- dragging.
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>drag</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a> method and <a
- href="map.html#remove">remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified map.
- If no arguments are specified, this method returns the current map,
- which may be null. Whew!</p>
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
216 www/docs/geoJson.html
@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - geoJson</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a class="active" href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>geoJson</h2>
-
- <blockquote>Extends
- <a href="layer.html">layer</a>,
- <a href="dispatch.html">dispatch</a>.
- </blockquote>
-
- <div class="span-4">
- <a href="#clip">clip</a><br>
- <a href="#features">features</a><br>
- </div>
-
- <div class="span-4">
- <a href="#po.geoJson">geoJson</a><br>
- <a href="#reshow">reshow</a><br>
- </div>
-
- <div class="span-4">
- <a href="#url">url</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.geoJson">
- <dt>
- <i>po</i>.<b>geoJson</b>([<i>f</i>])
- </dt>
- <dd>
- <p>Constructs a new GeoJSON layer with default settings.</p>
-
- <p>An optional fetch function <i>f</i> may be specified, which
- defaults to <a href="queue.html#po.queue.json"><tt><i>po</i
- >.queue.json</tt></a>. The fetch function takes two arguments:
- the URL to fetch as a string, and a callback function. The fetch
- function must return a request object with an <a
- href="queue.html#request.abort"><tt>abort</tt></a> method. The
- callback function should be invoked with the GeoJSON data when
- available.</p>
-
- <p>The fetch function may be substituted to support GeoJSON
- transcoding. For example, a KML layer might be implemented by
- loading XML, and then converting it into a simplified GeoJSON
- representation.</p>
- </dd>
- </dl>
-
- <dl class="function" id="url">
- <dt>
- <i>geoJson</i>.<b>url</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the URL template associated with this GeoJSON layer.
- If the argument <i>x</i> is specified, this method sets the URL
- template and returns <tt>this</tt>. If no arguments are specified,
- this method returns the current URL template. The default URL
- template is &ldquo;about:blank&rdquo;.</p>
-
- <p>The URL template may be specified either as a string or as a
- function:</p>
-
- <p>If a string, and the string contains placeholders of the form
- &ldquo;{<em>A</em>}&rdquo;, where <em>A</em> is any character, then
- the string is converted into a URL template function using <a
- href="url.html"><tt><i>po</i>.url</tt></a>. If the string does not
- contain placeholders, then it is left as a string, and <a
- href="layer.html#tile">tiling</a> and <a href="#clip">clipping</a>
- are disabled.</p>
-
- <p>If a function, then the given function is invoked, passing in the
- tile coordinate of the GeoJSON file to load. The tile coordinate is
- represented as an object with <tt>row</tt>, <tt>column</tt> and
- <tt>zoom</tt> attributes. The function must return a string
- representing the URL to load. See <a href="url.html"><tt><i>po</i
- >.url</tt></a> for an example implementation.</p>
-
- <p>Note that if the GeoJSON file is not on the same domain, the
- server must specify a suitable <a href="http://www.w3.org/TR/cors/"
- >Access-Control-Allow-Origin</a> header for the data to be
- accessible.</p>
- </dd>
- </dl>
-
- <dl class="function" id="features">
- <dt>
- <i>geoJson</i>.<b>features</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the &ldquo;hard-coded&rdquo; features for this
- GeoJSON layer. If the argument <i>x</i> is specified, this method
- sets the features to the given array of GeoJSON <a
- href="http://geojson.org/geojson-spec.html#feature-objects"
- >feature objects</a> and returns <tt>this</tt>. If no arguments are
- specified, this method returns the current features array, which
- defaults to null.</p>
-
- <p>The purpose of this method is to support non-tiled GeoJSON
- layers that are loaded through external means, such as via <a
- href="http://en.wikipedia.org/wiki/JSON#JSONP">JSONP</a> or directly
- embedded in the HTML. Specifying the features array has the
- additional side-effect of disabling <a href="layer.html#tile"
- >tiling</a> and <a href="#clip">clipping</a>.</p>
- </dd>
- </dl>
-
- <dl class="function" id="clip">
- <dt>
- <i>geoJson</i>.<b>clip</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets whether tiles are clipped. If the boolean argument
- <i>x</i> is specified, the method enables or disables clipping
- accordingly, and returns <tt>this</tt>. If no arguments are
- specified, the method returns true if and only if tiles are
- clipped.</p>
-
- <p>Tiles are clipped by default. Disabling clipping is useful for
- GeoJSON features that may extend beyond the tile boundary, such as
- points.</p>
- </dd>
- </dl>
-
- <h3>Events</h3>
-
- <p>GeoJSON layers use the <a href="dispatch.html">dispatch</a> mechanism
- to notify interested parties of events. In addition to the standard load
- event, GeoJSON layers support the &ldquo;show&rdquo; event that is
- triggered for each tile as it becomes visible. The show event allows
- tiles to be styled dynamically through JavaScript. The <a href="stylist.html"
- >stylist</a> convenience class may be used to simplify implementation of
- load and show event handlers.</p>
-
- <dl class="function" id="reshow">
- <dt>
- <i>geoJson</i>.<b>reshow</b>()
- </dt>
- <dd>
- Dispatches a show event for each visible tile. If tiles are styled
- dynamically through a show event listener, this allows styling to be
- re-evaluated for all visible tiles.
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
123 www/docs/grid.html
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - grid</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a class="active" href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>grid</h2>
-
- <div class="span-4">
- <a href="#po.grid">grid</a><br>
- </div>
-
- <div class="span-4">
- <a href="#map">map</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.grid">
- <dt>
- <i>po</i>.<b>grid</b>()
- </dt>
- <dd>
- <p>Constructs a grid control with default settings. The grid control
- provides reference lines of constant longitude and latitude that are
- overlaid on the map. The resolution of the reference lines increases
- with zoom level.</p>
-
- <p>The grid is not part of the standard set of interaction
- controls (see <a href="interact.html"><tt><i>po</i>.interact</tt></a
- >). The grid control is rendered using SVG elements and must be
- styled through CSS. An <a href="http://github.com/simplegeo/polymaps/blob/master/examples/grid/grid.html"
- >example stylesheet</a> is available in the Git repository.</p>
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>grid</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a>
- and <a href="map.html#remove" >remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified
- map. If no arguments are specified, this method returns the current
- map, which may be null. Whew!</p>
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
123 www/docs/hash.html
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - hash</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a class="active" href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>hash</h2>
-
- <div class="span-4">
- <a href="#po.hash">hash</a><br>
- </div>
-
- <div class="span-4">
- <a href="#map">map</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.hash">
- <dt>
- <i>po</i>.<b>hash</b>()
- </dt>
- <dd>
- <p>Constructs a hash control with default settings. The hash control
- provides two-way coordination of the window&rsquo;s location hash
- with the map center and zoom. This allows map URLs to be
- conveniently copy-and-pasted, preserving the view. To further cut
- down on URL length, the precision of latitude and longitude is based
- on the zoom level.</p>
-
- <p>The hash control also listens for the window
- &ldquo;hashchange&rdquo; event, such that links on the page or
- editing via the address bar can update the map center and zoom.</p>
- </dd>
- </dl>
-
- <dl class="function" id="map">
- <dt>
- <i>hash</i>.<b>map</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Adds this control to the specified map <i>x</i>, removes this
- control from its current map, or returns the current map. This
- method is typically not called directly, but is needed to support
- the map&rsquo;s <a href="map.html#add">add</a> method and <a
- href="map.html#remove">remove</a> methods.</p>
-
- <p>If the argument <i>x</i> is specified, this method returns
- <tt>this</tt>. If <i>x</i> is null, this control is removed from its
- current map; otherwise, this control is added to the specified map.
- If no arguments are specified, this method returns the current map,
- which may be null. Whew!</p>
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
131 www/docs/image.html
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation - image</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.0.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a class="active" href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>image</h2>
-
- <blockquote>Extends
- <a href="layer.html">layer</a>,
- <a href="dispatch.html">dispatch</a>.
- </blockquote>
-
- <div class="span-4">
- <a href="#po.image">image</a><br>
- </div>
-
- <div class="span-4">
- <a href="#url">url</a><br>
- </div>
-
- <hr class="space"/>
-
- <dl class="function" id="po.image">
- <dt>
- <i>po</i>.<b>image</b>()
- </dt>
- <dd>
- Constructs a new image layer with default settings.
- </dd>
- </dl>
-
- <dl class="function" id="url">
- <dt>
- <i>image</i>.<b>url</b>([<i>x</i>])
- </dt>
- <dd>
- <p>Sets or gets the URL template associated with this image layer.
- If the argument <i>x</i> is specified, this method sets the URL
- template and returns <tt>this</tt>. If no arguments are specified,
- this method returns the current URL template. The default URL
- template is &ldquo;about:blank&rdquo;.</p>
-
- <p>The URL template may be specified either as a string or as a
- function:</p>
-
- <p>If a string, and the string contains placeholders of the form
- &ldquo;{<em>A</em>}&rdquo;, where <em>A</em> is any character, then
- the string is converted into a URL template function using <a
- href="url.html"><tt><i>po</i>.url</tt></a>. If the string does not
- contain placeholders, then it is left as a string and the same image
- is loaded for each tile without using the <a href="queue.html"
- >request queue</a>.</p>
-
- <p>If a function, then the given function is invoked, passing in the
- tile coordinate of the image to load. The tile coordinate is
- represented as an object with <tt>row</tt>, <tt>column</tt> and
- <tt>zoom</tt> attributes. The function must return a string
- representing the URL to load. See <a href="url.html"><tt><i>po</i
- >.url</tt></a> for an example implementation.</p>
- </dd>
- </dl>
-
- </div>
- <div class="span-5 append-1 credits">
- Polymaps is a project
- from <a class="bold" href="http://simplegeo.com/">SimpleGeo</a>
- and <a class="bold" href="http://stamen.com/">Stamen</a>.
- </div>
- </div>
- </body>
-</html>
View
437 www/docs/index.html
@@ -1,437 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>Polymaps - Documentation</title>
- <script type="text/javascript" src="../modernizr.min.js?1.5"></script>
- <script type="text/javascript" src="../polymaps.min.js?2.2.0"></script>
- <script type="text/javascript" src="../nns.min.js?1.1.0"></script>
- <style type="text/css">
-
-@import url("../screen.css?0.9");
-@import url("../style.css?2.2.0");
-
- </style>
- </head>
- <body>
- <div class="container">
- <hr class="space"/>
- <div class="span-5 append-1 logo sidebar">
- <a href="../">
- <img src="../logo-small.png"/>
- <script type="text/javascript" src="../logo-small.js"></script>
- </a>
- <hr class="space"/>
-
- <h4>Core</h4>
- <ul class="no-indent">
- <li><a href="map.html">map</a></li>
- <li><a href="layer.html">layer</a></li>
- <li><a href="image.html">image</a></li>
- <li><a href="geoJson.html">geoJson</a></li>
- </ul>
-
- <h4>Controls</h4>
- <ul class="no-indent">
- <li><a href="arrow.html">arrow</a></li>
- <li><a href="compass.html">compass</a></li>
- <li><a href="dblclick.html">dblclick</a></li>
- <li><a href="drag.html">drag</a></li>
- <li><a href="grid.html">grid</a></li>
- <li><a href="hash.html">hash</a></li>
- <li><a href="interact.html">interact</a></li>
- <li><a href="wheel.html">wheel</a></li>
- </ul>
-
- <h4><i>Et cetera</i></h4>
- <ul class="no-indent">
- <li><a href="cache.html">cache</a></li>
- <li><a href="dispatch.html">dispatch</a></li>
- <li><a href="queue.html">queue</a></li>
- <li><a href="stylist.html">stylist</a></li>
- <li><a href="svg.html">svg</a></li>
- <li><a href="transform.html">transform</a></li>
- <li><a href="url.html">url</a></li>
- </ul>
- </div>
- <div class="span-18 prepend-6 last top">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a class="active" href="./">Documentation</a>
- <a href="../download.html">Download</a>
- </div>
- <hr class="space"/>
- <div class="span-18 prepend-6 last">
-
- <h2>Documentation</h2>
-
- <p><b>Polymaps</b> is a JavaScript library for generating
- &ldquo;slippy&rdquo; maps in the style of
- <a href="http://code.google.com/apis/maps/documentation/javascript/">Google
- Maps</a>, <a href="http://modestmaps.com/">Modest Maps</a>,
- <a href="http://cloudmade.com/products/web-maps-lite">CloudMade</a>
- and <a href="http://openlayers.org/">OpenLayers</a>.
-
- <p>Most mapping libraries focus on 256&times;256-pixel image tiles, with
- only limited support for dynamic overlays such as county boundaries and
- point clouds. These libraries assume that data needed to produce the
- desired overlay can be loaded into memory all-at-once, making it
- difficult to visualize large datasets. Furthermore, while image tiles
- automatically adjust in resolution as the map zooms in or out, the
- overlay resolution remains constant; this greatly limits multi-scale
- exploration of data, as the resolution must be fixed either for macro-
- (e.g., state-level) or micro- (e.g., block-level) observation.
-
- <p>The goal of Polymaps is to better support rich, large-scale data
- overlays on interactive maps by extending the tile metaphor to vector
- graphics: in addition to standard image tiles, Polymaps supports vector
- tiles that are rendered with SVG. The vector geometry is loaded as
- <a href="http://geojson.org/">GeoJSON</a> via
- asynchronous <tt>XMLHttpRequest</tt>; <i>Point</i> geometry objects
- are rendered as SVG <tt>circle</tt> elements, <i>Polygon</i>s
- as <tt>path</tt>s, and so on. By loading geometry at known tile
- boundaries, requests can be issued efficiently on-demand by the client,
- and responses trivially cached on the server. When the user zooms in,
- geometry can be seamlessly refined to show greater detail, while on zoom
- out, geometry can be simplified to improve performance.
-
- <h4 class="alt">Why SVG?</h4>
-
- <p>Polymaps is designed from the ground up to use <a
- href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics</a>.
- Existing libraries are hamstrung by the need to support antiquated
- browsers, in particular IE6. By standardizing on SVG, Polymaps allows
- powerful graphical operations, such as <a
- href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">geometric
- transforms</a>, <a href="http://www.w3.org/TR/SVG/masking.html">compositing</a>,
- and <a href="http://www.w3.org/TR/SVG/filters.html">image processing</a>.
- SVG allows styling to be applied via CSS, which simplifies development
- and allows the use of CSS3 <a
- href="http://www.w3.org/TR/css3-transitions/">transitions</a>
- and <a href="http://www.w3.org/TR/css3-animations/">animation</a>. In
- contrast to HTML5 Canvas, SVG facilitates interaction through event
- handlers, <tt>:hover</tt> psuedo-classes, and tooltips.
-
- <h3>Maps should be Easy</h3>
-
- <p>Each Polymap starts with a <tt><a href="map.html">map</a></tt>
- instance. But before we can construct a map, we typically
- &ldquo;import&rdquo; the Polymaps namespace into a short-named local
- variable for convenience:</p>
-
- <pre>var po = org.polymaps;</pre>
-
- <p>The exact name chosen (<tt>po</tt>, here) is at the developer&rsquo;s
- discretion and can be changed to avoid collisions with other libraries.
- Polymaps does not define anything outside of its namespace.</p>
-
- <p>A map instance be retrieved via the constructor:</p>
-
- <pre>var map = po.map();</pre>
-
- <p>Note that Polymaps does not use traditional JavaScript constructors;
- the <tt>new</tt> operator is unused. Instead, Polymaps provides <a
- href="http://en.wikipedia.org/wiki/Factory_method_pattern">factory
- methods</a> which construct the necessary objects internally. This makes
- the code slightly shorter, and slightly faster through the use
- of <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Core_Language_Features#Object_Literals"
- >object literals</a>. And most importantly, Polymaps
- uses <a href="http://www.crockford.com/javascript/private.html">private
- members</a> to hide internal state; this makes the API more robust and
- forward-compatible.</p>
-
- <p>Polymaps makes extensive use of <a
- href="http://en.wikipedia.org/wiki/Method_chaining">method chaining</a>,
- as popularized by <a href="http://jquery.com/">jQuery</a>. All methods
- on the map instance return the map instance, <tt>this</tt>. Thus, we can
- take our bare map instance, insert it into a new SVG element in the
- document body, and then add an <a name="image">image</a> tile layer:</p>
-
- <pre>var map = po.map()
- <span class="hi">.container(document.body.appendChild(po.svg("svg")))</span>
- <span class="hi">.add(po.image().url(&hellip;))</span>;</pre>
-
- <p>Here <tt><a name="svg">po.svg</a></tt> is a convenience method for
- constructing SVG elements with the given tag name. This avoids
- specifying the horribly verbose namespace:</p>
-
- <pre>document.createElementNS("http://www.w3.org/2000/svg", "svg");</pre>
-
- <p>When passed with no arguments, Polymaps methods return the value of
- the associated field, rather than the instance. This allows the method
- to serve both as a setter and a getter:</p>
-
- <pre>map.container(); // returns SVGSVGElement</pre>
-
- <p>Whenever possible, Polymaps objects have reasonable defaults, reducing
- the amount of boilerplate code needed to instantiate a map. For example,
- if the size of the map is not specified, it is automatically inferred
- from the map&rsquo;s container element. If the container is resized, the
- map automatically resizes itself accordingly. On the other hand, maps
- should be easily customizable, so Polymaps does not install any default
- layers or controls.</p>
-
- <h3>Maps consist of Layers</h3>
-
- <p>In the simplest case, a map only has a single image layer; more
- generally, maps can consist of multiple layers that are drawn in-order
- from back to front (the <a
- href="http://en.wikipedia.org/wiki/Painter's_algorithm">Painter&rsquo;s
- algorithm</a>). So, if we want to use a background grid behind the map
- that is visible before any image tiles load, we can simply insert a new
- image layer:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- <span class="hi">.add(po.image().url("grid.png"))</span>
- .add(po.image().url(&hellip;));</pre>
-
- <p>Layers also use method chaining, allowing the layer to be configured
- while simultaneously adding it to the map. Layer URLs can either be
- static (as in the case of a background grid), or dynamic. <a
- name="url">URL templates</a> are specified using substitution variables,
- as in Modest Maps. The allowed parameters are:</p>
-
- <ul>
- <li><tt>{X}</tt> - coordinate column.</li>
- <li><tt>{Y}</tt> - coordinate row.</li>
- <li><tt>{B}</tt> - bounding box.</li>
- <li><tt>{Z}</tt> - zoom level.</li>
- <li><tt>{S}</tt> - host.</li>
- </ul>
-
- <p>The first two parameters specify Google-style tile coordinates;
- see <a href="http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/">maptiler.org</a>
- for more information. As an alternative, the <tt>{B}</tt> parameter
- specifies the tile bounds in latitude and longitude. The argument to
- the <tt>url</tt> method can alternatively be specified as a function,
- allowing the developer to override how tile coordinates are encoded in
- the URL.</p>
-
- <p>The syntax for adding a GeoJSON layer is similar to that for adding
- an image layer, except the <tt><a name="geoJson">geoJson</a></tt>
- constructor is used instead:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.image().url(&hellip;))
- <span class="hi">.add(po.geoJson().url(&hellip;));</span></pre>
-
- <p>Layers can be customized beyond the URL. The size of both image and
- GeoJSON tiles can be changed; the default tile size is 256&times;256.
- Sizes must be powers of two. Layers can have an optional <tt>id</tt>;
- this allows trivial styling of paths through CSS. For example, to use a
- thick white stroke for U.S. state boundaries, assign the layer the ID
- &ldquo;state&rdquo;, then define a selector for contained path
- elements:</p>
-
- <pre>#state path {
- stroke: #fff;
- stroke-width: 1.5px;
- vector-effect: non-scaling-stroke;
-}</pre>
-
- <p>Clipping, enabled by default for GeoJSON tiles, can be disabled
- via <tt>clip(false)</tt>. Clipping allows the GeoJSON data to bleed
- outside the tile bounding box, rather than requiring the server to cut
- feature geometry to tile boundaries. However, with point features,
- clipping is unusually not desired.</p>
-
- <p>For smaller datasets, it may be desirable to load the dataset
- statically. In this case, the GeoJSON layer&rsquo;s data can be
- specified using the <tt>features</tt> method:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.geoJson()<span class="hi">.features(data)</span>);</pre>
-
- <p>Specifying the data statically results in a world-sized GeoJSON tile.
- In addition, changing the zoom level causes the data to be reprojected
- immediately without an additional request to the server. This mechanism
- is also useful to integrate with data sources (not just static files)
- that do not support bounding box filters.</p>
-
- <h3>Maps are not Controls</h3>
-
- <p>Polymaps does not mandate any interaction behavior on new map
- instances. Maps are non-interactive by default, and several standard
- interaction controls are provided for optional binding. To use the
- default controls, specify
- <tt><a name="interact">interact</a></tt>:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.image())
- <span class="hi">.add(po.interact());</span></pre>
-
- <p>This is shorthand for several separate controls:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.image())
- <span class="hi">.add(po.arrow())</span>
- <span class="hi">.add(po.drag())</span>
- <span class="hi">.add(po.dblclick())</span>
- <span class="hi">.add(po.wheel());</span></pre>
-
- <p>The <tt><a name="arrow">arrow</a></tt> control registers key
- listeners that pan the map when arrow keys are pressed, and zoom in and
- out with plus and minus. (As an implementation detail, the arrow control
- listens to <tt>keyup</tt> and <tt>keydown</tt> events, such that
- multiple arrow keys can be depressed simultaneously while panning.)
- The <tt><a name="drag">drag</a></tt> control adds mouse listeners so
- that the map can be panned by dragging. The <tt><a
- name="dblclick">dblclick</a></tt> control listens for its mouse event,
- and zooms in on the corresponding location. Lastly, the <tt><a
- name="wheel">wheel</a></tt> event zooms in and out when the mouse wheel
- is turned.</p>
-
- <p>Another example control is <tt><a name="hash">hash</a></tt>, which
- reads and writes the map&rsquo;s center and zoom to
- the <a href="http://en.wikipedia.org/wiki/Fragment_identifier">location
- hash</a> (a.k.a. fragment). This can be added to the map with one
- line:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.image())
- .add(po.interact())
- <span class="hi">.add(po.hash());</span></pre>
-
- <p>The hash control initializes the map center and zoom by looking at
- the location hash on load. Additionally, in registers an event listener
- on the map for <tt>move</tt> events; when the map is panned or zoomed,
- the hash control updates the location hash accordingly.</p>
-
- <p>Controls can also be visible. The <tt><a name="compass"
- >compass</a></tt> control adds a user interface widget to the
- map&rsquo;s container element, providing visual controls for panning and
- zooming. The compass control similarly listens to the map for zooming to
- update the displayed zoom level.</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.image())
- .add(po.interact())
- .add(po.hash())
- <span class="hi">.add(po.compass());</span></pre>
-
- <p>Note that because the compass control lives in the SVG element, the
- corners of the circles are not dead spots as they are in Google
- Maps. Instead, any events within the circle are handled by the compass
- control, while events outside the circle are handled by the underlying
- map.</p>
-
- <h3>Maps are Dynamic</h3>
-
- <p>While image tiles are generally served as-is, GeoJSON tiles present
- additional requirements for data visualization: geometry objects
- typically need to be styled dynamically on the client. For instance, a
- symbol map might need to color points by some categorical variable (such
- as <a href="http://crimespotting.org/">crime</a>); similarly, a
- choropleth map requires setting the fill color of area boundaries.</p>
-
- <p>To make matters more complicated, if geometry is loaded on-demand as
- tiles, the set of all geometry objects is not available up-front for
- initial styling. Instead, geometry objects need to be styled as they are
- displayed to the user. Styles may also change over time, or with
- interaction; consider for instance changing the radius or visibility of
- circles, or similarly shifting the color of areas in a choropleth map,
- based on some temporal window. The developer needs a way to access the
- currently-visible geometry objects (and data) to update the style.</p>
-
- <p>GeoJSON tiles can be styled dynamically by listening for events. When
- a GeoJSON tile is added to the map, the associated data is loaded
- asynchronously; when the server returns, a &ldquo;load&rdquo; event is
- dispatched to interested handlers. An event handler can be registered
- using <tt>on</tt>, passing in the type of event and the callback
- function:</p>
-
- <pre>var map = po.map()
- .container(document.body.appendChild(po.svg("svg")))
- .add(po.geoJson().url(&hellip;)<span class="hi">.on("load", load)</span>)
- .add(po.interact());</span></pre>
-
- <p>When events are dispatched, the callback function is invoked with
- similar semantics to standard W3C DOM events: the <tt>this</tt> context
- is the map instance, and the single argument is the current event, with
- a <tt>type</tt> attribute and associated event metadata. The
- event&rsquo;s <tt>tile</tt> attribute contains the coordinate of the
- tile, in terms of <tt>column</tt>, <tt>row</tt> and <tt>zoom</tt>. The
- <tt>tile.key</tt> stores a unique string for each tile (as
- <tt>"zoom/column/row"</tt>), for convenient storage of tile-specific