Merge remote-tracking branch 'origin/mb-pages'

Lucas Wojciechowski · Lucas Wojciechowski · commit 7d948bf78008 · 2016-04-28T11:58:34.000-07:00
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
@@ -4,6 +4,53 @@
 options: full
 ---
 
+
 <div class='round doc clip fill-white keyline-all'>
+
+  <section class='pad4 keyline-bottom contain'>
+
+    <div class='pin-topright pad2'>
+        <a class='icon github short button quiet' href="https://github.com/mapbox/mapbox-gl-js">Project on GitHub</a>
+    </div>
+
+    <h1 class='space-bottom2'>
+      Mapbox GL JS
+    </h1>
+
+    <div class='prose space-bottom2'>
+      <p>Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from <a href='https://www.mapbox.com/blog/vector-tiles'>vector tiles</a> and <a href='https://www.mapbox.com/mapbox-gl-style-spec'>Mapbox GL styles</a><p>
+      <p>It is part of the <a href='https://github.com/mapbox/mapbox-gl'>Mapbox GL ecosystem</a> which includes <a href='https://www.mapbox.com/mobile/'>Mapbox Mobile</a>, a compatible renderer written in C++ with bindings for desktop and mobile platforms.</p>
+      <a href='https://www.mapbox.com/gallery/'><img width='981' alt='Mapbox GL JS gallery' src='{{site.baseurl}}/assets/gallery.png'></a>
+    </div>
+
+    <h2 class='space'>Using Mapbox GL JS with a <code>&lt;script&gt;</code> tag</h2>
+
+    <div class='prose space-bottom2'>
+      <p>To use the <a href='https://www.mapbox.com/maps/'>vector tiles</a> and styles hosted on <a href='http://mapbox.com'>Mapbox</a>, you must <a href='https://www.mapbox.com/studio/signup/'>create an account</a> and <a href='https://www.mapbox.com/studio/account/tokens/'>obtain an access token</a>. You can learn more about access tokens <a href='https://www.mapbox.com/help/define-access-token/'>here</a>.
+
+      <pre>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.js'&gt;&lt;/script&gt;
+  &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.css' rel='stylesheet'&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;div id='map' style='width: 400px; height: 300px;' /&gt;
+
+  &lt;script&gt;
+    mapboxgl.accessToken = '&lt;your access token here&gt;';
+    var map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/streets-v8'
+    });
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+      </pre>
+    </div>
+  </section>
+
   {{ content }}
 </div>
diff --git a/docs/_layouts/example.html b/docs/_layouts/example.html
@@ -1,6 +1,9 @@
 ---
-layout: docs
+layout: pages
 ---
+
+<div class='round doc clip fill-white keyline-all'>
+
 <style>
 .fill-white pre { background-color:transparent; }
 </style>
@@ -76,4 +79,4 @@
   <a class='button icon clipboard col12 round-bottom js-clipboard' href='#' data-clipboard-target='code' id='copy'>Copy example</a>
 </div>
 
-
+</div>
diff --git a/docs/_posts/examples/3400-01-01-cluster.html b/docs/_posts/examples/3400-01-01-cluster.html
@@ -15,7 +15,7 @@
     zoom: 3,
 });
 
