rs-react-native-map-clustering/dist/lib/ClusteredMarker.js

React Native Map Clustering both for Android and iOS with TypeScript support

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_maps_1 = require("react-native-maps");
const helpers_1 = require("./helpers");
// ----------------------------------------------------------------------
// Using the ClusterMarkerProps interface from types.ts
const ClusteredMarker = ({ geometry, properties, onPress, clusterColor, clusterTextColor, clusterFontFamily, tracksViewChanges }) => {
    const points = properties.point_count;
    const { width, height, fontSize, size } = (0, helpers_1.returnMarkerStyle)(points);
    // Memoize style calculations to avoid recalculation on re-renders
    const markerStyle = (0, react_1.useMemo)(() => ({
        containerStyle: { width, height },
        wrapperStyle: {
            backgroundColor: clusterColor,
            width,
            height,
            borderRadius: width / 2
        },
        clusterStyle: {
            backgroundColor: clusterColor,
            width: size,
            height: size,
            borderRadius: size / 2
        },
        textStyle: {
            color: clusterTextColor,
            fontSize,
            fontFamily: clusterFontFamily,
            fontWeight: 'bold'
        },
        zIndex: points + 1
    }), [points, clusterColor, clusterTextColor, clusterFontFamily, width, height, size, fontSize]);
    // Generate a stable key from coordinates and cluster ID
    const markerKey = (0, react_1.useMemo)(() => `${geometry.coordinates[0]}_${geometry.coordinates[1]}_${properties.cluster_id || ''}`, [geometry.coordinates, properties.cluster_id]);
    // Memoize the marker content to prevent unnecessary re-renders
    const markerContent = (0, react_1.useMemo)(() => (<react_native_1.TouchableOpacity activeOpacity={0.5} style={[styles.container, markerStyle.containerStyle]}>
				<react_native_1.View style={[styles.wrapper, markerStyle.wrapperStyle]}/>
				<react_native_1.View style={[styles.cluster, markerStyle.clusterStyle]}>
					<react_native_1.Text style={[styles.text, markerStyle.textStyle]}>{points}</react_native_1.Text>
				</react_native_1.View>
			</react_native_1.TouchableOpacity>), [markerStyle, points]);
    // Memoize coordinate to prevent unnecessary re-renders
    const coordinate = (0, react_1.useMemo)(() => ({
        longitude: geometry.coordinates[0],
        latitude: geometry.coordinates[1]
    }), [geometry.coordinates]);
    return (<react_native_maps_1.Marker key={markerKey} coordinate={coordinate} style={{ zIndex: markerStyle.zIndex }} onPress={onPress} tracksViewChanges={tracksViewChanges}>
			{markerContent}
		</react_native_maps_1.Marker>);
};
const styles = react_native_1.StyleSheet.create({
    container: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    wrapper: {
        position: 'absolute',
        opacity: 0.5,
        zIndex: 0
    },
    cluster: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1
    },
    text: {
        fontWeight: 'bold'
    }
});
exports.default = (0, react_1.memo)(ClusteredMarker);