DEV Community

Roland
Roland

Posted on

protomaps-leaflet label display

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"
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)