MapExample.js

import React, { useRef, useState } from 'react';
import { 
  View, 
  StyleSheet, 
  Button, 
  TextInput, 
  ScrollView,
  Text,
  SafeAreaView
} from 'react-native';
import EnhancedMapComponent from './EnhancedMapComponent';

const MapExample = () => {
  const mapRef = useRef(null);
  const [longitude, setLongitude] = useState('116.3');
  const [latitude, setLatitude] = useState('39.9');
  const [imageUrl, setImageUrl] = useState('https://cdn.luogu.com.cn/upload/image_hosting/evb3j8e2.png');
  const [imageId, setImageId] = useState('1');
  
  // Custom image press handler
  const handleImagePress = (id, event) => {
    console.log(`Custom handler for image ${id} press`, event);
    // You can implement your own custom logic here
  };
  
  // Example actions using the map component's methods
  const handleAddPoint = () => {
    if (mapRef.current) {
      mapRef.current.appendPoint(parseFloat(longitude), parseFloat(latitude));
    }
  };
  
  const handleClearMap = () => {
    if (mapRef.current) {
      mapRef.current.clearMap();
    }
  };
  
  const handleAddImage = () => {
    if (mapRef.current) {
      mapRef.current.addImageOnMap(
        imageUrl,
        imageId,
        parseFloat(longitude),
        parseFloat(latitude)
      );
      
      // Auto-increment ID for convenience
      setImageId((parseInt(imageId) + 1).toString());
    }
  };
  
  const handleSetColor = () => {
    if (mapRef.current) {
      // Set a random color
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      mapRef.current.setColor(r, g, b);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.mapContainer}>
        <EnhancedMapComponent
          ref={mapRef}
          style={styles.map}
          onImagePress={handleImagePress}
          showImageActions={false}
          imageDiameter={30}
        />
      </View>
      
      <ScrollView style={styles.controls}>
        <Text style={styles.title}>Map Controls</Text>
        
        <View style={styles.inputGroup}>
          <Text>Longitude:</Text>
          <TextInput
            style={styles.input}
            value={longitude}
            onChangeText={setLongitude}
            keyboardType="numeric"
          />
        </View>
        
        <View style={styles.inputGroup}>
          <Text>Latitude:</Text>
          <TextInput
            style={styles.input}
            value={latitude}
            onChangeText={setLatitude}
            keyboardType="numeric"
          />
        </View>
        
        <View style={styles.inputGroup}>
          <Text>Image URL:</Text>
          <TextInput
            style={styles.input}
            value={imageUrl}
            onChangeText={setImageUrl}
          />
        </View>
        
        <View style={styles.inputGroup}>
          <Text>Image ID:</Text>
          <TextInput
            style={styles.input}
            value={imageId}
            onChangeText={setImageId}
          />
        </View>
        
        <View style={styles.buttonGroup}>
          <Button title="Add Point" onPress={handleAddPoint} />
          <Button title="Add Image" onPress={handleAddImage} />
          <Button title="Set Random Color" onPress={handleSetColor} />
          <Button title="Clear Map" onPress={handleClearMap} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapContainer: {
    flex: 2,
  },
  map: {
    flex: 1,
  },
  controls: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  inputGroup: {
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    padding: 8,
    marginTop: 4,
    backgroundColor: '#fff',
  },
  buttonGroup: {
    marginTop: 16,
    gap: 8,
  },
});

export default MapExample;