1import React from "react";
 2import "leaflet/dist/leaflet.css";
 3import { Map as LeafletMap, Marker, TileLayer } from "react-leaflet";
 4import L from "leaflet";
 5delete L.Icon.Default.prototype._getIconUrl;
 6
 7L.Icon.Default.mergeOptions({
 8  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
 9  iconUrl: require("leaflet/dist/images/marker-icon.png"),
10  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
11});
12
13const Map = ({ width = "100%", height = "20rem", position }) => {
14  return (
15    <LeafletMap center={position} zoom={13} style={{ width, height }}>
16      <TileLayer
17        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
18        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
19      />
20      <Marker position={position}></Marker>
21    </LeafletMap>
22  );
23};
24
25export default Map;