4 ms·

I had no idea what vector tiles were and the page doesn't explain it. https://en.wikipedia.org/wiki/Vector_tiles https://en.wikipedia.org/wiki/Vector_tiles

by eulgro 1y ago

kurtoid 1y ago
Here's how I understand it: Previously, OpenStreetMap's tile endpoints would serve pre-rasterized PNG images, so zooming in on a tile could cause it to get blurry, until your client requests a new, zoomed in tile. Now, they can serve tiles in SVG format, which scale better
- rjh29 1y ago
  SVG tiles use less data too, and can be recoloured/restyled.
  - SigmundA 1y ago
    Not SVG
- dbetteridge 1y ago
  Basically that + vector tiles can store information about the tile, styles, objects or buildings etc
- maelito 1y ago
  > so zooming in on a tile could cause it to get blurry, until your client requests a new, zoomed in tile. Now, they can serve tiles in SVG format, which scale better They still are blurry, because openstreetmap.org uses a JS library that does not seem to support vector tiles :/
  - akdor1154 1y ago
    I just tested it and it's def vector here - Firefox Android. Looks great!
  - orblivion 1y ago
    Make sure it's set to the "Shortbread" layer. Look for the "Layers" menu on the right.
    - Stephen304 1y ago
      Hmm I tried the shortbread layer and while it looks nice it still pixelates when zooming in until it loads the new zoom level
      - orblivion 1y ago
        I guess you're right. I see the same on my desktop Firefox on Linux. But on my Android phone it's pretty smooth.
        Stephen304 1y ago
        It seems to just not work in Firefox for me, it's the same for me on FF Android but in Chrome it's beautiful! Constant text size while zooming and it's super smooth. Edit: It also weirdly doesn't work on Chrome on Linux for me either, only Chrome on android. Oh well, hopefully they can bring support everywhere eventually.
- SigmundA 1y ago
  Not SVG, its Mapbox Vector tile format which is like Geojson coded in protobuf it is then rendered to raster in the browser using webgl typically. https://github.com/mapbox/vector-tile-spec/tree/master/2.0 https://github.com/mapbox/vector-tile-spec/tree/master/2.0 SVG is an XML based format that browsers render naitively, completely different. https://en.wikipedia.org/wiki/SVG https://en.wikipedia.org/wiki/SVG
- orblivion 1y ago
  Someone please correct me if I'm wrong here, but I think there's an additional benefit. Traditional process is: OSM Database -> PNGs -> Your screen The first arrow decides what data to pull out and how to draw it. The new process is: OSM Database -> Vector Tiles -> Your Screen The first arrow decides what data to pull out. The second arrow decides how to draw it. So given your vector tiles, you can choose and tweak the style that it's drawn as, deciding how (and if) to display certain things. And you can tweak that in your browser. That's useful for devs and users. "Night Mode", "Show bike lanes" (maybe?), etc. Also relevant is that the vector tile is not only in a couple formats (pmtiles, mbtiles) but conforms to a couple different schemas (Shortbread, OpenMapTiles) which determines what kinds of data shows up. For instance (I'm just making up this example) one schema might have "big" "medium" and "small" roads. Another schema might just have "big" and "small". The transformation process will decide which kinds of roads in the OSM database map on to which type of road in the schema. (I think it turns out that you can't realistically just pull out all of the OSM database data, you have to pare it down). And then certain styles (Americana, etc) work for specific schemas, deciding things like "big roads are black", etc.
  - SigmundA 1y ago
    More like OSM Database -> PNGs -> PNG Decoder in browser-> Your screen vs OSM Database -> Vector Tiles -> MaplibreGL.js -> WebGL -> Your Screen
    - bugsMarathon88 1y ago
      Could you please comment on any security implications of executing community-generated vector tile content, compared to classic PNG decoding?
      - lxgr 1y ago
        I don't think anything's being executed here, in the same sense that both PDF (without JavaScript, at least) and JPEG are "data only", even though one uses vectors while the other only supports raster graphics.
      - 1y ago
stevage 1y ago
Fun fact: I wrote a lot of that article :) https://en.wikipedia.org/w/index.php?title=Vector_tiles&oldid=655303211 https://en.wikipedia.org/w/index.php?title=Vector_tiles&oldi...

