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);
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.tileandL.canvas.tileThe 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 😅