[Bug]: Mapbox error StyleSource.removeFromMap

[JClackett]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

@rnmapbox/maps version

10.0.15

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

When changing the styleUrl when I have active layers/sources, mapbox throws the error:

 ERROR  Mapbox error StyleSource.removeFromMap id: twcRadar Source 'twcRadar' is in use, cannot remove {"level": "error", "message": "StyleSource.removeFromMap id: twcRadar Source 'twcRadar' is in use, cannot remove"}

Expected behavior

The layer persists and doesn't throw an error

Notes / preliminary analysis

No response

Additional links and references

No response

[mfazekas]

@JClackett thanks for the report. Can you repro the same issue with the posted example? I don't see twcRadar in the example. Also please test with latest betas.

[JClackett]

Will try latest beta!

[JClackett]

Still there, not really sure how to give a repro as im using a private source with api key,
but all im doing is rendering this inside the map view, so it just the repro but with these layers instead. Just some simple state to switch the styleUrls between two different styles.

   <RasterSource
        id="twcRadar"
        tileSize={256}
        tileUrlTemplates={[
          `https://api.weather.com/v3/TileServer/tile/radarEurope?ts=<a-unix-timestamp>&xyz={x}:{y}:{z}&apiKey=<my-api-key>`,
        ]}
      />
      <RasterLayer sourceID="twcRadar" id="radar" style={{ rasterOpacity: 0.4 }} />

[mfazekas]

Find a raster layer source on the internet the doesn't require password like bellow, and also add a switch, so it changes styleUrl. And verify that you can reproduce the issue on the example you're posting.

import React from 'react';
import {
  Images,
  MapView,
  RasterLayer,
  RasterSource,
  Camera,
} from '@rnmapbox/maps';

const styles = {
  matchParent: { flex: 1 },
};

export default function RasterSourceExample() {
  return (
    <MapView style={styles.matchParent}>
      <Camera
        defaultSettings={{
          centerCoordinate: [-74.00597, 40.71427],
          zoomLevel: 14,
        }}
      />
      <RasterSource
        id="stamen-watercolor"
        titleSize={256}
        tileUrlTemplates={['https://tile.openstreetmap.org/{z}/{x}/{y}.png']}
      />
      <RasterLayer
        id="stamen-watercolor-layer"
        sourceID="stamen-watercolor"
        style={{ rasterOpacity: 0.85 }}
      />
    </MapView>
  );
}

[mfazekas]

Closing this will reopen if someone provides a component that reproduces the issue.

[Fuggel]

@mfazekas, isn't it possible to just remove or add layers explicitly? I am also getting a similar error when a layer is not present anymore on my map: ERROR Mapbox [error] RNMBXMapView | Map load failed: {type=source, message=Source route-source is not in style, begin=4988175947546}