Permalink
Browse files

Adding OpenLayers manual

  • Loading branch information...
1 parent 0cb3253 commit 4b02898128840ac4f53f9368b9eb610a22c7344d @tmcw tmcw committed May 27, 2011
Showing with 94 additions and 1 deletion.
  1. +6 −0 manual/index.html
  2. +82 −0 manual/openlayers.html
  3. +6 −1 manual/site.css
View
@@ -16,6 +16,12 @@
<link href='site.css' rel='stylesheet' type='text/css' />
</head>
<body>
+ <div class='header'>
+ Wax Documentation:
+ <a href='index.html'>Modest Maps</a> |
+ <a href='openlayers.html'>OpenLayers</a> |
+ <a href='google.html'>Google Maps</a>
+ </div>
<div class='page'>
<div class='navigation'>
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <title>Wax Manual - OpenLayers</title>
+ <script src='ender.js' type='text/javascript'></script>
+ <script src='../ext/OpenLayers.js' type='text/javascript'></script>
+ <script src='lib/showdown.js' type='text/javascript'></script>
+ <script src='lib/shjs.js' type='text/javascript'></script>
+ <script src='lib/sh_javascript.min.js' type='text/javascript'></script>
+ <script src='site.js' type='text/javascript'></script>
+ <link href='lib/shjs.css' rel='stylesheet' type='text/css' />
+ <link href='../theme/controls.css' rel='stylesheet' type='text/css' />
+ <link href='site.css' rel='stylesheet' type='text/css' />
+ </head>
+ <body>
+ <div class='header'>
+ Wax Documentation:
+ <a href='index.html'>Modest Maps</a> |
+ <a href='openlayers.html'>OpenLayers</a> |
+ <a href='google.html'>Google Maps</a>
+ </div>
+ <div class='page'>
+
+<div class='navigation'>
+<ul></ul>
+</div>
+
+<div class='section'>
+<pre class='md'>
+The Wax toolkit also supports [OpenLayers](http://openlayers.org), though it is
+**not recommended for new projects**, because it has become extremely bulky and difficult
+to use correctly.
+
+## Starting Off
+
+You'll need
+
+* A div on your page
+* Including OpenLayers.js, the core library. **Do not use the hosted version** unless absolutely necessary - the openlayers.org server is not very fast or reliable, and the version that's hosted includes all dependencies, making it extremely large.
+</pre>
+</div>
+
+
+<pre class='md'>
+### MBTiles layers in OpenLayers
+
+The tilesets that TileStream serves and TileMill creates are valid in the
+[TMS specification](http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification),
+for which OpenLayers has a layer type.
+
+</pre>
+<div class='section'>
+<div id='openlayers-simple' class='map dark'>
+<span class='attribution'>
+ <a href='http://mapbox.com/tileset/world-glass'>World Glass</a>
+</span>
+</div>
+<pre class='sh_javascript run'>
+OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
+var map = new OpenLayers.Map('openlayers-simple', {
+ units: 'm',
+ projection: new OpenLayers.Projection("EPSG:900913"),
+ maxExtent: new OpenLayers.Bounds(-20037508.34,
+ -20037508.34,
+ 20037508.34,
+ 20037508.34),
+});
+map.addLayer(new OpenLayers.Layer.TMS('world-glass',
+ 'http://a.tiles.mapbox.com/mapbox/', {
+ maxResolution: 156543.0339,
+ type: 'png',
+ layername: 'world-glass'
+}));
+map.zoomTo(1);
+</pre>
+</div>
+
+ </div>
+ </body>
+</html>
View
@@ -6,6 +6,11 @@ body {
a {
color:#b64c4c;
}
+div.header {
+ font:normal 10px/20px Verdana,sans-serif;
+ background:#fff;
+ padding:5px;
+}
div.page {
width:800px;
margin-left:225px;
@@ -68,7 +73,7 @@ code {
.navigation {
width:200px;
position:fixed;
- top:10px;
+ top:50px;
left:10px;
}

0 comments on commit 4b02898

Please sign in to comment.