Merge pull request #12789 from ahocevar/mapbox-vector-layer-tilejson

Handle TileJSON urls in Mapbox Style document

package-lock.json

@@ -10,7 +10,7 @@
       "license": "BSD-2-Clause",
       "dependencies": {
         "geotiff": "^1.0.5",
-        "ol-mapbox-style": "^6.4.1",
+        "ol-mapbox-style": "^6.5.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -7923,9 +7923,9 @@
       }
     },
     "node_modules/ol-mapbox-style": {
-      "version": "6.4.2",
+      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.0.tgz",
-      "integrity": "sha512-iQyl5zBC1UiZIB7t4/7NpQruNS2Sk30jKecZuzyTFOksqRSrjVVkPaVmnUOrMAao0bWcOCrcb2zBTb+DQVMfAw==",
+      "integrity": "sha512-/iz8NP4Zk6sxyV3r37T6hxB/TG9yBqVeRx01r49FcZXlE0E8phNo8VPEYfUiRvCa9z8tJhavmOdc6QoAwCA63w==",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.0",
@@ -17425,9 +17425,9 @@
       }
     },
     "ol-mapbox-style": {
-      "version": "6.4.2",
+      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.0.tgz",
-      "integrity": "sha512-iQyl5zBC1UiZIB7t4/7NpQruNS2Sk30jKecZuzyTFOksqRSrjVVkPaVmnUOrMAao0bWcOCrcb2zBTb+DQVMfAw==",
+      "integrity": "sha512-/iz8NP4Zk6sxyV3r37T6hxB/TG9yBqVeRx01r49FcZXlE0E8phNo8VPEYfUiRvCa9z8tJhavmOdc6QoAwCA63w==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.0",

package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "geotiff": "^1.0.5",
-    "ol-mapbox-style": "^6.4.1",
+    "ol-mapbox-style": "^6.5.0",
     "pbf": "3.2.1",
     "rbush": "^3.0.1"
   },

src/ol/layer/MapboxVector.js

@@ -7,7 +7,7 @@ import MVT from '../format/MVT.js';
 import SourceState from '../source/State.js';
 import VectorTileLayer from '../layer/VectorTile.js';
 import VectorTileSource from '../source/VectorTile.js';
-import {applyStyle} from 'ol-mapbox-style';
+import {applyStyle, setupVectorSource} from 'ol-mapbox-style';
 
 const mapboxBaseUrl = 'https://api.mapbox.com';
 
@@ -154,7 +154,9 @@ const SourceType = {
  * @property {string} styleUrl The URL of the Mapbox style object to use for this layer.  For a
  * style created with Mapbox Studio and hosted on Mapbox, this will look like
  * 'mapbox://styles/you/your-style'.
- * @property {string} accessToken The access token for your Mapbox style.
+ * @property {string} [accessToken] The access token for your Mapbox style. This has to be provided
+ * for `mapbox://` style urls. For `https://` and other urls, access keys must be part of the style
+ * url.
  * @property {string} [source] If your style uses more than one source, you need to use either the
  * `source` property or the `layers` property to limit rendering to a single vector source.  The
  * `source` property corresponds to the id of a vector source in your Mapbox style.
@@ -377,15 +379,32 @@ class MapboxVectorLayer extends VectorTileLayer {
     }
 
     const source = this.getSource();
-    source.setUrl(normalizeSourceUrl(styleSource.url, this.accessToken));
+    if (
-
+      styleSource.url.startsWith('mapbox://') ||
-    applyStyle(this, style, sourceIdOrLayersList)
+      styleSource.url.indexOf('{z}') !== -1
-      .then(() => {
+    ) {
-        source.setState(SourceState.READY);
+      // Tile source url, handle it directly
-      })
+      source.setUrl(normalizeSourceUrl(styleSource.url, this.accessToken));
-      .catch((error) => {
+      applyStyle(this, style, sourceIdOrLayersList)
-        this.handleError(error);
+        .then(() => {
+          source.setState(SourceState.READY);
+        })
+        .catch((error) => {
+          this.handleError(error);
+        });
+    } else {
+      // TileJSON url, let ol-mapbox-style handle it
+      setupVectorSource(styleSource, styleSource.url).then((source) => {
+        applyStyle(this, style, sourceIdOrLayersList)
+          .then(() => {
+            this.setSource(source);
+          })
+          .catch((error) => {
+            this.setSource(source);
+            this.handleError(error);
+          });
       });
+    }
   }
 
   /**

test/browser/spec/ol/layer/MapboxVector.test.js

@@ -1,4 +1,4 @@
-import {
+import MapboxVectorLayer, {
   getMapboxPath,
   normalizeSourceUrl,
   normalizeSpriteUrl,
@@ -91,4 +91,29 @@ describe('ol/layer/MapboxVector', () => {
       });
     }
   });
+
+  describe('TileJSON', function () {
+    it('lets ol-mapbox-style handle TileJSON URLs', function (done) {
+      const layer = new MapboxVectorLayer({
+        styleUrl:
+          'data:,' +
+          encodeURIComponent(
+            JSON.stringify({
+              version: 8,
+              sources: {
+                'foo': {
+                  url: '/spec/ol/data/tilejson.json',
+                  type: 'vector',
+                },
+              },
+            })
+          ),
+      });
+      layer.on('change:source', function () {
+        // we only get here when a new source was set, which is what ol-mapbox-style's
+        // setupVectorSource() does.
+        done();
+      });
+    });
+  });
 });