I’m encountering an issue with Leaflet map tiles appearing disoriented when I deploy my application on an EC2 instance. The tiles load correctly when I run the app locally, but once it’s deployed to EC2, the map tiles are misaligned and not rendering properly.

Here are the details of my setup:

Frontend Framework: React
Leaflet Version: 1.9.4
Map Tiles Source: OpenStreetMap

Screenshots:

Local Setup Map
EC2 instance Map

Any help would be greatly appreciated. Thank you!

Verified that the tile URLs are correct and accessible.
Checked for CORS issues – none found.
Ensured that the Leaflet CSS is properly imported.
Tried other Map tiles like MapTiler and Mapbox also but still the issue persist.