OpenStreetMap

Viewing OpenStreetMap tiles in GL

Posted by PlaneMad on 22 December 2017 in English (English)

Was fiddling through the Mapbox GL JS API today, and thought i'd see if I can get the default OSM raster tiles to render on GL. Turned out to be surprisingly easy using this example.

Result:

Demo+code: http://bl.ocks.org/planemad/5670e14b67e3eb82b707ba46c9d3010f

Notes:

  • The OSM tiles are raster which are rendered at discrete zoom levels, but the GL interface allows for smooth scrolling. The result might be slightly blurry tiles and may not be as crisp as viewing them in Leaflet.
  • The original example was for adding a WMS layer. So any external TMS/WMS layer should work by swapping the tile url in the code. See https://wiki.openstreetmap.org/wiki/Tile_servers for options.
  • The color transition of the tiles from b&w was achieved using the raster-saturation property and zoom functions. Not sure if this is practically useful, but definitely avoids needing to render separate b&w tiles.
  • An alternative to using Mapbox GL JS for viewing the OSM tiles in GL is to use OpenLayers

Comment from imagico on 22 December 2017 at 16:01

You should however add that this is just the normal raster tiles from the osm.org tile servers rendered with WebGL. It is not a vector tiles based version of the standard style like what Rory/Geofabrik have showed some time ago:

https://github.com/geofabrik/openstreetmap-carto-vector-tiles

Any post processing like for colors or rotation or other coordinate system transforms come with the usual problems of posterization/sampling artefacts etc.

Openlayers/Leaflet IIRC also offer b&w conversion, rotation etc.

Hide this comment

Comment from PlaneMad on 22 December 2017 at 20:25

OpenLayers is definitely an alternative and have added that. Not sure if leaflet can do this, do share an example if you find it.

Creating a GL stylesheet of osm-carto will be quite a challenge, the label placement/collision in GL does not seem as mature as mapnik. Still might be a interesting project to try out.

Hide this comment

Comment from imagico on 22 December 2017 at 20:43

Grayscale rendering and other color processing with Leaflet - using canvas/CSS and not WebGL:

http://humangeo.github.io/leaflet-tilefilter/demo.html

Hide this comment

Comment from mmd on 23 December 2017 at 11:27

I noticed that your demo loads vector tiles from tiles.mapbox.com in addition to the raster tiles from tile.openstreetmap.org (although you won't see them). And then there's the Mapbox API key, which I wouldn't expect for such a demo.

Hide this comment

Comment from PlaneMad on 23 December 2017 at 11:30

loads vector tiles from tiles.mapbox.com in addition to the raster tiles from tile.openstreetmap.org

Thats right, haven't figured out how to have just a blank style and add a TMS layer. One would not need a API key then.

Hide this comment

Comment from ikonor on 27 December 2017 at 19:46

Thanks for the example. Nice gimmick transitioning the saturation.

  • The OSM tiles are raster which are rendered at discrete zoom levels, but the GL interface allows for smooth scrolling. The result might be slightly blurry tiles and may not be as crisp as viewing them in Leaflet.

Not sure if above quote is implying this: not only scaled tiles at fractional zooms are blurry as expected, but currently on some environments also at discrete zoom levels, see issue #4552 Raster tiles aren't perfectly crisp at integer zoom levels.

Hide this comment

Comment from ikonor on 3 February 2018 at 17:29

Update: issue #4552 is fixed in Release v0.44.0.

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment