Merge branch 'sync-mb-pages'

.flowconfig

@@ -8,6 +8,7 @@
 .*/node_modules/htmltojsx/.*
 .*/node_modules/documentation/.*
 .*/node_modules/module-deps/.*
+.*/node_modules/bcryptjs/.*
 .*/node_modules/@mapbox/geojson-types/fixtures/.*
 .*/test/unit/style-spec/fixture/invalidjson.input.json
 .*/test/integration/render-tests/.*

batfish.config.js

@@ -42,9 +42,9 @@ module.exports = () => {
 
     // Local builds treat the `dist` directory as static assets, allowing you to test examples against the
     // local branch build. Non-local builds ignore the `dist` directory, and examples load assets from the CDN.
-    config.unprocessedPageFiles = ['dist/**/*.*'];
+    config.unprocessedPageFiles = ['**/dist/**/*.*'];
     if (process.env.DEPLOY_ENV !== 'local') {
-        config.ignoreWithinPagesDirectory.push('dist/**/*.*');
+        config.ignoreWithinPagesDirectory.push('**/dist/**/*.*');
     }
 
     return config;

docs/components/page_shell.js

@@ -3,6 +3,13 @@ import Helmet from 'react-helmet';
 import ReactPageShell from '../../vendor/dotcom-page-shell/react-page-shell.js';
 
 class PageShell extends React.Component {
+    componentDidMount() {
+        // initialize analytics
+        if (window && window.initializeMapboxAnalytics) {
+            window.initializeMapboxAnalytics();
+        }
+    }
+
     render() {
         return (
             <ReactPageShell darkHeaderText={true} includeFooter={false} {...this.props}>

docs/pages/example/3d-buildings.js

@@ -1,6 +1,6 @@
 /*---
 title: Display buildings in 3D
-description: Use extrusions to display buildings' height in 3D
+description: Use [extrusions](/mapbox-gl-js/style-spec#layers-fill-extrusion) to display buildings' height in 3D
 tags:
   - layers
 pathname: /mapbox-gl-js/example/3d-buildings/

docs/pages/example/add-image.js

@@ -1,6 +1,6 @@
 /*---
 title: Add an icon to the map
-description: Add an icon to the map from an external URL and use it in a symbol layer.
+description: Add an icon to the map from an external URL and use it in a [symbol layer](/mapbox-gl-js/style-spec#layers-symbol).
 tags:
   - styles
   - layers

docs/pages/example/adjust-layer-opacity.js

@@ -1,6 +1,6 @@
 /*---
 title: Adjust a layer's opacity
-description: Drag the range slider to adjust the opacity of a raster layer on top of a map.
+description: Drag the range slider to adjust the opacity of a [raster layer](/mapbox-gl-js/style-spec/#layers-raster) on top of a map.
 tags:
   - layers
   - user-interaction

docs/pages/example/animate-images.js

@@ -1,6 +1,6 @@
 /*---
 title: Animate a series of images
-description: Use a series of image sources to create an animation.
+description: Use a series of [image sources](/mapbox-gl-js/style-spec#sources-image) to create an animation.
 tags:
   - layers
   - sources

docs/pages/example/animate-marker.js

@@ -1,6 +1,6 @@
 /*---
 title: Animate a marker
-description: Animate the position of a marker by updating its location on each frame.
+description: Animate the position of a [`Marker`](/mapbox-gl-js/api/#marker) by updating its location on each frame.
 tags:
   - controls-and-overlays
 pathname: /mapbox-gl-js/example/animate-marker/

docs/pages/example/animate-point-along-route.html

@@ -123,7 +123,8 @@
             "icon-image": "airport-15",
             "icon-rotate": ["get", "bearing"],
             "icon-rotation-alignment": "map",
-            "icon-allow-overlap": true
+            "icon-allow-overlap": true,
+            "icon-ignore-placement": true
         }
     });
 

docs/pages/example/center-on-symbol.js

@@ -1,6 +1,6 @@
 /*---
 title: Center the map on a clicked symbol
-description: Using events and flyTo to center the map on a symbol
+description: Using events and [`flyTo`](/mapbox-gl-js/api/#map#flyto) to center the map on a [`symbol`](/mapbox-gl-js/style-spec#layers-symbol)
 tags:
   - camera
   - user-interaction

docs/pages/example/cluster.html

@@ -78,5 +78,27 @@
             "circle-stroke-color": "#fff"
         }
     });
+
+    // inspect a cluster on click
+    map.on('click', 'clusters', function (e) {
+        var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
+        var clusterId = features[0].properties.cluster_id;
+        map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (err, zoom) {
+            if (err)
+                return;
+
+            map.easeTo({
+                center: features[0].geometry.coordinates,
+                zoom: zoom
+            });
+        });
+    });
+
+    map.on('mouseenter', 'clusters', function () {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', 'clusters', function () {
+        map.getCanvas().style.cursor = '';
+    });
 });
 </script>

docs/pages/example/color-switcher.js

@@ -1,6 +1,6 @@
 /*---
 title: Change a layer's color with buttons
-description: Using setPaintProperty to change a layer's fill color
+description: Using [`setPaintProperty`](/mapbox-gl-js/api#map#setpaintproperty) to change a layer's fill color
 tags:
   - layers
   - user-interaction

docs/pages/example/custom-marker-icons.js

@@ -1,6 +1,6 @@
 /*---
 title: Add custom icons with Markers
-description: Use Markers to add custom icons to your map.
+description: Use [`Marker`](/mapbox-gl-js/api/#marker) to add custom icons to your map.
 tags:
   - controls-and-overlays
 pathname: /mapbox-gl-js/example/custom-marker-icons/

docs/pages/example/data-driven-circle-colors.js

@@ -1,6 +1,6 @@
 /*---
 title: Style circles with a data-driven property
-description: Creating a visualization with a data expression for circle-color
+description: Creating a visualization with a data expression for [`circle-color`](/mapbox-gl-js/style-spec#paint-circle-circle-color)
 tags:
   - layers
 pathname: /mapbox-gl-js/example/data-driven-circle-colors/

docs/pages/example/data-driven-lines.js

@@ -1,6 +1,6 @@
 /*---
 title: Style lines with a data-driven property
-description: Creating a visualization with a data expression for line-color
+description: Creating a visualization with a data expression for [`line-color`](/mapbox-gl-js/style-spec#paint-line-line-color)
 tags:
   - layers
 pathname: /mapbox-gl-js/example/data-driven-lines/

docs/pages/example/drag-a-marker.js

@@ -1,8 +1,8 @@
 /*---
-title: Create a draggable marker
+title: Create a draggable Marker
 description: >-
-  Drag the marker to a new location on a map and populates its coordinates in a
-  display.
+  Drag the [`Marker`](/mapbox-gl-js/api/#marker) to a new location on a map and
+  populates its coordinates in a display.
 tags:
   - user-interaction
 pathname: /mapbox-gl-js/example/drag-a-marker/

docs/pages/example/filter-markers-by-input.js

@@ -1,6 +1,6 @@
 /*---
 title: Filter symbols by text input
-description: Filter symbols by icon name by typing in a text input.
+description: Filter [symbols](/mapbox-gl-js/style-spec#layers-symbol) by icon name by typing in a text input.
 tags:
   - user-interaction
 pathname: /mapbox-gl-js/example/filter-markers-by-input/

docs/pages/example/filter-markers.js

@@ -1,6 +1,6 @@
 /*---
 title: Filter symbols by toggling a list
-description: Filter a set of symbols based on a property value in the data.
+description: Filter a set of [symbols](/mapbox-gl-js/style-spec#layers-symbol) based on a property value in the data.
 tags:
   - user-interaction
 pathname: /mapbox-gl-js/example/filter-markers/

docs/pages/example/fitbounds.js

@@ -1,8 +1,8 @@
 /*---
 title: Fit a map to a bounding box
 description: >-
-  Use fitBounds to show a specific area of the map in view, regardless of the
-  pixel size of the map.
+  Use [`fitBounds`](/mapbox-gl-js/api/#map#fitbounds) to show a specific area
+  of the map in view, regardless of the pixel size of the map.
 tags:
   - camera
 pathname: /mapbox-gl-js/example/fitbounds/

docs/pages/example/flyto-options.js

@@ -1,6 +1,6 @@
 /*---
 title: Slowly fly to a location
-description: Using .flyTo with flyOptions
+description: Using [`flyTo`](/mapbox-gl-js/api/#map#flyto) with flyOptions
 tags:
   - camera
 pathname: /mapbox-gl-js/example/flyto-options/

docs/pages/example/flyto.js

@@ -1,6 +1,6 @@
 /*---
 title: Fly to a location
-description: Using .flyTo to smoothly interpolate between locations
+description: Using [`flyTo`](/mapbox-gl-js/api/#map#flyto) to smoothly interpolate between locations
 tags:
   - camera
 pathname: /mapbox-gl-js/example/flyto/

docs/pages/example/forward-geocode-custom-data.html

@@ -0,0 +1,168 @@
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-87.6244, 41.8756],
+    zoom: 13
+});
+
+var customData = {
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Lincoln Park",
+                "description": "A northside park that is home to the Lincoln Park Zoo"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.637596,
+                    41.940403
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Burnham Park",
+                "description": "A lakefront park on Chicago's south side"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.603735,
+                    41.829985
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Millennium Park",
+                "description": "A downtown park known for its art installations and unique architecture"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.622554,
+                    41.882534
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Grant Park",
+                "description": "A downtown park that is the site of many of Chicago's favorite festivals and events"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.619185,
+                    41.876367
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Humboldt Park",
+                "description": "A large park on Chicago's northwest side"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.70199,
+                    41.905423
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Douglas Park",
+                "description": "A large park near in Chicago's North Lawndale neighborhood"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.699329,
+                    41.860092
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Calumet Park",
+                "description": "A park on the Illinois-Indiana border featuring a historic fieldhouse"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.530221,
+                    41.715515
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Jackson Park",
+                "description": "A lakeside park that was the site of the 1893 World's Fair"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.580389,
+                    41.783185
+                ],
+                "type": "Point"
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "title": "Columbus Park",
+                "description": "A large park in Chicago's Austin neighborhood"
+            },
+            "geometry": {
+                "coordinates": [
+                    -87.769775,
+                    41.873683
+                ],
+                "type": "Point"
+            }
+        }
+    ],
+    "type": "FeatureCollection"
+};
+
+function forwardGeocoder(query) {
+    var matchingFeatures = [];
+    for (var i = 0; i < customData.features.length; i++) {
+        var feature = customData.features[i];
+        // handle queries with different capitalization than the source data by calling toLowerCase()
+        if (feature.properties.title.toLowerCase().search(query.toLowerCase()) !== -1) {
+            // add a tree emoji as a prefix for custom data results
+            // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
+            feature['place_name'] = '🌲 ' + feature.properties.title;
+            feature['center'] = feature.geometry.coordinates;
+            feature['place_type'] = ['park'];
+            matchingFeatures.push(feature);
+        }
+    }
+    return matchingFeatures;
+}
+
+map.addControl(new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    localGeocoder: forwardGeocoder,
+    zoom: 14,
+    placeholder: "Enter search e.g. Lincoln Park"
+}));
+</script>

docs/pages/example/forward-geocode-custom-data.js

@@ -0,0 +1,14 @@
+/*---
+title: Supplement forward geocoding search results from another data source
+description: >-
+  Use the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  control to search for places using Mapbox Geocoding API, supplementing
+  results from a local data source or function, in this case to match
+  Chicago Park names with text input.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/forward-geocode-custom-data/
+---*/
+import Example from '../../components/example';
+import html from './forward-geocode-custom-data.html';
+export default Example(html);

docs/pages/example/geojson-layer-in-stack.js

@@ -1,6 +1,6 @@
 /*---
 title: Add a new layer below labels
-description: 'Using the second argument of addLayer, you can be more precise'
+description: 'Using the second argument of [`addLayer`](/mapbox-gl-js/api/#map#addlayer), you can be more precise'
 tags:
   - layers
 pathname: /mapbox-gl-js/example/geojson-layer-in-stack/