Openlayers: Why is (0, 0) in the bottom right for me?

127 Views Asked by At

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!

0

There are 0 best solutions below