36 lines
948 B
JavaScript
36 lines
948 B
JavaScript
import {
|
|
MapContainer,
|
|
TileLayer,
|
|
Marker,
|
|
Popup,
|
|
Polyline,
|
|
} from "react-leaflet";
|
|
|
|
const MapView = ({ startCoords, endCoords, route }) => {
|
|
return (
|
|
<MapContainer
|
|
center={[55.7558, 37.6173]}
|
|
zoom={5}
|
|
style={{ height: "400px", width: "100%" }}
|
|
>
|
|
<TileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
/>
|
|
{startCoords && (
|
|
<Marker position={[startCoords.lat, startCoords.lng]}>
|
|
<Popup>Пункт отправления</Popup>
|
|
</Marker>
|
|
)}
|
|
{endCoords && (
|
|
<Marker position={[endCoords.lat, endCoords.lng]}>
|
|
<Popup>Пункт назначения</Popup>
|
|
</Marker>
|
|
)}
|
|
{route.length > 0 && <Polyline positions={route} color="blue" />}
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default MapView;
|