@chauffleet/expo-custom-map
Version:
Open source custom map library for Expo/React Native. Use your own tiles without Google Maps, Mapbox, or API keys. Created by ChaufFleet.
82 lines • 3.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
// src/components/MarkerComponent.tsx
const react_1 = require("react");
const react_native_1 = require("react-native");
const DefaultMarkerContent = ({ title }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.defaultMarker, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.markerPin }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.markerDot }), title && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.markerLabel, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.markerLabelText, numberOfLines: 1, children: title }) }))] }));
const MarkerComponent = ({ coordinate, title, description, children, onPress, draggable = false, onDragEnd, anchor = { x: 0.5, y: 1 }, zIndex = 0, screenX = 0, screenY = 0, isVisible = true, ...props }) => {
const handlePress = (0, react_1.useCallback)(() => {
if (onPress) {
onPress();
}
}, [onPress]);
const handleDragEnd = (0, react_1.useCallback)((newCoordinate) => {
if (onDragEnd) {
onDragEnd(newCoordinate);
}
}, [onDragEnd]);
if (!isVisible) {
return null;
}
const markerStyle = [
styles.marker,
{
left: screenX - (anchor.x * 40), // 40 est la largeur par défaut du marqueur
top: screenY - (anchor.y * 40), // 40 est la hauteur par défaut du marqueur
zIndex,
},
];
const MarkerWrapper = onPress ? react_native_1.TouchableOpacity : react_native_1.View;
return ((0, jsx_runtime_1.jsx)(MarkerWrapper, { style: markerStyle, onPress: onPress ? handlePress : undefined, activeOpacity: 0.7, ...props, children: children || (0, jsx_runtime_1.jsx)(DefaultMarkerContent, { title: title }) }));
};
const styles = react_native_1.StyleSheet.create({
marker: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
defaultMarker: {
alignItems: 'center',
justifyContent: 'center',
},
markerPin: {
width: 30,
height: 30,
backgroundColor: '#FF6B6B',
borderRadius: 15,
borderWidth: 3,
borderColor: '#FFFFFF',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.3,
shadowRadius: 3,
elevation: 5,
},
markerDot: {
position: 'absolute',
width: 8,
height: 8,
backgroundColor: '#FFFFFF',
borderRadius: 4,
},
markerLabel: {
marginTop: 5,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
paddingHorizontal: 6,
paddingVertical: 2,
borderRadius: 4,
maxWidth: 120,
},
markerLabelText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '500',
textAlign: 'center',
},
});
exports.default = (0, react_1.memo)(MarkerComponent);
//# sourceMappingURL=MarkerComponent.js.map