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

Author: Lucas Wojciechowski

README.md

@@ -2,7 +2,7 @@
 
 # Mapbox GL JS
 
-Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from [vector tiles](https://www.mapbox.com/blog/vector-tiles/) and the [Mapbox GL Style Specification]([Style Specification](https://www.mapbox.com/mapbox-gl-style-spec)).
+Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from [vector tiles](https://www.mapbox.com/blog/vector-tiles/) and [Mapbox styles](https://www.mapbox.com/mapbox-gl-style-spec).
 
 It is part of the [Mapbox GL ecosystem](https://github.com/mapbox/mapbox-gl) which includes [Mapbox GL Native](https://www.mapbox.com/mapbox-gl-native), a suite of compatible SDKs for native desktop and mobile applications.
 

docs/README.md

@@ -30,7 +30,7 @@ In the post body, write the HTML and JavaScript constituting the example.
 * Use **4 space indentation**. Exception: do not add an initial level of indentation to code within `<script>` tags (it should start flush left).
 * Do **not** include an access token in the example code. The access token will be inserted automatically by the template, using the current logged in user's default public token, or a placeholder `<insert token here>` string if the user is not logged in.
 * Do **not** use custom styles from your personal account. Use only the default `mapbox` account styles.
-* When embedding literal JSON (GeoJSON or GL style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings.
+* When embedding literal JSON (GeoJSON or Mapbox style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings.
 
 ## Running the Documentation Server Locally
 

docs/_layouts/default.html

@@ -101,7 +101,7 @@
   <meta class='swiftype' name='author' data-type='string' content='{{page.author}}' />{% endif %}{% if page.excerpt or page.description %}
   <meta class='swiftype' name='excerpt' data-type='string' content='{% if page.description %}{{ page.description | strip_html | strip_newlines | replace:"'","&rsquo;" | replace:"'","&rsquo;" | truncatewords: 30 }}{% else %}{{ page.excerpt | strip_html | strip_newlines | replace:"'","&rsquo;" | replace:"'","&rsquo;" | truncatewords: 30 }}{% endif %}' />{% endif %}
   {% if site.baseurl == '/mapbox.js' %}{% if site.mapboxjs != page.version and page.version != 'latest' %}<meta name='robots' content='noindex'>{% endif %}{% endif %}
-  {% if page.card %}
+  {% if page.card or layout.card %}
   <meta name='twitter:site' content='@Mapbox' />
   <meta property='og:site_name' content='Mapbox' />
   <meta name='twitter:url' content='{{site.url}}{{site.baseurl}}{% if page.permalink %}{{page.permalink}}{% else %}{{page.url | replace:"index.html",""}}{% endif %}' />
@@ -110,7 +110,7 @@
   <meta property='og:title' content='{{page.title | replace:"'","&rsquo;" | replace:"'","&rsquo;"}}' />
   <meta name='twitter:description' content='{% if page.description %}{{ page.description | truncatewords: 30 }}{% elsif page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | replace:"'","&rsquo;" | replace:"'","&rsquo;" | truncatewords: 30 }}{% else %}{{content | strip_html | truncatewords: 30 }}{% endif %}' />
   <meta property='og:description' content='{% if page.description %}{{ page.description | truncatewords: 30 }}{% elsif page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | replace:"'","&rsquo;" | replace:"'","&rsquo;" | truncatewords: 30 }}{% else %}{{content | strip_html | truncatewords: 30 }}{% endif %}' />
-  {% if page.video %}
+  {% if page.video or layout.video %}
   <meta name='twitter:card' content='player' />
   <meta name='twitter:player' content='{{page.video | replace: "http:" , "https:" }}' />
   <meta name='twitter:player:width' content='640' />
@@ -119,7 +119,7 @@
   <meta property='og:video' content='{{page.video}}' />
   <meta property='og:video:width' content='640' />
   <meta property='og:video:height' content='480' />
-  {% elsif page.image %}
+  {% elsif page.image or layout.image %}
   <meta name='twitter:image' content='{{page.image | replace:"https:","http:"}}' />
   <meta name='st:image' content='{{page.image | replace:"https:","http:"}}' />
   <meta property='og:image' content='{{page.image | replace:"https:","http:"}}' />
@@ -376,7 +376,7 @@ <h3 class='pad0y pad1x strong space-bottom1'>Products</h3>
 
 <div class='{% unless page.options contains 'full' or layout.options contains 'full' %} limiter clearfix{% endunless %}'>{{content}}</div>
 
-{% unless page.url contains '/hello/directions' or page.url contains '/welcome'  %}
+{% unless page.url contains '/hello/directions'  %}
 <div class='footer footer-in-docs clearfix contain hide-mobile noprint fill-light' data-swiftype-index='false'>
   <div class='limiter clearfix'>
     <div class='footer-in-docs footer-cols-in-docs clearfix col12 pad8y small'>

docs/_layouts/docs.html

@@ -18,7 +18,7 @@ <h1 class='space-bottom2'>
     </h1>
 
     <div class='prose space-bottom2'>
-      <p>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.url}}/mapbox-gl-style-spec'>Mapbox GL styles</a>.<p>
+      <p>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.url}}/mapbox-gl-style-spec'>Mapbox 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='{{site.url}}/mobile/'>Mapbox Mobile</a>, a suite of compatible SDKs for native desktop and mobile applications.</p>
     </div>
     <a href='https://www.mapbox.com/gallery/'><img alt='Mapbox GL JS gallery' src='{{site.baseurl}}/assets/gallery.png'></a>

docs/_posts/examples/.eslintrc

@@ -0,0 +1,12 @@
+{
+    "plugins": ["html"],
+    "globals": {
+        "mapboxgl": true,
+        "turf": true,
+        "d3": true
+    },
+    "rules": {
+        "strict": "off",
+        "no-unused-vars": ["error", {varsIgnorePattern: "map|popup"}],
+    }
+}

docs/_posts/examples/3400-01-01-cluster.html

@@ -1,8 +1,8 @@
 ---
 layout: example
 category: example
-title: Create and style marker clusters
-description: Use Mapbox GL JS' built-in functions to visualize point data as marker clusters.
+title: Create and style clusters
+description: Use Mapbox GL JS' built-in functions to visualize points as clusters.
 ---
 
 <div id='map'></div>
@@ -12,10 +12,10 @@
     container: 'map',
     style: 'mapbox://styles/mapbox/dark-v9',
     center: [-103.59179687498357, 40.66995747013945],
-    zoom: 3,
+    zoom: 3
 });
 
