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

docs/_layouts/example.html

@@ -2,7 +2,7 @@
 layout: pages
 ---
 
-<div class='round doc clip fill-white keyline-all'>
+<div class='round doc fill-white keyline-all'>
 
 <style>
 .fill-white pre { background-color:transparent; }

docs/_posts/examples/3400-01-25-mapbox-gl-draw.html

@@ -8,27 +8,16 @@
 ---
 <style>
     .calculation-box {
-        height: 140px;
+        height: 75px;
         width: 150px;
         position: absolute;
-        top: 210px;
+        bottom: 40px;
         left: 10px;
         background-color: rgba(255, 255, 255, .9);
         padding: 15px;
         text-align: center;
     }
 
-    #calculate {
-        min-height: 20px;
-        background-color: #3887be;
-        color: #fff;
-        font-family: 'Open Sans';
-        border-radius: 5px;
-        padding: 10px;
-        cursor: pointer;
-        margin: 10px 0;
-    }
-
     p {
         font-family: 'Open Sans';
         margin: 0;
@@ -42,7 +31,6 @@
 <div id='map'></div>
 <div class='calculation-box'>
     <p>Draw a polygon using the draw tools.</p>
-    <div id='calculate' class='button button'>Calculate area</div>
     <div id='calculated-area'></div>
 </div>
 
@@ -64,18 +52,22 @@
 });
 map.addControl(draw);
 
-var calcButton = document.getElementById('calculate');
-calcButton.onclick = function() {
+map.on('draw.create', updateArea);
+map.on('draw.delete', updateArea);
+map.on('draw.update', updateArea);
+
+function updateArea(e) {
     var data = draw.getAll();
+    var answer = document.getElementById('calculated-area');
     if (data.features.length > 0) {
         var area = turf.area(data);
         // restrict to area to 2 decimal points
         var rounded_area = Math.round(area*100)/100;
-        var answer = document.getElementById('calculated-area');
         answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
     } else {
-        alert("Use the draw tools to draw a polygon!");
+        answer.innerHTML = '';
+        if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
     }
-};
+}
 
 </script>

docs/_theme/index.hbs

@@ -82,7 +82,7 @@ category: api
           <p class='space-bottom2 pad1y'>Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps
             from <a href='{{site.url}}/help/define-vector-tiles'>vector tiles</a> and <a
                     href='{{site.baseurl}}/style-spec'>Mapbox styles</a>.
-            It is part of the <a href='https://github.com/mapbox/mapbox-gl'>Mapbox GL ecosystem</a>, which includes <a
+            It is part of the Mapbox GL ecosystem, which includes <a
                     href='{{site.url}}/mobile/'>Mapbox Mobile</a>, a compatible renderer written in C++ with bindings
             for desktop and mobile platforms. To see what new features our team is working on, take a look at our <a href='{{site.baseurl}}/roadmap'>roadmap</a>.</p>
           <div class='col12 fill-light round pad2 clearfix space-top2'>

docs/style-spec/_generate/index.html

@@ -695,14 +695,13 @@ <h2><a href='#layers' title='link to layers'>Layers</a></h2>
         <code>paint</code> properties.
       </p>
       <p>
-        <em>Layout properties</em> appear in the layer's <code>"layout"</code> object. They are applied early in the rendering process and
-        define how data for that layer is passed to the GPU. For efficiency, a layer can share layout properties with
-        another layer via the <code>"ref"</code> layer property, and should do so where possible. This will decrease
-        processing time and allow the two layers will share GPU memory and other resources associated with the layer.
+        <em>Layout properties</em> appear in the layer's <code>"layout"</code> object. They are applied early in the
+          rendering process and define how data for that layer is passed to the GPU. Changes to a layout property
+          require an asynchronous "layout" step.
       </p>
       <p>
-        <em>Paint properties</em> are applied later in the rendering process. A layer that shares layout properties with another
-        layer can have independent paint properties. Paint properties appear in the layer's <code>"paint"</code> object.
+        <em>Paint properties</em> are applied later in the rendering process. Paint properties appear in the layer's
+          <code>"paint"</code> object. Changes to a paint property are cheap and happen synchronously.
       </p>
       <p class='space-bottom4 quiet small'>Key:
         <a class='icon smooth-ramp quiet micro space-right inline' href='#types-expression-curve' title='Supports all interpolation types'>supports all interpolation types</a>

src/style-spec/reference/v8.json

@@ -405,10 +405,6 @@
       "type": "*",
       "doc": "Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'mapbox:'."
     },
-    "ref": {
-      "type": "string",
-      "doc": "References another layer to copy `type`, `source`, `source-layer`, `minzoom`, `maxzoom`, `filter`, and `layout` properties from. This allows the layers to share processing and be more efficient."
-    },
     "source": {
       "type": "string",
       "doc": "Name of a source description to be used for this layer."