I'm displaying the coords of where the mouse is on the screen, only it appears the coordinates are centered such that the x-axis is negative and the y-axis is positive (0, 0 is at the bottom right of the map). Preferrably I'd have both x and y axis's positive (0, 0 is bottom-left of the screen), but I can't for the life of me figure out what controls this.
Here's my code (for the component in a react function wrapper):
const MapWrapper : React.FC<IMapWrapper> = () => {
const [map, setMap] = useState<Map>();
const mapElement = useRef<HTMLDivElement>(null);
const mapRef = useRef<Map>();
mapRef.current = map;
const mousePositionElement = useRef<HTMLDivElement>(null);
const mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
target: mousePositionElement.current?.id || undefined,
className: 'custom-mouse-position',
})
useEffect(() => {
const map = new Map({
controls: defaultControls().extend([mousePositionControl]),
target: mapElement.current || undefined,
layers: [
new TileLayer({
source: new XYZ({
url: ".../{z}/{x}/{y}.jpg",
minZoom: 8,
maxZoom: 16,
})
}),
],
view: new View({
center: [0, 0],
zoom: 12.5,
maxZoom: 16,
minZoom: 8,
}),
});
setMap(map);
}, []);
return (
<>
<div style={{height:'100vh',width:'100%', "background": "black"}} ref={mapElement} className="map-container">
</div>
<div id="mouse-position" ref={mousePositionElement} />
</>
);
}
So default it's using the projection EPSG:3857, I've also tried EPSG:4326 and a custom proj4 one, but I'm not sure it's related to that - it seems to change the scaling but not the direction.
Something important to note is for the map tiles I'm using, I had to switch the standard {z}/{y}/{x} to {z}/{x}/{y}. Not sure if this could have an effect?
Any ideas would be helpful!