-map.on('load', function(){
+map.on('load', function() {
 
     // Add a new source from our GeoJSON data and set the
     // 'cluster' option to true.
@@ -30,10 +30,10 @@
     });
 
     // Use the earthquakes source to create five layers:
-    // One for non-clustered markers, three for each cluster category,
+    // One for unclustered points, three for each cluster category,
     // and one for cluster labels.
     map.addLayer({
-        "id": "non-cluster-markers",
+        "id": "unclustered-points",
         "type": "symbol",
         "source": "earthquakes",
         "layout": {
@@ -58,7 +58,7 @@
                 "circle-color": layer[1],
                 "circle-radius": 18
             },
-            "filter": i == 0 ?
+            "filter": i === 0 ?
                 [">=", "point_count", layer[0]] :
                 ["all",
                     [">=", "point_count", layer[0]],
@@ -74,9 +74,9 @@
         "layout": {
             "text-field": "{point_count}",
             "text-font": [
-                    "DIN Offc Pro Medium",
-                    "Arial Unicode MS Bold"
-                ],
+                "DIN Offc Pro Medium",
+                "Arial Unicode MS Bold"
+            ],
             "text-size": 12
         }
     });

docs/_posts/examples/3400-01-01-heatmap.html

@@ -12,10 +12,10 @@
     container: 'map',
     style: 'mapbox://styles/mapbox/dark-v9',
     center: [-103.59179687498357, 40.66995747013945],
-    zoom: 3,
+    zoom: 3
 });
 
-map.on('load', function(){
+map.on('load', function() {
 
     // Add a new source from our GeoJSON data and set the
     // 'cluster' option to true.
@@ -30,7 +30,7 @@
     });
 
     // Use the earthquakes source to create four layers:
-    // three for each cluster category, and one for non-clustered markers
+    // three for each cluster category, and one for unclustered points
 
     // Each point range gets a different fill color.
     var layers = [
@@ -58,7 +58,7 @@
     });
 
     map.addLayer({
-        "id": "non-cluster-markers",
+        "id": "unclustered-points",
         "type": "circle",
         "source": "earthquakes",
         "paint": {

docs/_posts/examples/3400-01-03-fitbounds.html

@@ -22,7 +22,7 @@
 </style>
 <div id='map'></div>
 <br/>
-<button onclick='fit();' id='fit'>Fit to Kenya</button>
+<button id='fit'>Fit to Kenya</button>
 <script>
 var map = new mapboxgl.Map({
     container: 'map',
@@ -31,13 +31,14 @@
     zoom: 9
 });
 
-function fit() {
+document.getElementById('fit').addEventListener('click', function() {
     map.fitBounds([[
         32.958984,
         -5.353521
     ], [
         43.50585,
         5.615985
     ]]);
-}
+});
+
 </script>

docs/_posts/examples/3400-01-03-flyto-options.html

@@ -22,7 +22,7 @@
 </style>
 <div id='map'></div>
 <br/>
-<button onclick='fly();' id='fly'>Fly</button>
+<button id='fly'>Fly</button>
 <script>
 var start = [-74.50, 40];
 var end = [74.50, 40];
@@ -35,7 +35,7 @@
 
 var isAtStart = true;
 
-function fly() {
+document.getElementById('fly').addEventListener('click', function() {
     // depending on whether we're currently at point a or b, aim for
     // point a or b
     var target = isAtStart ? end : start;
@@ -62,5 +62,5 @@
             return t;
         }
     });
-}
+});
 </script>

docs/_posts/examples/3400-01-03-flyto.html

@@ -22,7 +22,7 @@
 </style>
 <div id='map'></div>
 <br/>
-<button onclick='fly();' id='fly'>Fly</button>
+<button id='fly'>Fly</button>
 <script>
 var map = new mapboxgl.Map({
     container: 'map',
@@ -31,13 +31,13 @@
     zoom: 9
 });
 
-function fly() {
+document.getElementById('fly').addEventListener('click', function () {
     // Fly to a random location by offsetting the point -74.50, 40
     // by up to 5 degrees.
     map.flyTo({
         center: [
             -74.50 + (Math.random() - 0.5) * 10,
             40 + (Math.random() - 0.5) * 10]
     });
-}
+});
 </script>