OpenStreetMap
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
Discussion
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.
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.
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
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.
Comment from PlaneMad on 23 December 2017 at 11:30
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.
Comment from ikonor on 27 December 2017 at 19:46
Thanks for the example. Nice gimmick transitioning the saturation.
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.
Comment from ikonor on 3 February 2018 at 17:29
Update: issue #4552 is fixed in Release v0.44.0.
Comment from PlaneMad on 27 November 2018 at 11:47
@mmd Updated the code to not use the Mapbox API. One just needs to use the empty style from https://cdn.jsdelivr.net/gh/mapbox/mapbox-gl-styles/styles/empty-v8.json