Merge pull request #10996 from tschaub/mapbox-vector-layer

Mapbox vector layer

examples/mapbox-vector-layer.css

@@ -0,0 +1,3 @@
+.map {
+  background: #f8f4f0;
+}

examples/mapbox-vector-layer.html

@@ -0,0 +1,15 @@
+---
+layout: example.html
+title: Mapbox Vector Layer
+shortdesc: Rendering a layer with a Mapbox-hosted style.
+docs: >
+  The MapboxVector layer allows you to create a layer based on a Mapbox-hosted style using a single
+  vector source.  If your style uses more than one source, use the `source` property to choose a
+  single vector source.  Use the `layers` property if you only want to render a subset of the style's
+  layers (provided they all share the same source).
+tags: "mapbox, studio, vector, tiles"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
+---
+<div id="map" class="map"></div>

examples/mapbox-vector-layer.js

@@ -0,0 +1,18 @@
+import Map from '../src/ol/Map.js';
+import MapboxVector from '../src/ol/layer/MapboxVector.js';
+import View from '../src/ol/View.js';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new MapboxVector({
+      styleUrl: 'mapbox://styles/mapbox/bright-v9',
+      accessToken:
+        'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});