I want to include a Vector Tile Map with OpenLayers and use a GL Style file for styling the map. Therefor I am using ol mapbox styles (olms). I included ol version 6.4.3 and olms version 6.1.3. I want to render my map in a DOM object with id "map". I fetch my tiles from an OpenMapTiles Server, I host myself (on localhost:32768). This is my code:
const vectorTileLayer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: [
'<a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a>',
'<a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a>',
],
format: new ol.format.MVT(),
url: 'http://localhost:32768/data/v3/{z}/{x}/{y}.pbf',
maxZoom: 18,
}),
});
this.map = new ol.Map({
target: 'map',
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
view: new ol.View(this.viewConfig),
});
fetch('http://localhost:32768/styles/osm-bright/style.json').then(function(response) {
response.json().then(function(glStyle) {
olms.applyStyle(vectorTileLayer, glStyle, 'openmaptiles').then(function() {
me.map.addLayer(vectorTileLayer);
});
});
});
I tried different implementation from different sources (using stylefunction() function, using the apply() function) and eliminated all other factors which could play a role in causing an error.
If I load the page with the map, I get folling error:
TextBuilder.js:502 Uncaught TypeError: t.getScaleArray is not a function
at e.setTextStyle (TextBuilder.js:502)
at Point (vector.js:239)
at vector.js:123
at Fo (vector.js:102)
at e.renderFeature (VectorTileLayer.js:565)
at e.x (VectorTileLayer.js:258)
at d (VectorTileLayer.js:271)
at e.updateExecutorGroup_ (VectorTileLayer.js:286)
at e.prepareTile (VectorTileLayer.js:131)
at e.dispatchEvent (Target.js:114)
When not fetching the styles from my Tile Server (and using olms to apply them), and adding the layer right after creating the map, I dont get an error, but of course I also have no styles.
I also included the fonts that are needed in this style file.
For all experiencing the same issue, take a look at the Mike's comment on the question.
You will need to use OpenLayers version 6.3.1 as olms appears to be based on version 6.1.0 https://github.com/openlayers/ol-mapbox-style/blob/master/package.json#L36 so it doesn't support two dimensional icon and text scale introduced in version 6.4.0
This seems to resolve the issue for the most part.