0

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!

Oliver Armitage
  • 51
  • 1
  • 5
  • 1
    Is the map correctly centered when the view opens at [0, 0] ? If not your source may need a custom tile grid. If it is correctly centered but the mouse position display is incorrect that might be due to css affecting the map container such as described in https://github.com/openlayers/openlayers/issues/13283 – Mike Mar 13 '22 at 15:27
  • Thanks Mike, on load it's at the bottom right hand corner of the map, so not correctly centered. Will take a look into that tile grids, cheers – Oliver Armitage Mar 13 '22 at 16:29

0 Answers0