[Bug]: HeatMap won't show and makes app crash. If the "Id of

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

Android

`@rnmapbox/maps` version

10.1.0-beta.18

Standalone component to reproduce

import React, { useState, useEffect } from 'react'; import { View, TouchableOpacity, ImageBackground, Text } from 'react-native'; import MapboxGL, { ShapeSource, SymbolLayer, Marker, MarkerView, Camera, UserLocationRenderMode } from '@rnmapbox/maps'; import { useNavigation, useFocusEffect } from '@react-navigation/native';

const MapComponent = () => { // Define state variables and any other hooks const [mapLoaded, setMapLoaded] = useState(false); const [isBlurVisible, setBlurVisible] = useState(false); const [filteredClubs, setFilteredClubs] = useState([]); const [isFilteredByDate, setIsFilteredByDate] = useState([]); const [isFilteredByDateOfOpening, setIsFilteredByDateOfOpening] = useState([]); const navigation = useNavigation(); const filteredHeatmapData=[] const heatmapData=[] const renderMarkers = () => {

    let clubstorender;
    if (isFilteredByDate || isFilteredByDateofOpening) {
        clubstorender = filteredClubs;
    }
    else {
        clubstorender = ClubsandEvents;
    }
    return clubstorender.map((club, rank) => {
        let image;
        let opening = false;
        const defaultMarkerSize = 70;
        const defaultImageSize = 40;

        let markerSize = defaultMarkerSize;
        let imageSize = defaultImageSize;

        if (club.image.startsWith("http")) {
            image = club.image;
        } else {
            image = `data:image/gif;base64,${club.image}`;
        }

        let isClubFiltered;

          let  gifUri = `https://patt.club/gif.png`; 
        return (
            < MapboxGL.MarkerView

                key={`${club.clubname}-${isFilteredByDate ? "filtered" : "unfiltered"
                    }`
                }
                id={`${club.clubname}-${isFilteredByDate ? "filtered" : "unfiltered"
                    }`}
                title={club.clubname}
                coordinate={[club.lng, club.lat]}
                allowOverlap={true}
            >
                <TouchableOpacity
                    onPressIn={() => {
                        navigation.navigate("ClubsPage", { club: club });
                    }}
                >
                    <ImageBackground
                        source={{
                            uri: gifUri
                        }} // GIF URL
                        style={{
                            width: markerSize,
                            height: markerSize,
                            borderRadius: 50,
                            //position: "relative",
                            backgroundClip: "padding-box",
                            paddingTop: 30,
                            paddingHorizontal: 15
                        }}
                        imageStyle={{
                            resizeMode: "cover",
                            opacity: 0.8
                        }}
                    >
                        <ImageBackground
                            source={{ uri: image }}
                            style={{
                                width: imageSize,
                                height: imageSize,
                                backgroundColor: "transparent",
                                borderRadius: 125,
                                overflow: "hidden",
                                overflow: "hidden",
                                borderWidth: 2,
                                borderColor: "white",
                                boxShadow:
                                    "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
                                backgroundImage:
                                    "linear-gradient(to bottom right, blue, red)",
                                backgroundClip: "padding-box"
                            }}
                        ></ImageBackground>
                        {(isFilteredByDate && !isFilteredByDateofOpening && (
                            <View style={{
                                position: 'absolute',
                                bottom: 0,
                                left: 5,
                                borderColor: "white",
                                borderWidth: 0,
                                backgroundColor: 'blue',
                                borderRadius: 10,
                                width: 15,
                                height: 15,
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <Text style={{ color: 'white', fontSize: 10 }}>
                                    { 1}
                                </Text>
                            </View>
                        )}
                    </ImageBackground>
                </TouchableOpacity>
            </MapboxGL.MarkerView >
        );
    });
};
const renderHeatmap = () => {
    const dataToUse = FilteredHeatmapData || HeatmapData; 
    if (!dataToUse) return null;

    return (
        <MapboxGL.ShapeSource
            id="heatmapDataSource"
            shape={{
                type: "FeatureCollection",
                features: dataToUse.map((point, index) => ({
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: [point?.long, point?.lat]
                    },
                    properties: {
                        id: index.toString(),
                        weight: point.weight
                    }
                }))
            }}
        >
            {!isGhostModeEnabled && (
                <MapboxGL.HeatmapLayer
                    id="heatmapDataSource"
                    sourceID="heatmapDataSource"
                    sourceLayerID=""
                    style={{
                        visibility: "visible",
                        heatmapRadius: 50,
                        heatmapWeight: 1,
                        heatmapIntensity: 0.4,
                        heatmapColor: [
                            "interpolate",
                            ["linear"],
                            ["heatmap-density"],
                            0,
                            "rgba(0, 0, 255, 0)",
                            0.1,
                            "royalblue",
                            0.3,
                            "cyan",
                            0.5,
                            "lime",
                            0.7,
                            "yellow",
                            1,
                            "red"
                        ],
                        heatmapOpacity: 0.6
                    }}
                />
            )}
        </MapboxGL.ShapeSource>
    );
};

return (
    <View style={styles.page}>
        <View style={styles.container}>
            {HeatmapData && (
                <>
                    <MapboxGL.MapView
                        key={reloadMap ? "map1" : "map2"}
                        style={styles.map}
                        styleURL={mapStyle}
                        projection="globe"
                        scaleBarEnabled={false}
                        onMapLoadingError={(error) => {
                            initializeMapboxthrougherror();
                        }}
                        onDidFinishLoadingStyle={() => {
                            setMapLoaded(true);
                        }}
                        onDidFinishRenderingFrame={() => {
                            setMapLoaded(true);
                        }}
                    >
                        {renderMarkers()}
                        {renderHeatmap()}
                    </MapboxGL.MapView>
                </>
            )}
            {isBlurVisible && (
                <BlurView
                    style={{
                        position: "absolute",
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        zIndex: 10
                    }}
                    blurType="dark"
                    blurAmount={9}
                />
            )}
            <Menu
                setFilteredClubs={setFilteredClubs}
                setBlurVisible={setBlurVisible}
                HeatmapData={HeatmapData}
            />
        </View>
    </View>
);

};

export default Mapcomp;

const styles = StyleSheet.create({ page: { flex: 1, }, container: { height: '100%', width: '100%', }, map: { flex: 1 }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, textcontainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { color: 'black', }, modalContainer: { marginTop: "35%", alignSelf: "center", backgroundColor: "white", borderRadius: 10, padding: 20, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, height: 220 }, checkbox: { width: 20, height: 20, margin: 5, justifyContent: "center", alignItems: "center", borderWidth: 1, borderColor: "#000" }, checked: { width: 12, height: 12, backgroundColor: "#000" }, unchecked: { width: 12, height: 12, backgroundColor: "#fff" }, close: { marginBottom: 10, alignSelf: "flex-end" }

});

Observed behavior and steps to reproduce

There is literally no error that gets thrown, the app crashes. If the "Id" of the heatMapLayer is removed then the app won't crash but the heatmap won't show.

Expected behavior

No response

Notes / preliminary analysis

If the "Id" of the heatMapLayer is removed then the app won't crash but the heatmap won't show.

Additional links and references

No response

rnmapbox / maps