Creating vector overlay with leaflet + vectorgrid

I’m trying to have a leaflet map based on the Pick-a-Peak example, but with a custom Nominatim instance, and a custom overlay (obviously not peaks) that includes nodes and ways.

Getting the search and everything to work was no problem, but the overlay is giving me headaches, because it blurs at high zoom levels like this:

The object that’s blurred is a pretty standard rectangular:

For nodes, it looks even more weird:


I’m creating the vector files with

tippecanoe --no-tile-compression --no-feature-limit --no-tile-size-limit --no-tiny-polygon-reduction -f -ps --drop-densest-as-needed -e data/tiles data/boules.json

Everything else is the same as the example from ther talk. No matter what I try, my tiles are always blurred at higher zoom levels. What ideally like to have is

  1. just the contours, not filled
  2. same resolution as the map
  3. if it has to be filled, how to specify the colour?

Anyone has some experience with this?

ps. The tagging of these places is horrible, please don’t complain about these pitches having a name. The reason I’m doing this special map, is to convince certain people, that we don’t need names, but convert to proper tagging.

Hi Nadjita,

have been fiddling around with Leaflet’s VectorGrid for some weeks now. I remember that I also had this blurring effect, but I somehow managed to solve the issue. If I remember right, try/check the following:

  • Set maxNativeZoom = 19 for the VectorGrid (in JavaScript).
  • Ensure that tippecanoe generates tiles up to zoom level 19 by setting the option --maximum-zoom=19.
  • At least in Firefox reload the map with Ctrl+F5 after changes to HTML/JS/tiles. F5 without Ctrl leads to artefacts on the map (mix of old and new tiles after recreating tiles with tippecanoe, old JS code,…

If it still does not work, I’ll have a closer look at my code and settings.

Best regards,