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

Author: bhousel

docs/_layouts/default.html

@@ -0,0 +1,23 @@
+---
+layout: example
+category: example
+title: Restrict map panning to an area
+description: Prevent a map from being panned to a different place by setting <code>maxBounds</code>.
+---
+<div id='map'></div>
+<script>
+
+// Set bounds to New York, New York
+var bounds = [
+    [-74.04728500751165, 40.68392799015035], // Southwest coordinates
+    [-73.91058699000139, 40.87764500765852]  // Northeast coordinates
+];
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v8',
+    center: [-73.9978, 40.7209],
+    zoom: 13,
+    maxBounds: bounds // Sets bounds as max
+});
+</script>

docs/_posts/examples/3400-01-14-restrict-bounds.html

@@ -0,0 +1,90 @@
+---
+layout: example
+category: example
+title: Toggle interactions
+description: Enable or disable UI handlers on a map.
+---
+<style>
+    .listing-group {
+        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 1;
+        border-radius: 3px;
+        max-width: 20%;
+        color: #fff;
+    }
+
+    .listing-group input[type=checkbox]:first-child + label {
+        border-radius: 3px 3px 0 0;
+    }
+
+    .listing-group label:last-child {
+        border-radius: 0 0 3px 3px;
+        border: none;
+    }
+
+    .listing-group input[type=checkbox] {
+        display: none;
+    }
+
+    .listing-group input[type=checkbox] + label {
+        background-color: #3386c0;
+        display: block;
+        cursor: pointer;
+        padding: 10px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    }
+
+    .listing-group input[type=checkbox] + label {
+        background-color: #3386c0;
+        text-transform: capitalize;
+    }
+
+    .listing-group input[type=checkbox] + label:hover,
+    .listing-group input[type=checkbox]:checked + label {
+        background-color: #4ea0da;
+    }
+
+    .listing-group input[type=checkbox]:checked + label:before {
+        content: '✔';
+        margin-right: 5px;
+    }
+</style>
+<div id='map'></div>
+<nav id='listing-group' class='listing-group'>
+    <input type='checkbox' id='scrollZoom' checked='checked'>
+    <label for='scrollZoom'>Scroll zoom</label>
+    <input type='checkbox' id='boxZoom' checked='checked'>
+    <label for='boxZoom'>Box zoom</label>
+    <input type='checkbox' id='dragRotate' checked='checked'>
+    <label for='dragRotate'>Drag rotate</label>
+    <input type='checkbox' id='dragPan' checked='checked'>
+    <label for='dragPan'>Drag pan</label>
+    <input type='checkbox' id='keyboard' checked='checked'>
+    <label for='keyboard'>Keyboard</label>
+    <input type='checkbox' id='doubleClickZoom' checked='checked'>
+    <label for='doubleClickZoom'>Double click zoom</label>
+    <input type='checkbox' id='touchZoomRotate' checked='checked'>
+    <label for='touchZoomRotate'>Touch zoom rotate</label>
+</nav>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v8',
+    center: [-77.04, 38.907],
+    zoom: 11.15
+});
+
+document.getElementById('listing-group').addEventListener('change', function(e) {
+    var handler = e.target.id;
+    if (e.target.checked) {
+        map[handler].enable();
+    } else {
+        map[handler].disable();
+    }
+});
+</script>

docs/_posts/examples/3400-01-14-toggle-interaction-handlers.html

@@ -0,0 +1,57 @@
+---
+layout: example
+category: example
+title: Animate a point
+description: Animate the position of a point by updating a GeoJSON source on each frame.
+---
+<div id='map'></div>
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v8',
+    center: [0, 0],
+    zoom: 2
+});
+
+var radius = 20;
+
+function pointOnCircle(angle) {
+    return {
+        "type": "Point",
+        "coordinates": [
+            Math.cos(angle) * radius,
+            Math.sin(angle) * radius
+        ]
+    };
+}
+
+map.on('load', function () {
+    // Add a source and layer displaying a point which will be animated in a circle.
+    map.addSource('point', {
+        "type": "geojson",
+        "data": pointOnCircle(0)
+    });
+
+    map.addLayer({
+        "id": "point",
+        "source": "point",
+        "type": "circle",
+        "paint": {
+            "circle-radius": 10,
+            "circle-color": "#007cbf"
+        }
+    });
+
+    function animateMarker(timestamp) {
+        // Update the data to a new position based on the animation timestamp. The
+        // divisor in the expression `timestamp / 1000` controls the animation speed.
+        map.getSource('point').setData(pointOnCircle(timestamp / 1000));
+
+        // Request the next frame of the animation.
+        requestAnimationFrame(animateMarker);
+    }
+
+    // Start the animation.
+    animateMarker(0);
+});
+</script>

docs/_posts/examples/3400-01-15-animate-point-along-line.html

@@ -527,7 +527,7 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
      * Set the filter for a given style layer.
      *
      * @param {string} layer ID of a layer
-     * @param {Array} filter filter specification, as defined in the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#filter)
+     * @param {Array} filter filter specification, as defined in the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#types-filter)
      * @returns {Map} `this`
      */
     setFilter: function(layer, filter) {

js/ui/map.js

@@ -13,6 +13,9 @@ var LngLat = require('../geo/lng_lat');
  * @param {Object} options
  * @param {boolean} options.closeButton
  * @param {boolean} options.closeOnClick
+ * @param {string} options.anchor - One of "top", "bottom", "left", "right", "top-left",
+ * "top-right", "bottom-left", or "bottom-right", describing where the popup's anchor
+ * relative to the coordinate set via `setLngLat`.
  * @example
  * var tooltip = new mapboxgl.Popup()
  *   .setLngLat(e.lngLat)