I am new to map APIs and recently I started using react-leaflet to display coordinates, with OpenMap as the Base Map. I followed tutorials but my map constantly shows grey. I realized that the TileLayer Component is not loading as the attribution does not show on the grey map. Inspection of the elements in browser also shows empty leaflet tiles. Can someone advise? I have no idea what is wrong
my React js file
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 © contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>'
detectRetina='true'
/>
</MapContainer>
);
};
export default Map;
my css file
.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;
}