Anthony Hervy
Anthony Hervy

Reputation: 1448

LeafletJS & Protomaps: Read a PMTiles file generated with tippecanoe latest (v2.11.0)

We use leafletJS with ProtonmapsJS for read vector tiles generated with ogr2ogr and tippecanoe.

tippecanoe is available in 2 github version : the old mapbox version : with, we can read and find attributes in the pmtiles file

When we use the old github mapbox repository, tippecanoe is in v1.36 and datas are accessibles (we use online tool PMViewer with file https://s3.eu-west-3.amazonaws.com/tilesets.urbanease.io/public_sandbox/bayonne_france_tippecanoe_1_36.pmtiles to check)

In LeafletJS, here is the functionnal code for apply paint rules :

    const p = new protomaps.PMTiles(pmtilesUrl4(inseeCode));
      p.getMetadata()
        .then(
          (m: any) => {
            console.log(m);
            const layer = protomaps.leafletLayer({
              paint_rules: [
                {
                  dataLayer: inseeCode,
                  symbolizer: new MyPaintSymbolizer(),
                  minzoom: 0,
                  maxzoom: 22,
                },
              ],
              label_rules: [
                {
                  dataLayer: inseeCode,
                  symbolizer: new MyLabelSymbolizer(),
                  minzoom: 18,
                  maxzoom: 22,
                },
              ],
              attribution: '',
              url: p.source.getKey(),
            });

            layer.options.id = 'cadastral';
            layer.options.zIndex = 2;
            console.log(layer);
            layer.addTo(map);
          },
          (err) => console.log('err', err)
        )
        .catch((err: any) => console.log(err));

paint rules :

export class MyPaintSymbolizer {
  draw(context: any, geom: any, properties: any, attr: any) {
    const stroke = '#000';
    const width = 2;
    console.log(properties, attr);
    // if want to color buiding with another color
    // if (attr.props.is_parcel !== true) {
    //   stroke = '#f00';
    //   width = 6;
    // }

    context.fillStyle = 'transparent';
    context.strokeStyle = stroke;
    context.lineWidth = width;
    context.beginPath();

    for (const poly of geom) {
      for (let p = 0; p < poly.length; p++) {
        const pt = poly[p];
        if (p === 0) context.moveTo(pt.x, pt.y);
        else context.lineTo(pt.x, pt.y);
      }
    }

    context.stroke();
    context.fill();
  }
}

enigma : why with tippecanoe latest (fork for brew install), we can't apply Paint rules, on PMTiles online viewer with file https://s3.eu-west-3.amazonaws.com/tilesets.urbanease.io/public_sandbox/bayonne_france_tippecanoe_2_11.pmtiles , he find tiles, metadatas, no show, but pmtiles zone coordinates (Bayonne, France) is correct. With this file with leaflets : no paint rules too.

I have read the changelog file for tippecanoe latest, but I can't find, don't understand why.

If you can help. Have a good day

Upvotes: 2

Views: 511

Answers (0)

Related Questions