rnmapbox / maps

A Mapbox react native module for creating custom maps
MIT License
2.27k stars 848 forks source link

[Bug]: Changing map style when using a raster layer causes error #3503

Open olofholmlund opened 5 months ago

olofholmlund commented 5 months ago

Mapbox Implementation

Mapbox

Mapbox Version

10.17.0

React Native Version

0.74.1

Platform

iOS

@rnmapbox/maps version

10.1.24

Standalone component to reproduce

import React from "react";
import { StyleSheet, View, Button } from "react-native";

import Mapbox, {
  Camera,
  MapView,
  RasterLayer,
  RasterSource,
} from "@rnmapbox/maps";
import { useState } from "react";

const STYLE_1 = {
  styleName: "Style 1",
  mapStyle: "mapbox://styles/mapbox/streets-v12",
  wmsTileUrls: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
};
const STYLE_2 = {
  styleName: "Style 2",
  mapStyle: "mapbox://styles/mapbox/satellite-v9",
  wmsTileUrls: "https://a.tile.opentopomap.org/{z}/{x}/{y}.png",
};

export default function TabTwoScreen() {
  const [mapStyle, setMapStyle] = useState(STYLE_1);

  return (
    <>
      <MapView style={styles.mapView} styleURL={mapStyle.mapStyle}>
        <Camera
          defaultSettings={{
            centerCoordinate: [-87.622088, 41.878781],
            zoomLevel: 10,
          }}
        />
        <RasterSource
          id={mapStyle.styleName}
          tileSize={256}
          tileUrlTemplates={[mapStyle.wmsTileUrls]}
        >
          <RasterLayer
            id={`${mapStyle.styleName}-raster`}
            sourceID={mapStyle.styleName}
            layerIndex={1}
            style={{ visibility: "visible" }}
          />
        </RasterSource>
      </MapView>
      <View style={{ width: "100%", backgroundColor: "white" }}>
        <Button onPress={() => setMapStyle(STYLE_1)} title="Style1"></Button>
        <Button onPress={() => setMapStyle(STYLE_2)} title="Style2"></Button>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  mapView: { height: "80%", width: "100%" },
});

Observed behavior and steps to reproduce

Toggle between styles using Style1 / Style2 buttons. This will cause the following error to be written to the console:

Mapbox [error] RNMBXLayer.removeFromMap: removing layer failed for layer Style N-raster: Layer Style N-raster does not exist

Video

Expected behavior

No error should happen when switching styles

Notes / preliminary analysis

It's related to using a raster source (or possibly other source) when switching map styles. Possibly mapbox tries to remove the layer too late, causing the error.

Additional links and references

No response

joevtap commented 1 week ago

Any workarounds on this while it's not fixed?