map.fitBounds(bounds) differs from map.getBounds() output.

[j]

We're trying to save state of a map via user input and have come across an issue where when we save map.getBounds and re-create it, map.getBounds changes:

    const map = new mapLibre.Map({
        container,
        bounds,
        style: getMapStyleSpecification(container, lineWidthScale),
        maxZoom: 14,
        minZoom: 2,
        preserveDrawingBuffer: true,
        attributionControl: false
    });

    map.fitBounds(bounds); // map.getBounds() does not match `bounds` given from above even though it came from previous `map.getBounds()` call

[HarelM]

Fit bounds can behave differently depending on the screen resolution (or more correctly the screen aspect ratio).
Get bounds get the corners of the screen.
So fit bounds and get bounds are not symmetrical operations.

[Emocody666]

How long have you been stealing people's accounts

[HarelM]

@Emocody666 Is this message directed at me? I have no clue what do you mean by it...

[wipfli]

I don't think so, @HarelM...

@Emocody666 please clarify your message or remove it if it was a typo.

[j]

@HarelM yes, I understand and figured that. But how could I enforce exact bounds when aspect ratio does not change?

[HarelM]

How do you decide which bounds to set? I guess you can use some projection from screen pixels to lat lng...

[HarelM]

I'm not sure this is an issue though. Feels more like a discussion.
Can I convert it to a discussion?

[j]

I suppose it can be a discussion depending on how you look at it.

I feel that setting a map's bounds, getting those bounds, saving them in a DB and initializing that same map with those bounds that creates different bounds in the same exact container with set aspect ratio can potentially be an issue. (Sorry for the run on sentence).

We attempted react state and kept getting re-renders because props didn't match but I couldn't spend too much time on it.

[j]

@HarelM To me, this appears to be a bug/issue:

const map1 = new Map({
    container,
    bounds,
    style
});

const map2 = new Map({
    container,
    bounds: map1.getBounds(),
    style
});

// map1.getBounds() != map2.getBounds().

Both maps have different bounds. I confirmed that the container width/height & the map transformer width/height match and that it's not some weird issue from resizing.

[HarelM]

I would suggest to link a jsbin/stackblitz to show this issue. The above code has a lot of context missing.