Soy nuevo en el mapeo de API y recientemente comencé a usar react-leaflet para mostrar coordenadas, con OpenMap como mapa base. Seguí tutoriales pero mi mapa muestra constantemente gris. Me di cuenta de que el componente TileLayer no se está cargando porque la atribución no se muestra en el mapa gris. La inspección de los elementos en el navegador también muestra mosaicos de folletos vacíos. ¿Alguien puede aconsejar? No tengo idea de lo que está mal

mi archivo React js

 import'./css/map.css'; import mappic from '../assets/routemap.png'; import useScript from '../useScriptHead.js'; import { MapContainer, TileLayer } from 'react-leaflet'; function Map () { const position= [1.332873308, 103.7669705]; useScript("https://cdn.onemap.sg/leaflet/onemap-leaflet.js"); return ( /* <div className="map-area scrollable"> <img className="map" src={mappic} alt="Not Available" /> </div> */ <MapContainer center={[1.34, 103.8]} maxNativeZoom={18} minZoom={11} whenReady={ ()=> { console.log("This function will fire once the map is created") }} scrollWheelZoom={false}> <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='<img src="https://www.onemap.gov.sg/docs/maps/images/oneMap64-01.png" style="height:2%;width:2%;"/> OneMap | Map data &copy; contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>' detectRetina='true' /> </MapContainer> ); }; export default Map;

mi archivo css

 .map-area { display: inline-flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .scrollable { overflow-x: hidden; overflow-y: auto; } .leaflet-container { position: absolute; overflow: visible; height: 100vh; width: 100vh; }

Inspector del navegador