77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
import { Button } from '@mui/material';
|
|
import { LoadScriptNext, GoogleMap, Marker, OverlayView } from '@react-google-maps/api';
|
|
|
|
const containerStyle = {
|
|
width: '100%',
|
|
height: 'calc(100vh - 150px)'
|
|
};
|
|
|
|
export default function RiderLocationMap({ riderLocations }) {
|
|
console.log('riderLocations', riderLocations);
|
|
|
|
const center = {
|
|
lat: Number(riderLocations?.[0]?.latitude || 11.0056),
|
|
lng: Number(riderLocations?.[0]?.longitude || 76.9661)
|
|
};
|
|
const GreenIcon = {
|
|
url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
|
scaledSize: new window.google.maps.Size(25, 41),
|
|
anchor: new window.google.maps.Point(12, 41)
|
|
};
|
|
|
|
const RedIcon = {
|
|
url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
|
scaledSize: new window.google.maps.Size(25, 41),
|
|
anchor: new window.google.maps.Point(12, 41)
|
|
};
|
|
|
|
return (
|
|
<LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
|
|
<GoogleMap mapContainerStyle={containerStyle} zoom={12} center={center}>
|
|
{riderLocations &&
|
|
riderLocations?.map((r, index) => {
|
|
const lat = Number(r.latitude);
|
|
const lng = Number(r.longitude);
|
|
return (
|
|
<div key={index}>
|
|
{/* Marker */}
|
|
<Marker
|
|
position={{ lat, lng }}
|
|
icon={r.status == 'active' ? GreenIcon : RedIcon}
|
|
label={{
|
|
fontSize: '14px',
|
|
fontWeight: 'bold'
|
|
}}
|
|
/>
|
|
<OverlayView position={{ lat, lng }} mapPaneName={OverlayView.OVERLAY_LAYER}>
|
|
<div
|
|
style={{
|
|
background: 'none',
|
|
color: 'green',
|
|
padding: '2px 8px',
|
|
borderRadius: '4px',
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
whiteSpace: 'nowrap',
|
|
transform: 'translate(-50%, -140%)',
|
|
pointerEvents: 'none',
|
|
ml: 20
|
|
}}
|
|
>
|
|
<Button variant="contained" color="primary" size="small">
|
|
{` ${r.username} `}
|
|
{/* <br /> */}
|
|
{/* {`${r.contactno || '##### ##### '} `} */}
|
|
<br />
|
|
{`(${r.orderid || ''}) `}
|
|
</Button>
|
|
</div>
|
|
</OverlayView>
|
|
</div>
|
|
);
|
|
})}
|
|
</GoogleMap>
|
|
</LoadScriptNext>
|
|
);
|
|
}
|