Recommended way to switch tile urls in mapbox-gl-js -
situation
we render raster layer map. layer's source has initial tile-url. want change tile-url of source , trigger reload new tiles. e.g. have tiles different points in time , want step through different time steps.
what can done in mapbox-gl@0.21.0
map.addsource('tile-source', {...}); map.addlayer('tile-layer', {source: 'tile-source', ...}); // react button click or ever trigger tile url change ... const source = map.getsource('tile-source'); source.tiles = ['new-tile-url']; source._pyramid.reload();
this works fine. but, of course, using private methods bad practice; see reason below:
what can done current version github (latest commit b155118, 2016-07-28)
// init map, add layer, add source, above const source = map.getsource('tile-source'); source.tiles = ['new-tile-url']; map.styles.sources['tile-source'].reload();
it has done way, because former tilepyramid
has been refactored sourcecache
. here calling reload()
on sourcecache
not rastertilesource
. seems don't have use private methods anymore, though still looks undocumented api, may break in future versions.
also there seems issue memory leak when calling reload()
: https://github.com/mapbox/mapbox-gl-js/issues/2266
additionally cache gets cleared when calling reload()
. doesn't seem issue.
// yields `rastertilesource` instance map.getsource('tile-source'); // yields `sourcecache` instance map.styles.sources['tile-source']; // what's confusing too, @ least namingwise map.getstyle(); // <-- yields maps (visual) style
the sourcecache
has rastertilesource
instance private _source
field.
question
what recommended way this? feature being worked on? there explanation why isn't feature (yet) or never be?
it sounds you're trying change url of raster
source. proper way in gl js remove source , add new source same id , new url.
map.addsource('tile-source', {...}); map.addlayer('tile-layer', {source: 'tile-source', ...}); // react button click or ever trigger tile url change ... map.removesource('tile-source'); map.addsource('tile-source', {tiles: ['new-tile-url'], ...});
Comments
Post a Comment