Add worldviews example (#7720)

* add example demonstrating how to adjust administrative boundaries based on the worldview feature property in streets v8

* fix small syntax issues

* add margin to buttons

* move worldview comments to description

* wrap line

* add link to description and format as a list

* add note about v8 data and fix spacing

docs/pages/example/toggle-worldviews.html

@@ -0,0 +1,79 @@
+<style>
+
+label {
+    font-size: 20px;
+}
+.toggle-menu {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    position: absolute;
+    width: 400px;
+    top: 0;
+    right: 0;
+    padding: 10px;
+}
+
+.toggle-menu .toggle-menu-inner {
+    text-align: center;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.toggle-menu-inner button {
+    color: #000;
+    display: inline-block;
+    width: 50px;
+    height: 20px;
+    border: none;
+    margin: 10px;
+    cursor: pointer;
+}
+
+.toggle-menu-inner button:hover {
+    box-shadow:inset 0 0 0 4px pink;
+}
+</style>
+
+<div id='map'></div>
+<div class='toggle-menu top'>
+    <div class='toggle-menu-inner'>
+        <label>Toggle worldview:</label>
+        <div id='worldviews'></div>
+    </div>
+</div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    /* Note: The worldview data field is only available in styles that use the Mapbox Streets v8 tileset https://www.mapbox.com/vector-tiles/mapbox-streets-v8/ */
+    style: 'mapbox://styles/mapbox/streets-v11',
+    center: [95.690, 25.251],
+    zoom: 3
+});
+
+var worldviewButtons = document.getElementById('worldviews');
+
+var worldviews = [
+    'CN',
+    'IN',
+    'US'
+];
+
+map.on('load', function() {
+
+    worldviews.forEach(function(worldview) {
+        var worldviewButton = document.createElement('button');
+        worldviewButton.innerHTML = worldview.toString();
+        worldviewButton.addEventListener('click', function() {
+            var adminLayers = ['admin-0-boundary', 'admin-1-boundary', 'admin-0-boundary-disputed',
+                'admin-1-boundary-bg', 'admin-0-boundary-bg'];
+            adminLayers.forEach(function(adminLayer) {
+                map.setFilter(adminLayer, ["match", ["get", "worldview"], ["all", worldview], true, false]);
+            });
+        });
+        worldviewButtons.appendChild(worldviewButton);
+    });
+
+});
+</script>

docs/pages/example/toggle-worldviews.js

@@ -0,0 +1,16 @@
+/*---
+title: Change worldview of administrative boundaries
+description:  |
+  Uses the [worldview](https://www.mapbox.com/vector-tiles/mapbox-streets-v8/#-worldview-text) value to adjust administrative boundaries based on the map's audience. You can see the worldview options within the worldviews variable in this example. They are as follows:
+  - **CN**: Boundaries for a mainland Chinese audience/worldview, but not officially approved for use in the PRC.
+  - **IN**: Boundaries conforming to cartographic requirements for use in India.
+  - **US**: Boundaries for an American audience, & which are generally appropriate outside of China & India.
+    Lines do not necessarily reflect official US foreign policy.
+tags:
+  - layers
+  - user interaction
+pathname: /mapbox-gl-js/example/toggle-worldviews/
+---*/
+import Example from '../../components/example';
+import html from './toggle-worldviews.html';
+export default Example(html);