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