Cluster on route transition

[paullryan]

When you transition to a new route with 1.0.0.beta.3 and you have a cluster on a geoJSON source the current behavior is to remove the source with results in

mapbox-gl.js:546 Error: Source "properties" cannot be removed while layer "clusters" is using it.
    at t.removeSource (mapbox-gl.js:406)
    at e.removeSource (mapbox-gl.js:520)
    at ngx-mapbox-gl.js:470

If feels like you have fixed this with the new cluster mechanism for beta.4 + but I haven't been able to test it yet.

[Wykks]

Hi!
Thanks for reporting this issue !

I don't think it's related to cluster. This error is from mapbox-gl v0.43.0, (right now ngx-mapbox-gl only support the version 0.42.2 as set in peerDependencies).

I'll see how to handle that properly. Currently Angular call ngOnDestroy of the source first. Which was ok until mapbox-gl team decided to throw an error when a source is removed whereas some layers are using it (makes sense but tricky in ngx-mapbox-gl because I'm not sure how to ask Angular to destroy component in a custom order).

(ref mapbox/mapbox-gl-js#5562)

[paullryan]

Interesting, I'll think on it too. Thanks for the quick response.

[Wykks]

I fixed this by adding a buffer of source and layer, and actually removing them almost right away (in the same VM turn) in a defined order.
I always wanted to do something like this (that's why I use mapbox-gl functions almost only in a service and not directly in components), because it also make it so nothing is called when we just want to remove the map.
For example, if you have a map with lots of (html) markers, and you just want to remove the map; ngx-mapbox-gl was removing all makers one by one before destroying the map. It's no longer the case !

[HarelM]

I have a similar issue I'm not sure how to solve:
I have this code in a component:

<mgl-raster-source id="raster-tiles" [tiles]="[address]" [tileSize]="256" [minzoom]="minZoom" [maxzoom]="maxZoom"></mgl-raster-source>
<mgl-layer id="simple-tiles"
           type="raster"
           source="raster-tiles">

When I change the address I'm getting the following error:
Source "raster-tiles" cannot be removed while layer "simple-tiles" is using it
And then There is already a source with this ID
This is probably due to using ngInit and ngDestroy in raster source component when changing tiles, but I really don't have a good idea on how to solve it...

[sprattek]

I'm having the same issue as @HarelM with only difference that I'm using 'mgl-image-source' and changing the coordinates dynamically.

<mgl-image-source
  id="floorplanImageSource"
  [url]="floorplanImageSourceOptions.url"
  [coordinates]="floorplanImageSourceOptions.coordinates"
></mgl-image-source>
<mgl-layer
  id="floorplanImageLayer"
  source="floorplanImageSource"
  type="raster"
  [paint]="floorplanImageLayerOptions.paint"
  [layout]="floorplanImageLayerOptions.layout"
></mgl-layer>

So after doing this in my component

this.floorplanImageSourceOptions.coordinates = newCoodinates

it throws me the same errors