31 lines
1.0 KiB
JavaScript
31 lines
1.0 KiB
JavaScript
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import L from 'leaflet';
|
|
|
|
// Убедитесь, что иконка маркера отображается правильно
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: '/leaflet/images/marker-icon-2x.png',
|
|
iconUrl: '/leaflet/images/marker-icon.png',
|
|
shadowUrl: '/leaflet/images/marker-shadow.png',
|
|
});
|
|
|
|
const Map = () => {
|
|
const position = [51.505, -0.09]; // Координаты для центра карты
|
|
|
|
return (
|
|
<MapContainer center={position} zoom={13} style={{ height: '100vh', width: '100%' }}>
|
|
<TileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
/>
|
|
<Marker position={position}>
|
|
<Popup>
|
|
A pretty CSS3 popup. <br /> Easily customizable.
|
|
</Popup>
|
|
</Marker>
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default Map; |