How to style vector tiles?

[psplawski]

Howdy, My and my friends are currently struggling with vector tiles styling. Here is a quick sum up about our case:

Steps made to create tiles:

1. Downloaded osm.pbf file for whole world.
2. We trimmed the osm.pbf file to include only a part of the map representing the USA.
3. USA.osm.pbf was converted to .mbtiles format using tilemaker tool.
4. USA.mbtiles was converted to .pmtiles format and uploaded to our AWS s3 instance, on which we are hosting protomaps server so we can access .mvt tiles using coords.

The problem:

Map is successfully displayed on the site using Leaflet, Protomaps and Protomaps-Leaflet libraries.

This is the code I am using to display a map, which works fine:

const tilesLayer = protomapsL.leafletLayer({
    url : this.#TILES_URL,
});
// Attach layer to the map.
tilesLayer.addTo(this.LMap);

However, we are unable to styles the map, this is how the map looks by default without any paint or label rules:

What we tried:

1. Providing the paint rules in the same way as in the protomaps documentation, using PolygonSymbolizer and dataLayer names found in the protomaps-leaflet library source code:

PAINT_RULES = [
      { dataLayer: "water", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "steelblue" }) },
      { dataLayer: "earth", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "green" }) },
      { dataLayer: "glacier", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "white" }) },
      { dataLayer: "residential", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "lightgray" }) },
      { dataLayer: "hospital", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "red" }) },
      { dataLayer: "cemetery", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "darkgray" }) },
      { dataLayer: "school", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "yellow" }) },
      { dataLayer: "industrial", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "brown" }) },
      { dataLayer: "wood", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "forestgreen" }) },
      { dataLayer: "grass", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "limegreen" }) },
      { dataLayer: "park", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "lightgreen" }) },
      { dataLayer: "water", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "steelblue" }) },
      { dataLayer: "sand", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "tan" }) },
      { dataLayer: "buildings", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "gray" }) },
      { dataLayer: "highwayCasing", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "orange" }) },
      { dataLayer: "majorRoadCasing", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "orange" }) },
      { dataLayer: "mediumRoadCasing", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "orange" }) },
      { dataLayer: "minorRoadCasing", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "orange" }) },
      { dataLayer: "highway", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "yellow" }) },
      { dataLayer: "majorRoad", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "yellow" }) },
      { dataLayer: "mediumRoad", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "yellow" }) },
      { dataLayer: "minorRoad", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "yellow" }) },
      { dataLayer: "boundaries", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "black" }) },
      { dataLayer: "mask", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "transparent" }) },
      { dataLayer: "countryLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "blue" }) },
      { dataLayer: "cityLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "purple" }) },
      { dataLayer: "stateLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "orange" }) },
      { dataLayer: "neighbourhoodLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "pink" }) },
      { dataLayer: "landuseLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "lightblue" }) },
      { dataLayer: "waterLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "deepskyblue" }) },
      { dataLayer: "naturalLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "greenyellow" }) },
      { dataLayer: "roadsLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "khaki" }) },
      { dataLayer: "poisLabel", symbolizer: new protomapsL.PolygonSymbolizer({ fill: "violet" }) }
];

const tilesLayer = protomapsL.leafletLayer({
    url : this.#TILES_URL,
    paint_rules:this.PAINT_RULES,
});
// Attach layer to the map.
tilesLayer.addTo(this.LMap);

The results:

2. Using protomapsL.paintRules() method, which returns processed paint rules as an array for the map:

const tilesLayer = protomapsL.leafletLayer({
url : this.#TILES_URL,
paint_rules: protomapsL.paintRules(
	{
		earth: "#FFFBF6",
		glacier: "#ffffff",
		residential: "#F4F4F8",
		hospital: "#FFF6F6",
		cemetery: "#EFF2EE",
		school: "#F7F6FF",
		industrial: "#FFF9EF",
		wood: "#F4F9EF",
		grass: "#EBF9E3",
		park: "#E5F9D5",
		water: "#B7DFF2",
		sand: "#ebebeb",
		buildings: "#F2EDE8",
		highwayCasing: "#FFC3C3",
		majorRoadCasing: "#FFB9B9",
		mediumRoadCasing: "#FFCE8E",
		minorRoadCasing: "#cccccc",
		highway: "#FFCEBB",
		majorRoad: "#FFE4B3",
		mediumRoad: "#FFF2C8",
		minorRoad: "#ffffff",
		boundaries: "#9e9e9e",
		mask: "#dddddd",
		countryLabel: "#aaaaaa",
		cityLabel: "#6C6C6C",
		stateLabel: "#999999",
		neighbourhoodLabel: "#888888",
		landuseLabel: "#898989",
		waterLabel: "#41ABDC",
		naturalLabel: "#4B8F14",
		roadsLabel: "#888888",
		poisLabel: "#606060",
	}
)
});
// Attach layer to the map.
tilesLayer.addTo(this.LMap);

The results:

As you can see, everything looks like paint rules are not working for our tiles.
The entire map is just gray and the only visible layer is the water layer.
It seems like the only layer that is receiving styles is the water layer.

The question:

Can you guys help us? Are we doing something wrong, or our tiles are just broken?
What should we do to correctly style map layers and place labels on the map?
We would be satisfied with the map using paint rules similar to the google maps color scheme.

[bdon]

If you are using tilemaker then by default it will make "openmaptiles" map tiles. you need to use MapLibre GL, not leaflet, to render those, along with an "openmaptiles" style.

[psplawski]

Thank you! Is this possible to handle our case using Leaflet or switching to MapLibre GL is the only way in our scenario?

[bdon]

It is likely more trouble than it is worth, and MapLibre has a better user experience anyways.

[psplawski]

Thanks! I've opened a new discussion inside maplibre-gl-js repo because I am not able to get MapLibre GL JS working with .mvt tiles. If you have any insights, your participation will be appreciated. -> maplibre/maplibre-gl-js#3457