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 osm.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
Umræða
Athugasemd eftir imagico sett inn 22. desember 2017 kl. 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.
Athugasemd eftir PlaneMad sett inn 22. desember 2017 kl. 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.
Athugasemd eftir imagico sett inn 22. desember 2017 kl. 20:43
Grayscale rendering and other color processing with Leaflet - using canvas/CSS and not WebGL:
http://humangeo.github.io/leaflet-tilefilter/demo.html
Athugasemd eftir mmd sett inn 23. desember 2017 kl. 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.
Athugasemd eftir PlaneMad sett inn 23. desember 2017 kl. 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.
Athugasemd eftir ikonor sett inn 27. desember 2017 kl. 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.
Athugasemd eftir ikonor sett inn 3. febrúar 2018 kl. 17:29
Update: issue #4552 is fixed in Release v0.44.0.
Athugasemd eftir PlaneMad sett inn 27. nóvember 2018 kl. 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