Not fetching tiles from a Mapbox Style Endpoint when using apply()

[dleone13-terp]

When I use the apply() function like so:

apply('map', 'http://localhost:9000/v1/style/feet/day')
  .then((map) => {
    console.log('Map created successfully', map);
  })
  .catch(error => {
    console.error('Error applying style:', error);
  });

all that shows is the background for the map, with no GET requests for tiles in the Network browser tab.

But when I separate out the layer creation and styling like so:

import 'ol/ol.css';
import './style.css';
import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import { fromLonLat } from 'ol/proj';
import { applyStyle } from 'ol-mapbox-style';
// Create the map first
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([0, 0]),
zoom: 2,
  }),
});
// Create the layer
const layer = new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
format: new MVT(),
url: '[http://localhost:9000/v1/tile/{z}/{x}/{y}](http://localhost:9000/v1/tile/%7Bz%7D/%7Bx%7D/%7By%7D)',
minZoom: 0,
maxZoom: 30,
  }),
});
map.addLayer(layer);
// Apply the mapbox style to the layer (handles sprites automatically)
applyStyle(layer, 'http://localhost:9000/v1/style/feet/day', 'src_senc')
  .then(() => {
console.log('Style applied successfully');
  })
  .catch(error => {
console.error('Error applying style:', error);
  });

It does render correctly. It is worth noting that MapLibre also renders it correctly using the single style JSON endpoint.

This is the style json:

