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

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

@@ -0,0 +1,84 @@
+---
+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.
+---
+
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/dark-v8',
+    center: [-103.59179687498357, 40.66995747013945],
+    zoom: 3,
+});
+
+map.on('style.load', function(){
+
+    // Add a new source from our GeoJSON data and set the
+    // 'cluster' option to true.
+    map.addSource("earthquakes", {
+        type: "geojson",
+        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
+        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
+        data: "{{site.baseurl}}/assets/earthquakes.geojson",
+        cluster: true,
+        clusterMaxZoom: 14, // Max zoom to cluster points on
+        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
+    });
+
+    // Use the earthquakes source to create five layers:
+    // One for non-clustered markers, three for each cluster category,
+    // and one for cluster labels.
+    map.addLayer({
+        "id": "non-cluster-markers",
+        "type": "symbol",
+        "source": "earthquakes",
+        "layout": {
+            "icon-image": "marker-15"
+        }
+    });
+
+    // Display the earthquake data in three layers, each filtered to a range of
+    // count values. Each range gets a different fill color.
+    var layers = [
+        [150, '#f28cb1'],
+        [20, '#f1f075'],
+        [0, '#51bbd6']
+    ];
+
+    layers.forEach(function (layer, i) {
+        map.addLayer({
+            "id": "cluster-" + i,
+            "type": "circle",
+            "source": "earthquakes",
+            "paint": {
+                "circle-color": layer[1],
+                "circle-radius": 18
+            },
+            "filter": i == 0 ?
+                [">=", "point_count", layer[0]] :
+                ["all",
+                    [">=", "point_count", layer[0]],
+                    ["<", "point_count", layers[i - 1][0]]]
+        });
+    });
+
+    // Add a layer for the clusters' count labels
+    map.addLayer({
+        "id": "cluster-count",
+        "type": "symbol",
+        "source": "earthquakes",
+        "layout": {
+            "text-field": "{point_count}",
+            "text-font": [
+                    "DIN Offc Pro Medium",
+                    "Arial Unicode MS Bold"
+                ],
+            "text-size": 12
+        }
+    });
+});
+</script>

docs/_posts/examples/3400-01-17-disable-scroll-zoom.html

@@ -0,0 +1,18 @@
+---
+layout: example
+category: example
+title: Disable scroll zoom
+description: Prevents scroll from zooming a map.
+---
+<div id='map'></div>
+<script>
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
+    center: [-122.65, 45.52], // starting position
+    zoom: 9 // starting zoom
+});
+
+// disable map zoom when using scroll
+map.scrollZoom.disable();
+</script>

docs/_posts/examples/3400-01-18-playback-locations.html

@@ -0,0 +1,164 @@
+---
+layout: example
+category: example
+title: Play map locations as a slideshow
+description: 'Autoplay the locations of boroughs in New York City'
+tags:
+  - animation
+---
+<style>
+.map-overlay-container {
+    position: absolute;
+    width: 25%;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    z-index: 1;
+}
+
+.map-overlay {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    background-color: #fff;
+    border-radius: 3px;
+    padding: 10px;
+    box-shadow:0 1px 2px rgba(0,0,0,0.20);
+}
+
+.map-overlay h2,
+.map-overlay p {
+    margin: 0 0 10px;
+}
+</style>
+
+<div id='map'></div>
+
+<div class='map-overlay-container'>
+  <div class='map-overlay'>
+    <h2 id='location-title'></h2>
+    <p id='location-description'></p>
+    <small>Text credit: <a target='_blank' href='http://www.nycgo.com/neighborhoods'>nycgo.com</a></small>
+  </div>
+</div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/emerald-v8',
+    center: [-74.0315, 40.6989],
+    maxZoom: 16,
+    minZoom: 9,
+    zoom: 9.68
+});
+
+var title = document.getElementById('location-title');
+var description = document.getElementById('location-description');
+
+var locations = [{
+    "id": "2",
+    "title": "The Bronx",
+    "description": "This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.",
+    "camera": {
+        center: [-73.8709, 40.8255],
+        zoom: 12.21,
+        pitch: 50
+    }
+}, {
+    "id": "3",
+    "title": "Brooklyn",
+    "description": "No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
+    "camera": {
+        center: [-73.9499, 40.6260],
+        bearing: -8.9,
+        zoom: 11.68
+    }
+}, {
+    "id": "1",
+    "title": "Manhattan",
+    "description": "Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.",
+    "camera": {
+        center: [-74.0070, 40.7437],
+        bearing: 25.3,
+        zoom: 11.5
+    }
+}, {
+    "id": "4",
+    "title": "Queens",
+    "description": "Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
+    "camera": {
+        center: [-73.8432, 40.6923],
+        bearing: 36,
+        zoom: 11.37
+    }
+}, {
+    "id": "5",
+    "title": "Staten Island",
+    "description": "Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.",
+    "camera": {
+        center: [-74.1991, 40.5441],
+        bearing: 28.4,
+        zoom: 11.64
+    }
+}, {
+    "title": "Boroughs of new york",
+    "description": "New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.",
+    "camera": {
+        center: [-74.0315, 40.6989],
+        zoom: 9.68,
+        bearing: 0,
+        pitch: 0
+    }
+}];
+
+function highlightBorough(code) {
+    // Only show the polygon feature that cooresponds to `borocode` in the data
+    map.setFilter('highlight', ["==", "borocode", code]);
+}
+
+function playback(index) {
+    title.textContent = locations[index].title;
+    description.textContent = locations[index].description;
+
+    highlightBorough(locations[index].id ? locations[index].id : '');
+
+    // Animate the map position based on camera properties
+    map.flyTo(locations[index].camera);
+
+    map.once('moveend', function() {
+        // Duration the slide is on screen after interaction
+        window.setTimeout(function() {
+            // Increment index
+            index = (index + 1 === locations.length) ? 0 : index + 1;
+            playback(index);
+        }, 3000); // After callback, show the location for 3 seconds.
+    });
+}
+
+// Display the last title/description first
+title.textContent = locations[locations.length - 1].title;
+description.textContent = locations[locations.length - 1].description;
+
+map.on('load', function() {
+
+    // Polygon fill for each borough of new york city.
+    // Used to highlight when its borough is active.
+    map.addSource("boroughs", {
+        "type": "vector",
+        "url": "mapbox://mapbox.8ibmsn6u"
+    });
+
+    map.addLayer({
+        "id": "highlight",
+        "type": "fill",
+        "source": "boroughs",
+        "source-layer": "original",
+        "paint": {
+            "fill-color": "#fd6b50",
+            "fill-opacity": 0.25
+        },
+        "filter": ["==", "borocode", ""]
+    }, 'neighborhood_small_label'); // Place polygon under the neighborhood labels.
+
+    // Start the playback animation for each borough
+    playback(0);
+});
+</script>