Topic: how to make responsive mdbootstrap vector map
I am using 'mdb-react-vector-maps' whose component MDBVectorMap gives the marker on map. I would like to make mapwidth and mapheight should be responsive. Markers should be same for devices like mobile, tablets, laptop, desktops and large destoops.` For converting lat long to xy I am using following formula, which is giving perfect result on my laptop, but in the devices marker position's are showing incorrect.
const x = ((longitude + 180) * (mapWidth / 346.82))+474;
const y = ((mapHeight / 2) - (mapWidth * Math.log(Math.tan((Math.PI/4) + (latitude * Math.PI / 358.80))) / (2 * Math.PI)))+72;`
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 5.1.0
- Device: Windows 10 Professional
- Browser: Chrome 120.0.6099.130 (Official Build) (64-bit)
- OS: Windows
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 12 months ago
X and Y should be constant and placed in the same spot regardless of the size of the vector map.