Merge pull request #1056 from openlayers/doc

Basic docs
2013-09-24 07:21:43 -07:00
parent ac6d8f2df1 394dfa297a
commit 79750c662c
64 changed files with 297 additions and 61 deletions
--- a/apidoc/template/tmpl/layout.tmpl
+++ b/apidoc/template/tmpl/layout.tmpl
@@ -21,7 +21,7 @@
 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
-      <a class="brand" href="./">OpenLayers 3 API Documentation - <?js= title ?></a>
+      <a class="brand" href="/"><img src="../resources/logo.png"> OpenLayers 3</a>
    </div>
  </div>
 </div>
--- a/doc/index.hbs
+++ b/doc/index.hbs
@@ -0,0 +1,12 @@
+---
+title: Documentation
+layout: doc.hbs
+---
+
+# Documentation
+
+If you're eager to get your first OpenLayers 3 map on a page, dive into the [quick start](quickstart.html).
+
+For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/).
+
+Find additional reference material in the [API docs](../apidoc).
--- a/doc/quickstart.hbs
+++ b/doc/quickstart.hbs
@@ -0,0 +1,132 @@
+---
+title: Quick Start
+layout: doc.hbs
+---
+
+# Quick Start
+
+## Put a map on a page
+
+Below you'll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:
+
+```xml
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/build/ol.css" type="text/css">
+    <style>
+      .map {
+        height: 400px;
+        width: 100%;
+      }
+    </style>
+    <script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+    <title>OpenLayers 3 example</title>
+  </head>
+  <body>
+    <h2>My Map</h2>
+    <div id="map" class="map"></div>
+    <script type="text/javascript">
+      var map = new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.MapQuestOpenAerial()
+          })
+        ],
+        view: new ol.View2D({
+          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+          zoom: 4
+        })
+      });
+    </script>
+  </body>
+</html>
+```
+
+## Understanding what is going on
+
+To include a map a web page you will need 3 things:
+
+ 1. Include OpenLayers
+ 2. `<div>` map container
+ 3. JavaScript to create a simple map
+
+### Include OpenLayers
+
+```xml
+  <script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+```
+
+The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the ol3js.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
+
+
+### `<div>` to contain the map
+
+```xml
+  <div id="map" class="map"></div>
+```
+
+The map in the application is contained in a [`<div>` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
+
+```xml
+  <style>
+    .map {
+      height: 400px; width: 100%;
+    }
+  </style>
+```
+
+### JavaScript to create a simple map
+
+```js
+  var map = new ol.Map({
+    target: 'map',
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestOpenAerial()
+      })
+    ],
+    view: new ol.View2D({
+      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 4
+    })
+  });
+```
+
+With this JavaScript code, a map object is created with a MapQuest Open Aerial layer zoomed on the African East coast. Let's break this down:
+
+The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
+
+```js
+  var map = new ol.Map({ ... });
+```
+
+To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
+
+```js
+    target: 'map'
+```
+
+The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
+
+```js
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestOpenAerial()
+      })
+    ]
+```
+
+Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
+
+The next part of the `Map` object is the `View`. The view allow to specify the center, resolution, and rotation of the map. Right now, only `View2D` is supported, but other views should be available at some point. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
+
+```js
+    view: new ol.View2D({
+      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 4
+    })
+```
+
+You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.
--- a/doc/tutorials/concepts.hbs
+++ b/doc/tutorials/concepts.hbs
@@ -0,0 +1,73 @@
+---
+title: Basic Concepts
+layout: doc.hbs
+---
+
+# Basic Concepts
+
+## Map
+The core component of OpenLayers 3 is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+```xml
+<div id="map" style="width: 100%, height: 400px"></div>
+<script>
+  var map = new ol.Map({target: 'map'});
+</script>
+```
+
+## View
+`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance - typically an `ol.View2D` for 2D maps. The reason for this abstraction is the idea of instantly switching e.g. between a 2D and a tilted 3D view, without the need to maintain two copies of the `layers`.
+
+```js
+  map.setView(new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  }));
+```
+
+An `ol.View2D` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.
+
+The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached.
+
+
+## Source
+To get remote data for a layer, OpenLayers 3 uses `ol.source.Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
+
+```js
+  var osmSource = new ol.source.OSM();
+```
+
+## Layer
+A layer is a visual representation of data from a `source`. OpenLayers 3 has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`.
+
+`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
+
+`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions.
+
+`ol.layer.Vector` is for vector data that is rendered client-side.
+
+```js
+  var osmLayer = new ol.layer.Tile({source: osmSource});
+  map.addLayer(osmLayer);
+```
+
+## Putting it all together
+
+
+The above snippets can be conflated to a self contained map configuration with view and layers:
+
+```xml
+<div id="map" style="width: 100%, height: 400px"></div>
+<script>
+  new ol.Map({
+    layers: [
+      new ol.layer.Tile({source: new ol.source.OSM()})
+    ],
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    }),
+    target: 'map'
+  });
+</script>
+```
--- a/doc/tutorials/index.hbs
+++ b/doc/tutorials/index.hbs
@@ -0,0 +1,8 @@
+---
+title: Tutorials
+layout: doc.hbs
+---
+
+# Tutorials
+
+We'll be putting together a more comprehensive set of tutorials here.  For now, you can take a look at the [basic concepts](concepts.html) tutorial.  Stay tuned for more!
--- a/examples/accessible.html
+++ b/examples/accessible.html
@@ -20,7 +20,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/animation.html
+++ b/examples/animation.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/bind-input.html
+++ b/examples/bind-input.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/brightness-contrast.html
+++ b/examples/brightness-contrast.html
@@ -23,7 +23,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/canvas-tiles.html
+++ b/examples/canvas-tiles.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/custom-controls.html
+++ b/examples/custom-controls.html
@@ -51,7 +51,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/device-orientation.html
+++ b/examples/device-orientation.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/drag-rotate-and-zoom.html
+++ b/examples/drag-rotate-and-zoom.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/epsg-4326.html
+++ b/examples/epsg-4326.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/export-map.html
+++ b/examples/export-map.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/full-screen-drag-rotate-and-zoom.html
+++ b/examples/full-screen-drag-rotate-and-zoom.html
@@ -26,7 +26,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -26,7 +26,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/geolocation.html
+++ b/examples/geolocation.html
@@ -24,7 +24,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/getfeatureinfo.html
+++ b/examples/getfeatureinfo.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/gml.html
+++ b/examples/gml.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/gpx.html
+++ b/examples/gpx.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/hue-saturation.html
+++ b/examples/hue-saturation.html
@@ -23,7 +23,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/icon.html
+++ b/examples/icon.html
@@ -23,7 +23,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/index.html
+++ b/examples/index.html
@@ -20,6 +20,9 @@
      .example:hover {
        background-color: #ddd;
      }
+      .navbar-search.pull-left {
+        padding: 5px;
+      }

      ::-webkit-scrollbar {
        width: 8px;
@@ -175,7 +178,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
          <form class="navbar-search pull-left">
            <input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
            <span id="count"></span>
--- a/examples/kml-earthquakes.html
+++ b/examples/kml-earthquakes.html
@@ -36,7 +36,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/kml-timezones.html
+++ b/examples/kml-timezones.html
@@ -26,7 +26,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/kml.html
+++ b/examples/kml.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/layer-group.html
+++ b/examples/layer-group.html
@@ -19,7 +19,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/localized-openstreetmap.html
+++ b/examples/localized-openstreetmap.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/mapquest.html
+++ b/examples/mapquest.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/min-max-resolution.html
+++ b/examples/min-max-resolution.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
        </div>
      </div>
    </div>
--- a/examples/mouse-position.html
+++ b/examples/mouse-position.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/moveend.html
+++ b/examples/moveend.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/navigation-controls.html
+++ b/examples/navigation-controls.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/overlay.html
+++ b/examples/overlay.html
@@ -27,7 +27,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/popup.html
+++ b/examples/popup.html
@@ -60,7 +60,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/preload.html
+++ b/examples/preload.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/rotation.html
+++ b/examples/rotation.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/scale-line.html
+++ b/examples/scale-line.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/select-features.html
+++ b/examples/select-features.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/semi-transparent-layer.html
+++ b/examples/semi-transparent-layer.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/simple.html
+++ b/examples/simple.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/stamen.html
+++ b/examples/stamen.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/style-rules.html
+++ b/examples/style-rules.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/teleport.html
+++ b/examples/teleport.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/tilejson.html
+++ b/examples/tilejson.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/topojson.html
+++ b/examples/topojson.html
@@ -14,7 +14,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/vector-layer.html
+++ b/examples/vector-layer.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-capabilities.html
+++ b/examples/wms-capabilities.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-custom-proj.html
+++ b/examples/wms-custom-proj.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-image-custom-proj.html
+++ b/examples/wms-image-custom-proj.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-image.html
+++ b/examples/wms-image.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-no-proj.html
+++ b/examples/wms-no-proj.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wms-tiled.html
+++ b/examples/wms-tiled.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wmts-capabilities.html
+++ b/examples/wmts-capabilities.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wmts-from-capabilities.html
+++ b/examples/wmts-from-capabilities.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wmts-ign.html
+++ b/examples/wmts-ign.html
@@ -20,7 +20,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/wmts.html
+++ b/examples/wmts.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/xyz-esri.html
+++ b/examples/xyz-esri.html
@@ -15,7 +15,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/examples/zoomslider.html
+++ b/examples/zoomslider.html
@@ -67,7 +67,7 @@
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
        </div>
      </div>
    </div>
--- a/resources/layout.css
+++ b/resources/layout.css
@@ -1,4 +1,5 @@
@import url(font-awesome/css/font-awesome.min.css);
+@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);

 body {
  padding-top: 60px;
@@ -15,7 +16,14 @@ body {
  display: none;
 }

-/* padding for social links to match bootstrap nav links */
-.nav>li>.twitter-share-button, .nav>li>.g-plusone-wrapper, .nav>li>.github-watch-button {
-  padding: 10px 10px 0px;
+body, h1, h2, h3, h4, p, li, td, th {
+  font-family: Quattrocento Sans;
 }
+.navbar-inverse .navbar-inner {
+  background: #1F6B75;
+}
+.navbar-inverse .brand {
+  color: white;
+  padding: 5px;
+}
+
--- a/resources/logo.png
+++ b/resources/logo.png