react-map-gl icon indicating copy to clipboard operation
react-map-gl copied to clipboard

[Bug] Blurred textures on ultrawide monitors

Open GeorgeBarlow opened this issue 3 weeks ago • 1 comments

Description

I'm migrating an application from Angular to React which both use maplibre. When I first implemented maplibre into my application in Angular, I noticed that when rendering custom tiles in fullscreen mode on ultrawide monitors (5120x1440) the textures would appear blurry as opposed to rendering fullscreen on, for example, an M1 Pro Macbook Pro 16" display or when not running in fullscreen on the ultrawide at a smaller resolution. I managed to get around this issue, at the time, by increasing the max texture size and setting it to something like map._maxCanvasSize = [5120, 5120];, though when rendering the same textures in react using react-map-gl with maplibre, overriding the maxCanvasSize doesn't have the same effect and it instead looks blurry. I've put some example images alongside this post to give more context. I understand that maybe what I did previously is not recommended but if someone could give me a better insight into what I'm dealing with and how I could achieve a reliable solution to this issue that would be great :slightly_smiling_face: (the first image below shows the map at a reduced resolution and the second shows at a resolution around 5120 x 1440)

Further details: The map becomes blurry after 4115 pixels wide if that has any relevance

Below is what the map looks like when the viewport is at around 1920 x 1080: 7K4F99

Below is what the map looks like when the viewport is at around 5120 x 1440: 9t9917

You can see a clear degradation in quality specifically noticeable when looking at the stand numbers in the pictures.

Please let me know if this is something I should be taking up with Maplibre directly, I thought I'd ask here first as I experienced no issue in angular when directly setting the maxCanvasSize without using a wrapper like react-map-gl.

Expected Behavior

The map textures should not be blurry at resolutions of 5120x1440

Steps to Reproduce

Use any map style rendered by Maplibre at a resolution of around 5120 x 1440.

Environment

  • Framework version: [email protected]
  • Map library: maplibre-gl@^4.3.2
  • Browser: Electron 30.0.3
  • OS: Windows

Logs

No response

GeorgeBarlow avatar Jun 13 '24 10:06 GeorgeBarlow