New landing

_config.gh-pages.yml

@@ -4,9 +4,9 @@ permalink: /:categories/:title
 baseurl: /mapbox.js
 pygments: true
 version: v1.5.0
-masterbranch: master
 oldversion: v0.6.7
-title: mapbox.js
+title: MapBox.js
+defaultid: 'examples.map-9ijuk24y'
 description: MapBox JavaScript API
 rdiscount:
   extensions: [smart]

_config.yml

@@ -4,9 +4,9 @@ permalink: /:categories/:title
 baseurl: /mapbox.js
 pygments: true
 version: v1.5.0
-masterbranch: master
 oldversion: v0.6.7
-title: mapbox.js
+title: MapBox.js
+defaultid: 'examples.map-9ijuk24y'
 description: MapBox JavaScript API
 rdiscount:
   extensions: [smart]

_includes/header.html

@@ -4,12 +4,12 @@
 
 <div class='pad4y col12 clearfix'>
   <div class='col6'>
-    <h2 class='tag small'>
+    <h3 class='tag small'>
       <a href='{{site.url}}/{{page.section|downcase}}' class='quiet'>{{page.section}}</a>
-    </h2>
-    <h1>
+    </h3>
+    <h2>
       {{site.title}}
-      <a class='version' href='https://github.com/mapbox/mapbox.js/blob/{{site.masterbranch}}/CHANGELOG.md#{{site.version|replace:'.', ''}}'>
+      <a class='version' href='https://github.com/mapbox/mapbox.js/blob/master/CHANGELOG.md#{{site.version|replace:'.', ''}}'>
       {% if page.v0 %}
         <sup class='fill-yellow small'>{{site.oldversion}}</sup>
       {% elsif page.version %}
@@ -18,12 +18,12 @@ <h1>
         <sup class='fill-grey small'>{{site.version}}</sup>
       {% endif %}
       </a>
-    </h1>
+    </h2>
   </div>
 </div>
 
 <nav class='pill mobile-cols col12 clearfix space-bottom'>
-    <a href='{{site.baseurl}}/overview/' class='col4 button {% if page.url == "/overview/index.html" %}active{% endif %}'>Overview</a>
+    <a href='{{site.baseurl}}/' class='col4 button {% if page.url == "/index.html" %}active{% endif %}'>Overview</a>
   {% if page.v0 %}
     <a href='{{site.baseurl}}/api/v0.6.7/' class='col4 button {% if page.url contains "api" %}active{% endif %}'>API</a>
     <a href='{{site.baseurl}}/example/v0.6.7/' class='col4 button {% if page.url contains "example" %}active{% endif %}'>Examples</a>

_layouts/api.html

@@ -39,7 +39,50 @@
 
     <div class='col9 keyline-left'>
       <div id='docs' class='doc-content prose'>
