maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set marker image on the map

Browse source
This commit is contained in:
Maarten 2024-08-13 11:58:49 +02:00
parent 37ad9d5a2f
commit e706d0c9fb
1 changed files with 32 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/(tabs)/map.tsx
View file

@ -25,6 +25,7 @@ export default function MapScreen() {
const [ typesSet, setTypesSet ] = useState( false ); const [ typesSet, setTypesSet ] = useState( false );
const [ coordinates, setCoordinates ] = useState<any>( [] ); const [ coordinates, setCoordinates ] = useState<any>( [] );
const [ markers, setMarkers ] = useState<any>( [] ); const [ markers, setMarkers ] = useState<any>( [] );
const [ activeCalloutId, setActiveCalloutId ] = useState( null );
// Load session // Load session
useEffect( () => { useEffect( () => {
@ -38,6 +39,8 @@ export default function MapScreen() {
// Load markers and types // Load markers and types
const loadMarkers = () => { const loadMarkers = () => {
handleCloseAllCallouts();
mapRef.current?.getVisibleBounds().then( (bounds) => { mapRef.current?.getVisibleBounds().then( (bounds) => {
Request Request
.post( 'locations', { .post( 'locations', {
@ -70,6 +73,8 @@ export default function MapScreen() {
// Enable/disable type // Enable/disable type
const toggleSwitch = (index: any) => { const toggleSwitch = (index: any) => {
handleCloseAllCallouts();
const newData = types.map( (item: any, key: any) => const newData = types.map( (item: any, key: any) =>
key === index ? { ...item, isEnabled: !item.isEnabled } : item key === index ? { ...item, isEnabled: !item.isEnabled } : item
); );
@ -97,6 +102,15 @@ export default function MapScreen() {
} ); } );
} }
const handleCalloutPress = (id: any) => {
console.log('set active', id);
setActiveCalloutId( id );
};
const handleCloseAllCallouts = () => {
setActiveCalloutId( null );
};
return ( return (
<SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}> <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedView style={styles.container}> <ThemedView style={styles.container}>
@ -128,12 +142,25 @@ export default function MapScreen() {
key={marker.id.toString()} key={marker.id.toString()}
id={marker.id.toString()} id={marker.id.toString()}
coordinate={marker.coordinate} coordinate={marker.coordinate}
onSelected={() => handleCalloutPress( marker.id )}
> >
<Callout title={marker.number}> <>
<ThemedView style={styles.callout}> <View style={{ width: 50, height: 50 }}>
<ThemedText>{marker.description + ' - ' + marker.street}</ThemedText> <Image
</ThemedView> source={{ uri: marker.marker_image }}
</Callout> style={{ width: 50, height: 50 }}
resizeMode="contain"
/>
</View>
{/*{activeCalloutId === marker.id && (*/}
{/* <Callout title={marker.number}>*/}
{/* <ThemedView style={styles.callout}>*/}
{/* <ThemedText>{marker.description + ' - ' + marker.street}</ThemedText>*/}
{/* </ThemedView>*/}
{/* </Callout>*/}
{/*)}*/}
</>
</PointAnnotation> </PointAnnotation>
) )} ) )}
</MapView> </MapView>