-map.on('style.load', function(){
+map.on('load', function(){
 
     // Add a new source from our GeoJSON data and set the
     // 'cluster' option to true.
diff --git a/docs/_posts/examples/3400-01-01-heatmap.html b/docs/_posts/examples/3400-01-01-heatmap.html
@@ -15,7 +15,7 @@
     zoom: 3,
 });
 
-map.on('style.load', function(){
+map.on('load', function(){
 
     // Add a new source from our GeoJSON data and set the
     // 'cluster' option to true.
diff --git a/docs/_posts/examples/3400-01-01-toggle-layers.html b/docs/_posts/examples/3400-01-01-toggle-layers.html
@@ -59,7 +59,7 @@
     center: [-71.97722138410576, -13.517379300798098]
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('museums', {
         type: 'vector',
         url: 'mapbox://mapbox.2opop9hr'
@@ -68,6 +68,9 @@
         'id': 'museums',
         'type': 'circle',
         'source': 'museums',
+        'layout': {
+            'visibility': 'visible'
+        },
         'paint': {
             'circle-radius': 8,
             'circle-color': 'rgba(55,148,179,1)'
@@ -85,6 +88,7 @@
         'source': 'contours',
         'source-layer': 'contour',
         'layout': {
+            'visibility': 'visible',
             'line-join': 'round',
             'line-cap': 'round'
         },
diff --git a/docs/_posts/examples/3400-01-01-vector-source.html b/docs/_posts/examples/3400-01-01-vector-source.html
@@ -13,7 +13,7 @@
     center: [-122.447303, 37.753574]
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('terrain-data', {
         type: 'vector',
         url: 'mapbox://mapbox.mapbox-terrain-v2'
diff --git a/docs/_posts/examples/3400-01-04-center-on-symbol.html b/docs/_posts/examples/3400-01-04-center-on-symbol.html
@@ -13,7 +13,7 @@
     zoom: 8
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
 
     // add geojson data as a new source
     map.addSource("symbols", {
diff --git a/docs/_posts/examples/3400-01-04-geojson-layer-in-stack.html b/docs/_posts/examples/3400-01-04-geojson-layer-in-stack.html
@@ -13,7 +13,7 @@
     zoom: 4
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('urban-areas', {
         'type': 'geojson',
         'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'
diff --git a/docs/_posts/examples/3400-01-04-geojson-line.html b/docs/_posts/examples/3400-01-04-geojson-line.html
@@ -13,7 +13,7 @@
     zoom: 15
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource("route", {
         "type": "geojson",
         "data": {
diff --git a/docs/_posts/examples/3400-01-04-geojson-polygon.html b/docs/_posts/examples/3400-01-04-geojson-polygon.html
@@ -13,7 +13,7 @@
     zoom: 5
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('maine', {
         'type': 'geojson',
         'data': {
diff --git a/docs/_posts/examples/3400-01-04-hover-styles.html b/docs/_posts/examples/3400-01-04-hover-styles.html
@@ -13,7 +13,7 @@
     zoom: 2
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource("states", {
         "type": "geojson",
         "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"
diff --git a/docs/_posts/examples/3400-01-05-geojson-markers.html b/docs/_posts/examples/3400-01-05-geojson-markers.html
@@ -13,7 +13,7 @@
     zoom: 3
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource("markers", {
         "type": "geojson",
         "data": {
diff --git a/docs/_posts/examples/3400-01-06-polygon-popup-on-click.html b/docs/_posts/examples/3400-01-06-polygon-popup-on-click.html
@@ -23,7 +23,7 @@
     zoom: 3
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     // Add marker data as a new GeoJSON source.
     map.addSource('states', {
         'type': 'geojson',
diff --git a/docs/_posts/examples/3400-01-06-popup-on-click.html b/docs/_posts/examples/3400-01-06-popup-on-click.html
@@ -118,7 +118,7 @@
     zoom: 11.15
 });
 
-map.on('style.load', function () {
+map.on('load', function () {
     // Add marker data as a new GeoJSON source.
     map.addSource("markers", {
         "type": "geojson",
diff --git a/docs/_posts/examples/3400-01-06-popup-on-hover.html b/docs/_posts/examples/3400-01-06-popup-on-hover.html
@@ -118,7 +118,7 @@
     zoom: 11.15
 });
 
-map.on('style.load', function() {
+map.on('load', function() {
     // Add marker data as a new GeoJSON source.
     map.addSource("markers", {
         "type": "geojson",
diff --git a/docs/_posts/examples/3400-01-10-live-geojson.html b/docs/_posts/examples/3400-01-10-live-geojson.html
@@ -21,7 +21,7 @@
     source.setData(url);
 }, 2000);
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('drone', source);
     map.addLayer({
         "id": "drone",
diff --git a/docs/_posts/examples/3400-01-10-rotating-controllable-marker.html b/docs/_posts/examples/3400-01-10-rotating-controllable-marker.html
@@ -40,7 +40,7 @@
     map.setCenter(point.coordinates);
 }
 
-map.on('style.load', function () {
+map.on('load', function () {
     map.addSource('drone', source);
 
     map.addLayer({
diff --git a/docs/_posts/examples/3400-01-15-animate-point-along-route.html b/docs/_posts/examples/3400-01-15-animate-point-along-route.html
@@ -0,0 +1,162 @@
+---
+layout: example
+category: example
+title: Animate a point along a route
+description: "Use <a target='_blank' href='http://turfjs.org/'>Turf</a> to smoothly animate a point along the distance of a line."
+---
+<style>
+.overlay {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.overlay button {
+    font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    background-color: #3386c0;
+    color: #fff;
+    display: inline-block;
+    margin: 0;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.overlay button:hover {
+    background-color:#4ea0da;
+}
+</style>
+<script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
+
+<div id='map'></div>
+<div class='overlay'>
+    <button id='replay'>Replay</button>
+</div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v8',
+    center: [-96, 37.8],
+    zoom: 3
+});
+
+// San Francisco
+var origin = [-122.414, 37.776];
+
+// Washington DC
+var destination = [-77.032, 38.913];
+
+// A simple line from origin to destination.
+var route = {
+    "type": "FeatureCollection",
+    "features": [{
+        "type": "Feature",
+        "geometry": {
+            "type": "LineString",
+            "coordinates": [
+                origin,
+                destination
+            ]
+        }
+    }]
+}
+
+// A single point that animates along the route.
+// Coordinates are initially set to origin.
+var point = {
+    "type": "FeatureCollection",
+    "features": [{
+        "type": "Feature",
+        "geometry": {
+            "type": "Point",
+            "coordinates": origin
+        }
+    }]
+}
+
+// Calculate the distance in kilometers between route start/end point.
+var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
+
+var arc = [];
+
+// Draw an arc between the `origin` & `destination` of the two points
+for (var i = 0; i < lineDistance; i++) {
+   var segment = turf.along(route.features[0], i / 1000 * lineDistance, 'kilometers');
+   arc.push(segment.geometry.coordinates);
+}
+
+// Update the route with calculated arc coordinates
+route.features[0].geometry.coordinates = arc;
+
+// Used to increment the value of the point measurement against the route.
+var counter = 0;
+
+map.on('load', function () {
+    // Add a source and layer displaying a point which will be animated in a circle.
+    map.addSource('route', {
+        "type": "geojson",
+        "data": route
+    });
+
+    map.addSource('point', {
+        "type": "geojson",
+        "data": point
+    });
+
+    map.addLayer({
+        "id": "route",
+        "source": "route",
+        "type": "line",
+        "paint": {
+            "line-width": 2,
+            "line-color": "#007cbf"
+        }
+    });
+
+    map.addLayer({
+        "id": "point",
+        "source": "point",
+        "type": "symbol",
+        "layout": {
+            "icon-image": "airport-15",
+            "icon-rotate": 90
+        }
+    });
+
+    function animate() {
+        // Update point geometry to a new position based on counter denoting
+        // the index to access the arc.
+        point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[counter];
+
+        // Update the source with this new data.
+        map.getSource('point').setData(point);
+
+        // Request the next frame of animation so long as destination has not
+        // been reached.
+        if (point.features[0].geometry.coordinates[0] !== destination[0]) {
+            requestAnimationFrame(animate);
+        }
+
+        counter = counter + 1;
+    }
+
+    document.getElementById('replay').addEventListener('click', function() {
+        // Set the coordinates of the original point back to origin
+        point.features[0].geometry.coordinates = origin;
+
+        // Update the source layer
+        map.getSource('point').setData(point);
+
+        // Reset the counter
+        counter = 0;
+
+        // Restart the animation.
+        animate(counter);
+    });
+
+    // Start the animation.
+    animate(counter);
+});
+</script>
diff --git a/docs/_posts/examples/3400-01-16-point-from-geocoder-result.html b/docs/_posts/examples/3400-01-16-point-from-geocoder-result.html
@@ -41,7 +41,7 @@
 
 // After the map style has loaded on the page, add a source layer and default
 // styling for a single point.
-map.on('style.load', function() {
+map.on('load', function() {
     map.addSource('single-point', {
         "type": "geojson",
         "data": {
diff --git a/docs/_posts/examples/3400-01-22-measure.html b/docs/_posts/examples/3400-01-22-measure.html
diff --git a/docs/_posts/examples/3400-01-23-adjust-layer-opacity.html b/docs/_posts/examples/3400-01-23-adjust-layer-opacity.html
diff --git a/docs/assets/gallery.png b/docs/assets/gallery.png
diff --git a/js/ui/camera.js b/js/ui/camera.js
diff --git a/js/ui/map.js b/js/ui/map.js
diff --git a/js/util/evented.js b/js/util/evented.js