-        <div class='doc pad2'>
+        <div class='pad2 doc'>
+          <div class='space-bottom4'>
+            <h2>Reading this Documentation</h2>
+            <p>MapBox.js is built on top of <a href='http://leafletjs.com/'>Leaflet</a> and should be read in conjunction with the <a href='http://leafletjs.com/reference.html'>Leaflet API reference.</a></p>
+
+            <p>The documentation is organized by <em>methods</em>. Each method
+            is shown with potential arguments along with it&#39;s type and description in a table.
+            When the API has a Javascript constructor function that returns an object, the constructor
+            is documented with its full name and the methods on the object are named with just
+            the type of the object. For instance, <code>L.mapbox.markerLayer</code> documents a function that
+            returns a layer for markers. The methods on that object are then documented as
+            <code>markerLayer.setFilter</code>, <code>markerLayer.getGeoJSON</code>, and so on.</p>
+
+            <div class='note'>
+              <p>To use this API, you&#39;ll need to understand basic Javascript and mapping concepts.
+              If you&#39;d like to learn Javascript, start with <a href='http://www.codecademy.com/tracks/javascript'>an interactive course</a>, or
+              <a href='http://eloquentjavascript.net/'>book</a>.
+              If you&#39;d like to learn more about maps, <a href='http://mapbox.com/developers/guide/'>we&#39;ve provided a helpful article explaining how web maps work</a>.</p>
+            </div>
+
+            <h3 id='the-ready-event'>The `ready` event</h3>
+            <p>MapBox.js is <a href='http://recurial.com/programming/understanding-callback-functions-in-javascript/'>asynchronous</a> - when you create a layer like <code>L.mapbox.tileLayer('{{site.defaultid}}')</code>, the layer doesn&#39;t immediately know which tiles to load and its attribution information. Instead, it loads the information in an <a href='http://en.wikipedia.org/wiki/AJAX'>AJAX</a> call.</p>
+
+  <p>For most things you&#39;ll write, this isn&#39;t a problem, since MapBox.js does a good
+  job of handling these on-the-fly updates. If you&#39;re writing code that needs
+  to know when layers and other dynamically-loaded objects are ready, you can
+  use the <code>ready</code> event to listen for their ready state. For instance:</p>
+
+  {% highlight javascript %}
+  var layer = L.mapbox.tileLayer('{{site.defaultid}}');
+  layer.on('ready', function() {
+      // the layer has been fully loaded now, and you can
+      // call .getTileJSON and investigate its properties
+  });
+  {% endhighlight %}
+
+  <p>Similarly, dynamically-loaded objects produce an `error` event if something
+  goes wrong:</p>
+
+  {% highlight javascript %}
+  var layer = L.mapbox.tileLayer('{{site.defaultid}}');
+  layer.on('error', function(err) { // Handle error });
+  {% endhighlight %}
+          </div>
           {{content}}
         </div>
         <div class='keyline-top center small'>

assets/css/site.css

@@ -5,9 +5,18 @@
   }
 
 /* Base Candidate */
-.doc-nav a:hover,
-.doc-nav .active {
-  background-color:#f8f8f8;
+.note pre { background:#fff; }
+
+.space-bottom1      { margin-bottom:10px; }
+.space-bottom4,
+.depth-3, .depth-2  { margin-bottom:40px; }
+
+/* Otherwise the controls are hidden
+ * on the landing page when animating the
+ * different map examples in. */
+.sliding .pin-bottom,
+.sliding .leaflet-control {
+  -webkit-transform:translate3d(0,0,0);
   }
 
 .version,
@@ -57,8 +66,10 @@ nav a:first-child {
   width:20px;
   height:20px;
   vertical-align:top;
-  margin-right:5px;
   }
+  .doc-content .leaflet:before {
+    margin-right:5px;
+    }
 
 #map {
   background:#fff;
@@ -68,7 +79,9 @@ nav a:first-child {
   top:0;
   left:0;
   }
-
+.code {
+  overflow:auto;
+  }
 #demo {
   position:relative;
   height:400px;

assets/js/site.js

@@ -1,3 +1,6 @@
+---
+---
+
 (function(context) {
     var Docs = function() {};
 

examples/storytelling.geojson

@@ -0,0 +1,125 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.15591514,
+          51.51830379
+        ]
+      },
+      "properties": {
+        "title": "221b Baker St.",
+        "marker-symbol": "1",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.07571203,
+          51.51424049
+        ]
+      },
+      "properties": {
+        "title": "Aldgate Station",
+        "marker-symbol": "2",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.08533793,
+          51.50438536
+        ]
+      },
+      "properties": {
+        "title": "London Bridge",
+        "marker-symbol": "3",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          0.05991101,
+          51.48752939
+        ]
+      },
+      "properties": {
+        "title": "Woolwich Arsenal",
+        "marker-symbol": "4",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.18335806,
+          51.49439521
+        ]
+      },
+      "properties": {
+        "title": "Gloucester Road",
+        "marker-symbol": "5",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.19684993,
+          51.5033856
+        ]
+      },
+      "properties": {
+        "title": "13 Caulfield Gardens",
+        "marker-symbol": "6",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.10669358,
+          51.51433123
+        ]
+      },
+      "properties": {
+        "title": "Daily Telegraph",
+        "marker-symbol": "7",
+        "marker-color": "#404040"
+      }
+    },
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -0.12416858,
+          51.50779757
+        ]
+      },
+      "properties": {
+        "title": "Charing Cross Hotel",
+        "marker-symbol": "8",
+        "marker-color": "#404040"
+      }
+    }
+  ]
+}