diff --git a/src/screens/Map.tsx b/src/screens/Map.tsx
index 6b29d3e..a5f4c5b 100644
--- a/src/screens/Map.tsx
+++ b/src/screens/Map.tsx
@@ -4,6 +4,38 @@ import { check, PERMISSIONS, request, requestMultiple, RESULTS } from 'react-nat
import MapView, { Marker, UrlTile, Region } from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
+// Generate a small Leaflet page showing markers (used as Android fallback)
+const makeLeafletHtml = (centerLat: number, centerLng: number, pointsJson: string) => `
+
+
+
+
+
+
+
+
+
+
+
+`;
+
type Props = { onClose?: () => void };
class ErrorBoundary extends React.Component {
@@ -41,6 +73,21 @@ export default function Map({ onClose }: Props) {
const [mapAttempt, setMapAttempt] = useState(false);
const [mapError, setMapError] = useState(null);
+ // --- Sample points and group visibility state ---
+ const SAMPLE_POINTS = [
+ { id: 'p1', latitude: 22.3039, longitude: 70.8022, group: 'Restaurants', title: 'Restaurant A' },
+ { id: 'p2', latitude: 22.3090, longitude: 70.8070, group: 'Restaurants', title: 'Restaurant B' },
+ { id: 'p3', latitude: 22.2980, longitude: 70.8000, group: 'Parks', title: 'Park A' },
+ { id: 'p4', latitude: 22.3140, longitude: 70.7950, group: 'Hospitals', title: 'Hospital A' },
+ { id: 'p5', latitude: 22.3100, longitude: 70.8100, group: 'Parks', title: 'Park B' },
+ ];
+ const [points] = useState(SAMPLE_POINTS);
+ const groupList = Array.from(new Set(points.map(p => p.group)));
+ const colorPalette = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'];
+ const getGroupColor = (group: string) => colorPalette[groupList.indexOf(group) % colorPalette.length];
+ const [groupsVisible, setGroupsVisible] = useState>(() => Object.fromEntries(groupList.map(g => [g, true])));
+ const toggleGroup = (g: string) => setGroupsVisible(prev => ({ ...prev, [g]: !prev[g] }));
+
useEffect(() => {
const init = async () => {
setLoading(true);
@@ -170,18 +217,7 @@ export default function Map({ onClose }: Props) {
if (permissionStatus === 'granted') getCurrentLocation();
else retryPermission();
};
- return (
-
- )
return (
@@ -216,20 +252,36 @@ export default function Map({ onClose }: Props) {
) : mapAttempt ? (
- { setMapError(e); console.error('Map render error:', e); }}>
-
-
-
-
- Linking.openURL('https://www.openstreetmap.org/copyright')}>
- © OpenStreetMap
-
-
+
+
+ {groupList.map(g => (
+ toggleGroup(g)}>
+
+ {g}
+
+ ))}
+
+
+ { setMapError(e); console.error('Map render error:', e); }}>
+
+
+
+ {points.filter(p => groupsVisible[p.group]).map(p => (
+
+ ))}
+
+
+
+ Linking.openURL('https://www.openstreetmap.org/copyright')}>
+ © OpenStreetMap
+
+
+
) : (
Map is ready. Tap "Try Map" to open it.
@@ -257,4 +309,9 @@ const styles = StyleSheet.create({
actionText: { color: '#fff', fontWeight: '600' },
osmAttribution: { position: 'absolute', bottom: 16, right: 8, backgroundColor: 'rgba(255,255,255,0.9)', padding: 6, borderRadius: 6 },
osmAttributionText: { fontSize: 10, color: '#333' },
+ legendContainer: { position: 'absolute', top: 12, right: 12, zIndex: 20, flexDirection: 'column', backgroundColor: 'rgba(255,255,255,0.95)', padding: 8, borderRadius: 8 },
+ legendItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6, paddingHorizontal: 8, borderRadius: 6, marginBottom: 6 },
+ legendItemDisabled: { opacity: 0.4 },
+ legendDot: { width: 12, height: 12, borderRadius: 3, marginRight: 8 },
+ legendLabel: { fontSize: 12, color: '#111' },
});
\ No newline at end of file