question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styles do not work with pg_tileserv vector tiles

See original GitHub issue

The style added with applyStyle does not work with MVT tiles provided by pg_tileserv. Regular Style object works just fine and the same style works with a GeoJSON source.

Below is a snippet that describes the problem with points (also tested with polygons):

const style = {
      version: 8,
      name: 'test',
      metadata: {
        'maputnik:renderer': 'mbgljs'
      },
      sources: {
        populated: {
          type: 'vector'
        }
      },
      sprite: '',
      glyphs: '',
      layers: [
        {
          id: 'asd',
          type: 'circle',
          source: 'populated',
          paint: {
            'circle-color': 'rgb(42,137,134)',
            'circle-stroke-color': 'rgba(129, 40, 40, 1)',
            'circle-radius': 10
          }
        },
      ],
      id: '4yrnz1air'
    };

const style2 = new Style({
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({
        color: 'rgb(42,137,134)',
      }),
    }),
  })

const layerGeojson = new VectorLayer({
  declutter: true,
  source: new VectorSource({
    format: new GeoJsonFormat(),
    url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson'
  })
});

const layerVt = new VectorTileLayer({
  source: new VectorTileSource({
     format: new MVT(),
     url: 'http://localhost:7800/public.test_layer/{z}/{x}/{y}.pbf' // Point layer
   }),
  style: style2
});

// Works
// map.addLayer(layerVt);

// Does not work 
applyStyle(layerVt, style, ['asd']).then(() => map.addLayer(layerVt));

// Works
applyStyle(layerGeojson, style, ['asd']).then(() => map.addLayer(layerGeojson));


I am using ol-mapbox-style==6.1.2 and ol==6.3.1.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ahocevarcommented, Aug 6, 2020

@Joonalai Your layer definition is missing a source-layer property. That property has to match the layer from the vector tile, because vector tiles can contain several layers. I updated your codesandbox with the following layer property:

      "source-layer": "public.osm_lodging_p",
0reactions
Joonalaicommented, Aug 6, 2020

Wow, thank you so much!!

Read more comments on GitHub >

github_iconTop Results From Across the Web

About Tiles - pg_tileserv
The purpose of vector tiles is to efficiently transfer map features over the network, so they optimize for size, using a variety of...
Read more >
How do I reference Source-Layer in a pg_tileserv service?
I have set up a pg_tileserv that shows all geometries. when I then want to specify the style for this in eg Maputnik,...
Read more >
A National Vector Tile Map Using PostGIS and pg_tileserv ...
Your browser can 't play this video. ... A National Vector Tile Map Using PostGIS and pg_tileserv, from Data Production to Web Publishing....
Read more >
Web mapping: comparing vector tile servers from Postgres ...
Many vector tile servers based on the ST_AsMVT() function of PostGIS are available. ... This type of server does not deal with SQL...
Read more >
Openlayers vector tiles example
OGC Vector Tiles This example uses features that are not part of the stable API ... OpenLayers mapbox styles does not work with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found