Merge pull request #1267 from remogeissbuehler/fix-vector-sources-lookup

Fix vector sources lookup
openlayers · Mar 10, 2025 · d4617d9 · d4617d9
2 parents e98973d + 90b8447
commit d4617d9
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 10 deletions.
diff --git a/examples/openmaptiles-layer.js b/examples/openmaptiles-layer.js
@@ -3,7 +3,7 @@ import {Map, View} from 'ol';
 import VectorTileLayer from 'ol/layer/VectorTile.js';
 import {applyBackground, applyStyle} from 'ol-mapbox-style';
 
-const baseUrl = 'https://api.maptiler.com/maps/basic/style.json';
+const baseUrl = 'https://api.maptiler.com/maps/basic-v2/style.json';
 
 let key = document.cookie.replace(
   /(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,

diff --git a/examples/openmaptiles.js b/examples/openmaptiles.js
@@ -1,7 +1,7 @@
 import 'ol/ol.css';
 import olms from 'ol-mapbox-style';
 
-const baseUrl = 'https://api.maptiler.com/maps/basic/style.json';
+const baseUrl = 'https://api.maptiler.com/maps/basic-v2/style.json';
 
 let key = document.cookie.replace(
   /(?:(?:^|.*;\s*)maptiler_access_token\s*\=\s*([^;]*).*$)|^.*$/,

diff --git a/src/apply.js b/src/apply.js
@@ -173,7 +173,7 @@ function completeOptions(styleUrl, options) {
  * `source` key or an array of layer `id`s from the Mapbox/MapLibre Style object. When a `source` key is
  * provided, all layers for the specified source will be included in the style function. When layer
  * `id`s are provided, they must be from layers that use the same source. When not provided or a falsey
- * value, all layers using the first source specified in the glStyle will be rendered.
+ * value, all layers using the same source as the first layer matching the provided `layer` type will be rendered.
  * @param {Options&ApplyStyleOptions|string} [optionsOrPath] **Deprecated**. Options. Alternatively the path of the style file
  * (only required when a relative path is used for the `"sprite"` property of the style).
  * @param {Array<number>} [resolutions] **Deprecated**. Resolutions for mapping resolution to zoom level.
@@ -250,9 +250,10 @@ export function applyStyle(
 
         const type = layer instanceof VectorTileLayer ? 'vector' : 'geojson';
         if (!sourceOrLayers) {
-          sourceId = Object.keys(glStyle.sources).find(function (key) {
-            return glStyle.sources[key].type === type;
-          });
+          sourceId = glStyle.layers.find(function (layer) {
+            return layer.source && glStyle.sources[layer.source].type === type;
+          }).source;
+
           sourceOrLayers = sourceId;
         } else if (Array.isArray(sourceOrLayers)) {
           sourceId = glStyle.layers.find(function (layer) {
@@ -327,6 +328,7 @@ export function applyStyle(
               }
             });
           }
+
           const glSource = glStyle.sources[sourceId];
           let source = layer.getSource();
           if (!source || source.get('mapbox-source') !== glSource) {

diff --git a/src/util.js b/src/util.js
@@ -283,7 +283,7 @@ export function getTileJson(glSource, styleUrl, options = {}) {
           return Promise.resolve({tileJson, tileLoadFunction});
         });
       }
-    } else {
+    } else if (glSource.tiles) {
       glSource = Object.assign({}, glSource, {
         tiles: glSource.tiles.map(function (tileUrl) {
           if (glSource.scheme === 'tms') {
@@ -301,6 +301,8 @@ export function getTileJson(glSource, styleUrl, options = {}) {
         tileJson: Object.assign({}, glSource),
         tileLoadFunction,
       });
+    } else {
+      promise = Promise.reject(new Error('source has no `tiles` nor `url`'));
     }
     tilejsonCache[cacheKey] = promise;
   }

diff --git a/test/MapboxVectorLayer.test.js b/test/MapboxVectorLayer.test.js
@@ -20,7 +20,53 @@ describe('ol/layer/MapboxVector', () => {
                   type: 'vector',
                 },
               },
-              layers: [],
+              layers: [
+                {
+                  'id': 'mock',
+                  'source': 'foo',
+                },
+              ],
+            }),
+          ),
+      });
+      layer.on('error', function (e) {
+        done(e.error);
+      });
+      const source = layer.getSource();
+      const key = source.on('change', function () {
+        if (source.getState() === 'ready') {
+          unByKey(key);
+          should(source.getTileUrlFunction()([0, 0, 0])).eql(
+            'http://a.tiles.mapbox.com/v3/mapbox.geography-class/0/0/0.png',
+          );
+          done();
+        }
+      });
+    });
+
+    it('chooses the correct tile source heuristically', function (done) {
+      const layer = new MapboxVectorLayer({
+        styleUrl:
+          'data:,' +
+          encodeURIComponent(
+            JSON.stringify({
+              version: 8,
+              sources: {
+                'foo': {
+                  type: 'vector',
+                  attribution: 'test-source',
+                },
+                'bar': {
+                  url: './fixtures/tilejson-mapboxvector.json',
+                  type: 'vector',
+                },
+              },
+              layers: [
+                {
+                  id: 'mock',
+                  source: 'bar',
+                },
+              ],
             }),
           ),
       });
@@ -54,7 +100,12 @@ describe('ol/layer/MapboxVector', () => {
               minzoom: 6,
             },
           },
-          layers: [],
+          layers: [
+            {
+              id: 'mock',
+              source: 'foo',
+            },
+          ],
         }),
       );
 

diff --git a/test/applyStyle.test.js b/test/applyStyle.test.js
@@ -330,7 +330,12 @@ describe('maxResolution', function () {
           minzoom: 6,
         },
       },
-      layers: [],
+      layers: [
+        {
+          id: 'mock',
+          source: 'foo',
+        },
+      ],
     };
   });