Edit/Snapping to Vector Tiles (Protobuf)

[EliezerB123]

Leaflet has some plugins for working with VectorTiles here: https://leafletjs.com/plugins.html#vector-tiles

But none of them appear to work with Geoman.

In this related issue: #664 it seems that Geoman is incompatible with Leaflet.VectorGrid . (Note: This isn't using protobuf, but it's using a VectorTile nonetheless.)

However, the only other Leaflet plugin for this, Leaflet.VectorTileLayer, appears to work in a similar way, and therefore seems to have the same problem. Is this true? Perhaps there's a work-around? (JSFiddle: https://jsfiddle.net/Terrafire123/96b8yvwg/16/.)

If both plugins are incompatible, then what's the recommended method of using Geoman to work with protobuf VectorTiles?

Thank you!

[Falke-Design]

After digging into it, it looks bad for you. It's the same like Leaflet.VecotGrid. It displays the protobuf data as SVG direktly on the map, so there is no Leaflet Layer which can be editted.

Maybe it is possible to create snapping points but I haven't test it yet. Maybe we can make it work to move it around with a offset to the tiles but I think it would be never possible to edit them.

What do you want to achive? Do you need to modify each single line? And why do you need to have this tiles as protobuf? I suggest you to export the data as GeoJSON.

[EliezerB123]

@Falke-Design Thank you for your reply!

What do you want to achieve?

Primarily, we need to be able to draw shapes using Geoman, and snap the Geoman shapes to the VectorTile layer. (Though full support would of course be ideal.)

It displays the protobuf data as SVG direktly on the map, so there is no Leaflet Layer which can be editted.

Edit: I think the plugins might be using their own custom implementation of Leaflet-layer, instead of using the default one, which might be why Geoman isn't picking up on it. At least, It definitely appears to be getting a lot of the same CSS classes as a standard Leaflet layer.

And why do you need to have this tiles as protobuf?

This is simply what we're currently using. ( It's coming directly from a Tile server, and I'm given to understand it's more performant.) I'm not certain, but it may be possible to convert to GeoJSON, if necessary. Can we still use VectorTiles, or is Geoman incompatible with VectorTiles in general?

[Falke-Design]

I updated Leaflet.VectorTileLayer and made it possible to create a L.Polyline out of the .pbf data: https://gitlab.com/Falke-Design/Leaflet.VectorTileLayer

New functions:

• Options:
  • leafletLayerOptions: applied to the L.Polyline
  • visibleTypes: Default ['svg']. The Leaflet layer can displayed also: ['svg','leaflet'] or ['leaflet']
• toLatLngs(map): returns the current LatLngs which are visible on the map

Important! If you get the LatLngs from a low zoom-level the latlngs are not exactly correct.

Here you can download the dist files: dist.zip

My sample with your tiles:

  var vectorTileLayer = L.VectorTileLayer("https://api.maptiler.com/tiles/7db16e50-77d7-48ac-84f1-ae3a391e3ff1/{z}/{x}/{y}.pbf?key=8BjhptJnVjQEcCDbVjO8", {
      maxDetailZoom: 17,
    style: {
      className: "vectorlayer",
      fillColor: 'red',
      color: 'red'
    },
    leafletLayerOptions: {color: 'green', pmIgnore: true, snapIgnore: false}, // makes it snappable but not editable
    visibleTypes: ['svg','leaflet']
  });

You can also only use leafletLayerOptions: {color: 'green'} but then when you edit / move the layer it will be reset after zooming. So I suggest you to use vectorTileLayer.toLatLngs() and create your own polyline.

---

It would be nice if you have some other vector tiles for testing then I can make a Pull Request to the main Library. Also some polygon vector tiles would be nice.

[EliezerB123]

It works!! Wow.

A little feedback:
It gives an error if I forget to include
visibleTypes: ['svg','leaflet']
(Apparently, the default options.visibleTypes don't appear to be working.)

And I also don't see the correct color unless I do BOTH
style: {color:'#ff0000'}
AND
leafletLayerOptions: {color:'#ff0000'}

But it seems to work perfectly, otherwise!

Thank you!!

I'll see what I can do about getting you more examples.

[EliezerB123]

As requested, I pulled some more vector tiles from various codepens from the internet....

this turned into
https://codesandbox.io/s/displaying-json-data-on-leaflet-map-forked-3zwed?file=/src/index.js

this turned into
https://codesandbox.io/s/displaying-json-data-on-leaflet-map-forked-3i1jk?file=/src/index.js

(They don't seem to like the toLatLngs function, but other than that, they seem to work pretty well.)

(Note: The performance seems very slow inside a codepen, but if I run the code locally, performance is perfectly OK. I suspect the javascript debugger is causing a significant performance slowdown. )