protomaps-leaflet label display

Roland — Thu, 29 Jan 2026 22:03:02 +0000

Hello everyone, I'm new in this place, but I have a problem that I couldn't solve.
I created some pmtiles files. I used tippecanoe and ogr2ogr, with various settings. My goal is: show the files with protomaps-leaflet.js. I already have some leaflet projects with basemaps, geojson layers, but i never used protomaps.
I can create the tiles, and the geometries are correct. I used geometry symbolizers (LineSymbolizer, CircleSymbolizer, PolygonSymbolizer), and I tried text symbolizers. But no matter how hard I tried, I couldn't display the texts. The dataLayer is right, apparently all settings are good, there are no error messages in the console. But labels aren't display. Now I created 3 test files: polygons (i would like to label one of the attributes), lines (for line-labels), and one file which contains only labels.
I checked everything on pmtiles.io and in the meta data. Based on the examples, it doesn't work for me. Does anyone have any experience with what else to look out for?

  const labels = [
    {
      dataLayer: "test",
      symbolizer: new protomapsL.TextSymbolizer({ //LineLabelSymbolizer, LineSymbolizer, PolygonSymbolizer, CenteredTextSymbolizer
        labelProps: (z, f) => { //label, text, label_props, dynamic and static text for testing
            console.log("centroid:", f.geom[0][0].x, f.geom[0][0].y);
            return "TEST";
        },
        font: "12px sans-serif",
        fill: "red",
        stroke: "white",
        width: 3,
        collide: false
      })
    }
  ];

const layer = protomapsL.leafletLayer({
    url: "data_pmtiles/only_labels.pmtiles",
    labelRules: labels,
    view: "2d"
});

DEV Community: Roland

protomaps-leaflet label display