1+ import React , { useEffect , useMemo } from "react" ;
2+ import { MapContainer , TileLayer , useMap } from "react-leaflet" ;
3+ import "leaflet/dist/leaflet.css" ;
4+ import * as L from 'leaflet' ;
5+ import { LatLngTuple } from 'leaflet' ;
6+ import "leaflet-routing-machine" ;
17import { Flex } from "@chakra-ui/react" ;
2- import { Marker , Map as PigeonMap } from "pigeon-maps" ;
38
9+ interface RouteMapProps {
10+ start ?: [ number , number ] ;
11+ end ?: [ number , number ] ;
12+ center : LatLngTuple ;
13+ }
14+
15+ const COORDINATES_MOCKED : Record < number , [ number , number ] > = {
16+ 1 : [ 37.7749 , - 122.4194 ] , // My Home (San Francisco, downtown)
17+ 123 : [ 37.7764 , - 122.4241 ] , // Rachel's Floral Designs (near Hayes Valley)
18+ 392 : [ 37.7723 , - 122.4108 ] , // Trom Chocolatier (Mission District)
19+ 567 : [ 37.7807 , - 122.4081 ] , // Amazing Coffee Roasters (SoMa)
20+ 731 : [ 37.7689 , - 122.4494 ] // Japanese Desserts (near Golden Gate Park)
21+ } ;
22+
23+ const getCenter = ( start : [ number , number ] | undefined , end : [ number , number ] | undefined ) : LatLngTuple => {
24+ if ( ! start || ! end ) {
25+ return [ 37.562304 , - 122.32668 ]
26+ }
27+
28+ return [ ( start [ 0 ] + end [ 0 ] ) / 2 , ( start [ 1 ] + end [ 1 ] ) / 2 ] ;
29+ }
30+
31+ const RoutingControl = ( { start, end, center } : RouteMapProps ) => {
32+ const map = useMap ( ) ;
33+
34+ useEffect ( ( ) => {
35+ if ( ! map || ! start || ! end ) return ( ) => { } ;
36+
37+ map . setView ( center ) ;
38+
39+ const customPlan = L . Routing . plan ( [ L . latLng ( start ) , L . latLng ( end ) ] , {
40+ createMarker : ( i , waypoint ) => {
41+ return L . marker ( waypoint . latLng , {
42+ icon : L . icon ( {
43+ iconUrl : i === 0
44+ ? "https://cdn-icons-png.flaticon.com/512/2991/2991122.png" // Start marker
45+ : "https://cdn-icons-png.flaticon.com/512/190/190411.png" , // End marker
46+ iconSize : [ 25 , 41 ] ,
47+ iconAnchor : [ 12 , 41 ] ,
48+ } ) ,
49+ } ) ;
50+ } , // Prevent default markers
51+ } ) ;
52+
53+ const routingControl = L . Routing . control ( {
54+ waypoints : [ L . latLng ( start [ 0 ] , start [ 1 ] ) , L . latLng ( end [ 0 ] , end [ 1 ] ) ] ,
55+ routeWhileDragging : true ,
56+ addWaypoints : false ,
57+ lineOptions : {
58+ styles : [ { color : "blue" , weight : 6 } ] , // Wider path
59+ extendToWaypoints : true , // Default is true, ensures lines extend to waypoints
60+ missingRouteTolerance : 10 , // Default is 10 (meters)
61+ } ,
62+ plan :customPlan ,
63+ } ) . addTo ( map ) ;
64+
65+ return ( ) => {
66+ map . removeControl ( routingControl ) ;
67+ } ;
68+ } , [ map , start , end , center ] ) ;
69+
70+ return null ;
71+ } ;
72+
73+ const RouteMap : React . FC < Omit < RouteMapProps , "center" > > = ( { start, end} ) => {
74+ const center = useMemo ( ( ) : LatLngTuple => {
75+ return getCenter ( start , end ) ;
76+ } , [ start , end ] ) ;
77+
78+ return (
79+ < MapContainer
80+ center = { center }
81+ zoom = { 17 }
82+ style = { { height : "100%" , width : "100%" } }
83+ >
84+ < TileLayer
85+ url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
86+ attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
87+ />
88+ < RoutingControl start = { start } end = { end } center = { center } />
89+ </ MapContainer >
90+ ) ;
91+ } ;
92+
93+
94+ type MapProps = {
95+ dropoffLocationID : number ;
96+ pickupLocationID : number ;
97+ }
98+
99+ export const Map = ( { dropoffLocationID, pickupLocationID} : MapProps ) => {
100+ const dropoffCoords = COORDINATES_MOCKED [ dropoffLocationID as keyof typeof COORDINATES_MOCKED ] ;
101+ const pickupCoords = COORDINATES_MOCKED [ pickupLocationID as keyof typeof COORDINATES_MOCKED ] ;
4102
5- export const Map = ( ) => {
6103 return (
7104 < Flex w = '100%' h = '100%' borderRadius = { 16 } overflow = 'hidden' >
8- < PigeonMap defaultCenter = { [ 37.562304 , - 122.32668 ] } defaultZoom = { 17 } >
9- < Marker width = { 50 } anchor = { [ 37.562304 , - 122.32668 ] } />
10- </ PigeonMap >
105+ < RouteMap start = { pickupCoords } end = { dropoffCoords } />
11106 </ Flex >
12- )
107+ ) ;
13108}
0 commit comments