I had no idea what vector tiles were and the page doesn't explain it. https://en.wikipedia.org/wiki/Vector_tiles https://en.wikipedia.org/wiki/Vector_tiles

by eulgro 1y ago

I had no idea what vector tiles were and the page doesn't explain it. https://en.wikipedia.org/wiki/Vector_tiles https://en.wikipedia.org/wiki/Vector_tiles

kurtoid 1y ago

Here's how I understand it: Previously, OpenStreetMap's tile endpoints would serve pre-rasterized PNG images, so zooming in on a tile could cause it to get blurry, until your client requests a new, zoomed in tile. Now, they can serve tiles in SVG format, which scale better

rjh29 1y ago
SVG tiles use less data too, and can be recoloured/restyled.
- SigmundA 1y ago
  Not SVG
dbetteridge 1y ago
Basically that + vector tiles can store information about the tile, styles, objects or buildings etc
maelito 1y ago
> so zooming in on a tile could cause it to get blurry, until your client requests a new, zoomed in tile. Now, they can serve tiles in SVG format, which scale better They still are blurry, because openstreetmap.org uses a JS library that does not seem to support vector tiles :/
- akdor1154 1y ago
  I just tested it and it's def vector here - Firefox Android. Looks great!
- orblivion 1y ago
  Make sure it's set to the "Shortbread" layer. Look for the "Layers" menu on the right.
  - Stephen304 1y ago
    Hmm I tried the shortbread layer and while it looks nice it still pixelates when zooming in until it loads the new zoom level
    - orblivion 1y ago
      I guess you're right. I see the same on my desktop Firefox on Linux. But on my Android phone it's pretty smooth.
      - Stephen304 1y ago
        It seems to just not work in Firefox for me, it's the same for me on FF Android but in Chrome it's beautiful! Constant text size while zooming and it's super smooth. Edit: It also weirdly doesn't work on Chrome on Linux for me either, only Chrome on android. Oh well, hopefully they can bring support everywhere eventually.
SigmundA 1y ago
Not SVG, its Mapbox Vector tile format which is like Geojson coded in protobuf it is then rendered to raster in the browser using webgl typically. https://github.com/mapbox/vector-tile-spec/tree/master/2.0 https://github.com/mapbox/vector-tile-spec/tree/master/2.0 SVG is an XML based format that browsers render naitively, completely different. https://en.wikipedia.org/wiki/SVG https://en.wikipedia.org/wiki/SVG
orblivion 1y ago
Someone please correct me if I'm wrong here, but I think there's an additional benefit. Traditional process is: OSM Database -> PNGs -> Your screen The first arrow decides what data to pull out and how to draw it. The new process is: OSM Database -> Vector Tiles -> Your Screen The first arrow decides what data to pull out. The second arrow decides how to draw it. So given your vector tiles, you can choose and tweak the style that it's drawn as, deciding how (and if) to display certain things. And you can tweak that in your browser. That's useful for devs and users. "Night Mode", "Show bike lanes" (maybe?), etc. Also relevant is that the vector tile is not only in a couple formats (pmtiles, mbtiles) but conforms to a couple different schemas (Shortbread, OpenMapTiles) which determines what kinds of data shows up. For instance (I'm just making up this example) one schema might have "big" "medium" and "small" roads. Another schema might just have "big" and "small". The transformation process will decide which kinds of roads in the OSM database map on to which type of road in the schema. (I think it turns out that you can't realistically just pull out all of the OSM database data, you have to pare it down). And then certain styles (Americana, etc) work for specific schemas, deciding things like "big roads are black", etc.
- SigmundA 1y ago
  More like OSM Database -> PNGs -> PNG Decoder in browser-> Your screen vs OSM Database -> Vector Tiles -> MaplibreGL.js -> WebGL -> Your Screen
  - bugsMarathon88 1y ago
    Could you please comment on any security implications of executing community-generated vector tile content, compared to classic PNG decoding?
    - lxgr 1y ago
      I don't think anything's being executed here, in the same sense that both PDF (without JavaScript, at least) and JPEG are "data only", even though one uses vectors while the other only supports raster graphics.
    - 1y ago

stevage 1y ago

Fun fact: I wrote a lot of that article :) https://en.wikipedia.org/w/index.php?title=Vector_tiles&oldid=655303211 https://en.wikipedia.org/w/index.php?title=Vector_tiles&oldi...