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

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>

docs/_posts/examples/3400-01-03-language-switch.html

@@ -5,11 +5,11 @@
 description: Using .setLayoutProperty to switch languages dynamically.
 ---
 <style>
-    #languageButtons {
+    #buttons {
         width: 90%;
         margin: 0 auto;
     }
-    .language-switch-button {
+    .button {
         display: inline-block;
         position: relative;
         cursor: pointer;
@@ -26,11 +26,11 @@
     }
 </style>
 <div id='map'></div>
-<ul id="languageButtons">
-    <li onclick='switchLanguage("fr");' class='language-switch-button'>French</li>
-    <li onclick='switchLanguage("ru");' class='language-switch-button'>Russian</li>
-    <li onclick='switchLanguage("de");' class='language-switch-button'>German</li>
-    <li onclick='switchLanguage("es");' class='language-switch-button'>Spanish</li>
+<ul id="buttons">
+    <li id='button-fr' class='button'>French</li>
+    <li id='button-ru' class='button'>Russian</li>
+    <li id='button-de' class='button'>German</li>
+    <li id='button-es' class='button'>Spanish</li>
 </ul>
 <script>
 var map = new mapboxgl.Map({
@@ -40,10 +40,12 @@
     zoom: 2.9
 });
 
-function switchLanguage(language) {
+document.getElementById('buttons').addEventListener('click', function(event) {
+    var language = event.target.id.substr('button-'.length);
     // Use setLayoutProperty to set the value of a layout property in a style layer.
     // The three arguments are the id of the layer, the name of the layout property,
     // and the new property value.
     map.setLayoutProperty('country-label-lg', 'text-field', '{name_' + language + '}');
-}
+});
+
 </script>

docs/_posts/examples/3400-01-04-center-on-symbol.html

@@ -1,14 +1,14 @@
 ---
 layout: example
 category: example
-title: Center the map on a clicked marker
+title: Center the map on a clicked symbol
 description: Using queryRenderedFeatures and flyTo to center the map on a symbol
 ---
 <div id='map'></div>
 <script>
 var map = new mapboxgl.Map({
     container: 'map',
-    style: 'mapbox://styles/mapbox/streets-v9',
+    style: 'mapbox://styles/mapbox/light-v9',
     center: [-90.96, -0.47],
     zoom: 8
 });
@@ -65,7 +65,7 @@
         "type": "symbol",
         "source": "symbols",
         "layout": {
-            "icon-image": "marker-15"
+            "icon-image": "rocket-15"
         },
         "paint": {}
     });

docs/_posts/examples/3400-01-04-hover-styles.html

@@ -67,8 +67,8 @@
     });
 
     // Reset the route-hover layer's filter when the mouse leaves the map
-    map.on("mouseout", function(e) {
+    map.on("mouseout", function() {
         map.setFilter("route-hover", ["==", "name", ""]);
-    }
+    });
 });
 </script>

docs/_posts/examples/3400-01-05-geojson-markers.html

@@ -1,20 +1,20 @@
 ---
 layout: example
 category: example
-title: Add GeoJSON markers
-description: Add markers from a GeoJSON collection to a map.
+title: Draw GeoJSON points
+description: Draw points from a GeoJSON collection to a map.
 ---
 <div id='map'></div>
 <script>
 var map = new mapboxgl.Map({
     container: 'map',
-    style: 'mapbox://styles/mapbox/streets-v9',
+    style: 'mapbox://styles/mapbox/light-v9',
     center: [-96, 37.8],
     zoom: 3
 });
 
 map.on('load', function () {
-    map.addSource("markers", {
+    map.addSource("points", {
         "type": "geojson",
         "data": {
             "type": "FeatureCollection",
@@ -26,7 +26,7 @@
                 },
                 "properties": {
                     "title": "Mapbox DC",
-                    "marker-symbol": "monument"
+                    "icon": "monument"
                 }
             }, {
                 "type": "Feature",
@@ -36,18 +36,18 @@
                 },
                 "properties": {
                     "title": "Mapbox SF",
-                    "marker-symbol": "harbor"
+                    "icon": "harbor"
                 }
             }]
         }
     });
 
     map.addLayer({
-        "id": "markers",
+        "id": "points",
         "type": "symbol",
-        "source": "markers",
+        "source": "points",
         "layout": {
-            "icon-image": "{marker-symbol}-15",
+            "icon-image": "{icon}-15",
             "text-field": "{title}",
             "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
             "text-offset": [0, 0.6],

docs/_posts/examples/3400-01-05-popup.html

@@ -13,7 +13,7 @@
     zoom: 3
 });
 
-var tooltip = new mapboxgl.Popup({closeOnClick: false})
+var popup = new mapboxgl.Popup({closeOnClick: false})
     .setLngLat([-96, 37.8])
     .setHTML('<h1>Hello World!</h1>')
     .addTo(map);