glyphs | "http://localhost:9000/v1/content/fonts/{fontstack}/{range}.pbf"
layers |  
[0…99] |  
[100…199] |  
100 | { id: "FORSTC_point_2", type: "symbol", source: "src_senc", … }
101 | { id: "FORSTC_fill_2", type: "fill", source: "src_senc", … }
102 | { id: "FORSTC_line_2", type: "line", source: "src_senc", … }
103 | { id: "DMPGRD_point_2", type: "symbol", source: "src_senc", … }
104 | { id: "DMPGRD_line_2", type: "line", source: "src_senc", … }
105 | { id: "PIPARE_line_2", type: "line", source: "src_senc", … }
106 | { id: "PIPARE_point_2", type: "symbol", source: "src_senc", … }
107 | { id: "ISTZNE_line_2", type: "line", source: "src_senc", … }
108 | { id: "RECTRC_line_symbol_2", type: "symbol", source: "src_senc", … }
109 | { id: "RCTLPT_point_2", type: "symbol", source: "src_senc", … }
110 | { id: "RCTLPT_area_point2", type: "symbol", source: "src_senc", … }
111 | { id: "NAVLNE_line_2", type: "line", source: "src_senc", … }
112 | { id: "NAVLNE_label_2", type: "symbol", source: "src_senc", … }
113 | { id: "RADLNE_line_2", type: "line", source: "src_senc", … }
114 | { id: "RADLNE_label_2", type: "symbol", source: "src_senc", … }
115 | { id: "RADRNG_line_2", type: "line", source: "src_senc", … }
116 | { id: "RADRFL_point_2", type: "symbol", source: "src_senc", … }
117 | { id: "RADRFL_area_point2", type: "symbol", source: "src_senc", … }
118 | { id: "RTPBCN_point_2", type: "symbol", source: "src_senc", … }
119 | { id: "RTPBCN_area_point2", type: "symbol", source: "src_senc", … }
120 | { id: "RDOCAL_point_2", type: "symbol", source: "src_senc", … }
121 | { id: "RDOCAL_area_point2", type: "symbol", source: "src_senc", … }
122 | { id: "RDOCAL_label_3", type: "symbol", source: "src_senc", … }
123 | { id: "RDOCAL_label_4", type: "symbol", source: "src_senc", … }
124 | { id: "DISMAR_point_2", type: "symbol", source: "src_senc", … }
125 | { id: "CHKPNT_line_2", type: "line", source: "src_senc", … }
126 | { id: "CHKPNT_point_2", type: "symbol", source: "src_senc", … }
127 | { id: "PRCARE_point_2", type: "symbol", source: "src_senc", … }
128 | { id: "PRCARE_line_2", type: "line", source: "src_senc", … }
129 | { id: "PRCARE_area_point2", type: "symbol", source: "src_senc", … }
130 | { id: "SNDWAV_point_2", type: "symbol", source: "src_senc", … }
131 | { id: "SNDWAV_line_2", type: "line", source: "src_senc", … }
132 | { id: "SNDWAV_area_point2", type: "symbol", source: "src_senc", … }
133 | { id: "BERTHS_area_point2", type: "symbol", source: "src_senc", … }
134 | { id: "BERTHS_point_2", type: "symbol", source: "src_senc", … }
135 | { id: "BERTHS_line_2", type: "line", source: "src_senc", … }
136 | { id: "BERTHS_area_label2", type: "symbol", source: "src_senc", … }
137 | { id: "BERTHS_label_2", type: "symbol", source: "src_senc", … }
138 | { id: "HULKES_fill_2", type: "fill", source: "src_senc", … }
139 | { id: "HULKES_line_2", type: "line", source: "src_senc", … }
140 | { id: "HULKES_point_2", type: "symbol", source: "src_senc", … }
141 | { id: "PONTON_fill_2", type: "fill", source: "src_senc", … }
142 | { id: "PONTON_line_2", type: "line", source: "src_senc", … }
143 | { id: "MORFAC_fill_2", type: "fill", source: "src_senc", … }
144 | { id: "MORFAC_line_5", type: "line", source: "src_senc", … }
145 | { id: "MORFAC_line_6", type: "line", source: "src_senc", … }
146 | { id: "MORFAC_line_7", type: "line", source: "src_senc", … }
147 | { id: "MORFAC_line_8", type: "line", source: "src_senc", … }
148 | { id: "MORFAC_point_3", type: "symbol", source: "src_senc", … }
149 | { id: "MORFAC_point_4", type: "symbol", source: "src_senc", … }
150 | { id: "BRIDGE_line_2", type: "line", source: "src_senc", … }
151 | { id: "BRIDGE_point_2", type: "symbol", source: "src_senc", … }
152 | { id: "BRIDGE_line_symbol_2", type: "symbol", source: "src_senc", … }
153 | { id: "CONVYR_line_2", type: "line", source: "src_senc", … }
154 | { id: "CONVYR_line_symbol_2", type: "symbol", source: "src_senc", … }
155 | { id: "DAMCON_point_2", type: "symbol", source: "src_senc", … }
156 | { id: "DAMCON_line_2", type: "line", source: "src_senc", … }
157 | { id: "DAMCON_fill_2", type: "fill", source: "src_senc", … }
158 | { id: "DOCARE_fill_2", type: "fill", source: "src_senc", … }
159 | { id: "DOCARE_line_2", type: "line", source: "src_senc", … }
160 | { id: "FLODOC_fill_2", type: "fill", source: "src_senc", … }
161 | { id: "FLODOC_line_2", type: "line", source: "src_senc", … }
162 | { id: "GATCON_point_2", type: "symbol", source: "src_senc", … }
163 | { id: "GATCON_fill_2", type: "fill", source: "src_senc", … }
164 | { id: "GATCON_line_2", type: "line", source: "src_senc", … }
165 | { id: "GATCON_line_symbol_2", type: "symbol", source: "src_senc", … }
166 | { id: "OFSPLF_point_2", type: "symbol", source: "src_senc", … }
167 | { id: "OFSPLF_fill_2", type: "fill", source: "src_senc", … }
168 | { id: "OFSPLF_line_2", type: "line", source: "src_senc", … }
169 | { id: "OILBAR_line_2", type: "line", source: "src_senc", … }
170 | { id: "CRANES_point_2", type: "symbol", source: "src_senc", … }
171 | { id: "CRANES_fill_2", type: "fill", source: "src_senc", … }
172 | { id: "CRANES_area_point2", type: "symbol", source: "src_senc", … }
173 | { id: "CRANES_line_2", type: "line", source: "src_senc", … }
174 | { id: "PYLONS_point_2", type: "symbol", source: "src_senc", … }
175 | { id: "PYLONS_fill_2", type: "fill", source: "src_senc", … }
176 | { id: "PYLONS_line_2", type: "line", source: "src_senc", … }
177 | { id: "DAYMAR_point_2", type: "symbol", source: "src_senc", … }
178 | { id: "PILBOP_point_2", type: "symbol", source: "src_senc", … }
179 | { id: "PILBOP_line_2", type: "line", source: "src_senc", … }
180 | { id: "PILBOP_area_symbol2", type: "symbol", source: "src_senc", … }
181 | { id: "PILPNT_point_2", type: "symbol", source: "src_senc", … }
182 | { id: "OBSTRN_point_2", type: "symbol", source: "src_senc", … }
183 | { id: "OBSTRN_area_point2", type: "symbol", source: "src_senc", … }
184 | { id: "OBSTRN_feet", type: "symbol", source: "src_senc", … }
185 | { id: "OSPARE_line_2", type: "line", source: "src_senc", … }
186 | { id: "OSPARE_point_2", type: "symbol", source: "src_senc", … }
187 | { id: "SISTAT_point_2", type: "symbol", source: "src_senc", … }
188 | { id: "SISTAW_point_2", type: "symbol", source: "src_senc", … }
189 | { id: "LNDARELABEL_area_label2", type: "symbol", source: "src_senc", … }
190 | { id: "SEAARE_area_label2", type: "symbol", source: "src_senc", … }
191 | { id: "FOGSIG_point_2", type: "symbol", source: "src_senc", … }
192 | { id: "BCNCAR_point_2", type: "symbol", source: "src_senc", … }
193 | { id: "BCNISD_point_2", type: "symbol", source: "src_senc", … }
194 | { id: "BCNLAT_point_2", type: "symbol", source: "src_senc", … }
195 | { id: "BCNSAW_point_2", type: "symbol", source: "src_senc", … }
196 | { id: "BCNSPP_point_2", type: "symbol", source: "src_senc", … }
197 | { id: "BOYCAR_point_2", type: "symbol", source: "src_senc", … }
198 | { id: "BOYINB_point_2", type: "symbol", source: "src_senc", … }
199 | { id: "BOYISD_point_2", type: "symbol", source: "src_senc", … }
[200…293] |  
name | "day_simplified"
sources |  
src_senc |  
type | "vector"
url | "http://localhost:9000/v1/tile_json"
sprite | "http://localhost:9000/v1/content/sprites/day_simplified"
version | 8

And here is the tile json:

bounds |  
0 | -180.0JS:-180
1 | -85.05112877980659
2 | 180.0JS:180
3 | 85.0511287798066
format | "pbf"
maxzoom | 30.0JS:30
minzoom | 0.0JS:0
scheme | "xyz"
tilejson | "2.2.0"
tiles |  
0 | "http://localhost:9000/v1/tile/{z}/{x}/{y}"

[ahocevar]

To rule out a configuration issue, try to let ol-mapbox-style create the whole map for you, and see if it works:

import { apply } from 'ol-mapbox-style';

apply('map', 'http://localhost:9000/v1/style/feet/day');

[dleone13-terp]

That still does not work, with the same silent issue.

[ahocevar]

Is your application served from http://localhost:9000 as well? Do you see requests for the sprites or the tile json? If not, I'd suspect a CORS problem.

Did you make sure that the sources configuration in your style.json is correct? Also check if the layer minzoom settings prevent anything from showing. Does the style work when loaded into https://maputnik.github.io?