0

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">&copy; OpenMapTiles</a>',
      '<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; 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.

Max
  • 1
  • 1
  • 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 – Mike Aug 21 '20 at 15:26
  • @Mike That seems to be the problem! Thanks for the suggestion! I still experience some issues with text displaying, some texts seem to be displayed double and so on, but I think that might be another issue. – Max Aug 21 '20 at 18:41
  • olms version 6.1.4 is now available and is compatible with ol 6.4.3 – Mike Aug 23 '20 at 18:52

1 Answers1

0

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.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Max
  • 1
  • 1
  • It should be enough to update ol-mapbox-style to v6.1.3. That was an issue with previous versions, because ol.style.Text was built into the legacy build instead of being used from the OpenLayers legacy build. And please remember, it is always better to not use the legacy build, but the respective npm packages with a bundler. – ahocevar Aug 22 '20 at 13:23