More detailed maps

[Coding-Kiwi]

Versatiles is awesome but when compared to the openstreetmap tiles some things are missing like street numbers, points of interest, parking lots and more

I do not fully comprehend the versatiles stack yet but I am guessing whats in the versatiles file and whats not in it is decided by https://github.com/versatiles-org/shortbread-tilemaker/blob/versatiles/config.json ?

And the streetnumbers are not part of the .versatile file that can be downloaded from downloads.versatiles.org, I would need to build my own .versatiles file with a custom config? or is it just a matter of adding layers to the maplibre renderer?

[MichaelKreil]

POIs and street numbers are already included. You just need to zoom in a little closer. They are visible at zoom level 17 and above:

Link
If it is important to you, you could change the style.json.

[Coding-Kiwi]

Oh, sorry about the street numbers.. did not look careful enough. and thanks for the fast answer!

Regarding POI: What about hotel names and parking lots? I am trying to understand how versatiles works, how much data is available for the frontend

[Coding-Kiwi]

Running versatiles probe osm.versatiles reveils the meta_data listing all the included vector_layers

I tested using

map.addLayer({
    id: 'hotel-labels',
    type: 'symbol',
    source: 'versatiles-shortbread',
    'source-layer': 'pois',
    filter: ['==', ['get', 'tourism'], 'hotel'],
    layout: {
        'text-field': ['get', 'name'],
        'text-font': ['noto_sans_regular'],
        'text-size': 12
    },
    paint: {
        'text-color': '#d22'
    }
});

map.addLayer({
  id: 'parking-labels',
  type: 'symbol',
  source: 'versatiles-shortbread',
  'source-layer': 'sites',
  filter: ['==', ['get', 'kind'], 'parking'],
  layout: {
    'text-field': 'PARKING',
    'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
    'text-size': 12
  },
  paint: {
    'text-color': '#0077cc',
    'text-halo-color': '#ffffff',
    'text-halo-width': 1
  },
  minzoom: 14
});

map.addLayer({
    id: 'parking-polygons',
    type: 'fill',
    source: 'versatiles-shortbread',
    'source-layer': 'sites',
    filter: ['==', ['get', 'kind'], 'parking'],
    paint: {
        'fill-color': '#0077cc',
        'fill-opacity': 0.5
    },
    minzoom: 14
});

and the hotel names and parking lots show up! so I just have to modify the style or add layers of what I need

what was really helpful for debugging

map.on('click', (e) => {
    console.log(map.queryRenderedFeatures(e.point));
});

[MichaelKreil]

Okay, we are currently making a big effort with VersaTiles to solve numerous problems with vector tiles at the same time.
The information that may be relevant to you would be:

• Instead of OpenMapTiles, we are using https://shortbread-tiles.org. Unlike OpenMapTiles, this is licence-free, but still very new. We are in the process of expanding the standard step by step: https://github.com/shortbread-tiles/
• We are currently generating the style with https://github.com/versatiles-org/versatiles-style. The relevant files are https://github.com/versatiles-org/versatiles-style/blob/main/src/shortbread/layers.ts and https://github.com/versatiles-org/versatiles-style/blob/main/src/styles/colorful.ts. However, the current version is still a little hacky and will be completely redesigned (hopefully soon) in the course of this year. In addition to bug fixes, there will be new features, like fine tuning zoom levels and font sizes ... including an overlay style for raster data. (Demo: https://versatiles.org/satellite_demo/)