React leaflet Marker position with latitude OR longitude indicator - openstreetmap

Question

I have been using react leaflet succesful with Int/Float coordinates like [51.505, -0.09]
however, i have longitude and Latitude indicator included on my coordinates like ['51.505W', '-0.09S'].
First options runs well with this code.
const position = [51.505, -0.09]
render(
<MapContainer center={position} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
)
Thie second options breaks with error Invalid LatLng object How best can i handle this

Answer 1

Leaflet, and by extension react-leaflet, expects latitude longitude to simple numbers, either in the form of an array of 2 numbers [number, number], or an object in the format { lat: number, lng: number }. Coordinates like ['51.505W', '-0.09S'] don't fit that pattern. But they can be easily transformed with a simple function that strips the letter character from the string and returns a number:
function transformCoords(pair) {
return pair.map(coordString => {
return Number(
coordString
.replace('N', '')
.replace('S', '')
.replace('E', '')
.replace('W', '')
)
})
}
This will take in an array of the format ['51.505W', '-0.09S'] and will return an array like [51.505, -0.09], which can then be properly fed to a Marker position prop:
const position = ['51.505W', '-0.09S']
render(
<MapContainer ...>
<Marker position={transformCoords(position}) />
</MapContainer>
)