File size: 1,894 Bytes
5c876be | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import React from 'react';
import { StyleSheet } from 'react-native';
import { useTheme, Surface } from 'react-native-paper';
import { LeafletMap } from './LeafletMap';
import type { LatLng } from '../../types/location';
export interface RoutePreviewProps {
/** Origin coordinate */
origin: LatLng;
/** Destination coordinate */
destination: LatLng;
/** Height of the preview in dp (default 180) */
height?: number;
/** Optional color for the route polyline */
polylineColor?: string;
}
/**
* Small, non-interactive map showing a route polyline between two
* points. Wrapped in a Surface with rounded corners.
*/
export function RoutePreview({
origin,
destination,
height = 180,
polylineColor = '#1B6B4D',
}: RoutePreviewProps) {
const theme = useTheme();
// Calculate a center point between origin and destination
const centerLat = (origin.lat + destination.lat) / 2;
const centerLng = (origin.lng + destination.lng) / 2;
return (
<Surface
style={[
styles.container,
{
height,
borderRadius: theme.roundness,
backgroundColor: theme.colors.surfaceVariant,
},
]}
elevation={1}
>
<LeafletMap
center={{ lat: centerLat, lng: centerLng }}
zoom={14}
markers={[
{ lat: origin.lat, lng: origin.lng, type: 'origin', title: 'Origin' },
{
lat: destination.lat,
lng: destination.lng,
type: 'destination',
title: 'Destination',
},
]}
polylines={[
{
points: [origin, destination],
color: polylineColor,
weight: 5,
},
]}
interactive={false}
showCurrentLocation={false}
/>
</Surface>
);
}
const styles = StyleSheet.create({
container: {
overflow: 'hidden',
},
});
|