Layer order inside a tile

[Eschon]

I'm not sure if this is a bug or something that I or the tile provider are doing wrong but I'm having problem regarding the different layers inside a tile. The layer that should color the background of the map is rendered above other layers like streets.

You can still see the streets because the "background" is rendered with opacity.

This happens with both L.svg.tile and L.canvas.tile

The tiles I'm using are coming from basemap.at and I'm trying to build a map based on their default styles.

Here's my code, I tried to reduce it as much as possible but they have way too many layers 😅

const map = L.map(document.querySelector('.map'),{
  minZoom: 11,
  maxZoom: 14,
  maxBounds: [[47.542584, 13.652868], [47.091285, 13.016259]],
}).setView([47.338766, 13.391187], 14);
L.vectorGrid.protobuf('https://maps.wien.gv.at/basemapv/bmapv/3857/tile/{z}/{y}/{x}.pbf', {
  renderFactory: L.canvas.tile,
  bounds: [[47.542584, 13.652868], [47.091285, 13.016259]],
  vectorTileLayerStyles: {
    NUTZUNG_F_NUTZUNG_L11_0: [],
    NUTZUNG_F_NUTZUNG_L15_12: [],
    NUTZUNG_F_NUTZUNG_L15_12: (props, zoom) => {
      let fillOpacity = 0.25;
      let opacity = 0;
      let weight = 0;
      let fillColor;
      let color;

      switch (props._symbol) {
        case 0: // Siedlung
          fillOpacity = 1;
          if (zoom >= 12) fillColor = '#EFEBE8';
          else if (zoom >= 10) fillColor = '#D0C8C4';
          break;
        case 1: // Grünflächen
          if (zoom >= 10) fillColor = '#88cc66';
          break;
        case 2: // Landwirtschaft
          if (zoom >= 10) fillColor = '#ebffaa';
          break;
        case 3: // Wald
          if (zoom >= 10) fillColor = '#47b312';
          break;
        case 4: // Gletscher
          if (zoom >= 10) fillColor = '#73f0ff';
          break;
        case 5: // Sonstiges
          if (zoom >= 10) fillColor = '#fff';
          break;
        case 6: // Gewässerrand
          if (zoom >= 10) fillColor = '#a3ff73';
          break;
        case 7: // Friedhof
          if (zoom >= 10) fillColor = '#997d4d';
          break;
        case 8: // Freizeit
          if (zoom >= 10) fillColor = '#66994d';
          break;
        case 9: // Weingarten
          if (zoom >= 10) fillColor = '#bfbf56';
          break;
      }

      if (fillColor) {
        return {
          fill: true,
          color,
          fillColor,
          weight,
          fillOpacity,
          opacity,
        }
      }

      return [];
    },
    NUTZUNG_F_NUTZUNG_L16_20: [],
    GIP_L_GIP_144: (props, zoom) => {
      let color;
      let weight;
      let dashArray;
      let twoLayer;
      let color2;
      let weight2;

      switch (props._symbol) {
        case 5: // sonstige Straßen
          twoLayer = true;
          if (zoom >= 14) {
            color = '#B2B2B2';
            weight = 6;
            color2 = '#fff';
            weight2 = 4.66667;
          }
          else if (zoom >= 12) {
            color = '#B2B2B2';
            weight = 2.66667;
            color2 = '#fff';
            weight2 = 1.3333;
          }
          break;
        case 6: // beschränkte Befahrbarkeit
          if (zoom >= 14) {
            color = '#B2B2B2';
            weight = 1.33333;
          }
          else if (zoom >= 12) {
            color = '#B2B2B2';
            weight = 0.66667;
          }
          break;
      }

      if (twoLayer && color2) {
        return [
          {
            color,
            weight,
            dashArray,
          },
          {
            color: color2,
            weight: weight2,
          },
        ];
      }

      if (color) {
        return {
          color,
          weight,
          dashArray,
        };
      }

      return [];
    },

    BEV_LAND_250_L_LANDESGRENZE: [],
    BEV_STAAT_250_L_STAATSGRENZE: [],
    BEV_GEMEINDE_L_GEMEINDEGRENZE: [],
    BEV_BEZIRK_L_BEZIRKSGRENZE: [],
    BEV_LAND_L_LANDESGRENZE: [],
    BEV_STAAT_L_STAATSGRENZE: [],

    GEONAMEN_P_KIRCHE_KAPELLE: [],
    SIEDLUNG_P_BEZHPTSTADT: [],
    SIEDLUNG_P_SIEDLUNG: [],
    LANDESHAUPTSTADT_P: [],

    GEBAEUDE_F_GEBAEUDE: [],
    GEBAEUDE_F_AGG: [],

    FLUGHAFEN_P_FLUGHAFEN: [],
    BHF_L12: [],
    'BHF_L13-20': [],

    GIP_BAUWERK_L_TUNNEL_BRUNNENCLA: [],
    GIP_OUTSIDE_BAUWERK_L_TUNNEL: [],
    GIP_INSIDE_BAUWERK_L_TUNNEL: [],
    GIP_INSIDE_L_GIP: [],
    'GIP_INSIDE_BAUWERK_L_BRÜCKE': [],
    GIP_L_GIP_Merge144: [],
    GIP_OUTSIDE_L_GIP: [],
    'GIP_BAUWERK_L_BRÜCKE': [],
    'GIP_OUTSIDE_BAUWERK_L_BRÜCKE': [],
    GIP_L_Ubahn: [],
    'GIP_OUTSIDE_BAUWERK_L_TUNNEL/label': [],
    'GIP_BAUWERK_L_TUNNEL_BRUNNENCLA/label': [],
    'GIP_BAUWERK_L_BRÜCKE/label': [],
    'GIP_OUTSIDE_BAUWERK_L_BRÜCKE/label': [],
    'GIP_L_Ubahn/label': [],
    'GIP_INSIDE_L_GIP/label': [],
    'GIP_INSIDE_BAUWERK_L_TUNNEL/label': [],
    'GIP_INSIDE_BAUWERK_L_BRÜCKE/label': [],
    'GIP_OUTSIDE_L_GIP/label': [],
    'GIP_L_GIP_144/label': [],
    'GIP_L_GIP_Merge144/label': [],

    GEWAESSER_L_GEWLUnterirdisch: [],
    'GEWAESSER_L_GEWL ': [],
    GEWAESSER_F_GEWF: [],
    'GEWAESSER_L_GEWL /label': [],
    'GEWAESSER_F_GEWF/label': [],

    NATURBESTAND_F_NATURBESTAND_F: [],
    NATURBESTAND_L_NATURBESTAND_L: [],
    NATURBESTAND_F_GEBUESCH: [],
    NATURBESTAND_P_BAUM: [],
    'NATURBESTAND_P_U-BAHNZUGANG (TXT)': [],
    NATURBESTAND_F_GRAB: [],
    NATURBESTAND_P_REIHE_NUMMER: [],
    'NATURBESTAND_F_GRAB/label': [],

    'GIPFEL_L09-20': [],

    GEONAMEN_P_GEONAMEN: [],
    HAUSNUMMER_P_HAUSNUMMER_P: [],
  }
}).addTo(map);