Fix on window DPR changes (#55)

RodrigoHamuy · Jul 31, 2023 · 6be61b6 · 6be61b6
1 parent 25dc10b
commit 6be61b6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/.changeset/honest-stingrays-sell.md b/.changeset/honest-stingrays-sell.md
@@ -0,0 +1,5 @@
+---
+"react-three-map": patch
+---
+
+Fix on window DPR changes (different solutions for Mapbox and Maplibre)
diff --git a/src/core/use-on-add.ts b/src/core/use-on-add.ts
@@ -43,6 +43,7 @@ export function useOnAdd(
  height: canvas.clientHeight,
  top: 0,
  left: 0,
+ updateStyle: false,
  ...renderProps?.size,
  },
  });
@@ -76,8 +77,20 @@ export function useOnAdd(
  if (!r3mRef.current.map) return;
  if (!r3mRef.current.state) return;
  const canvas = r3mRef.current.map.getCanvas();
- r3mRef.current.state.setSize(canvas.width, canvas.height)
- r3mRef.current.state.viewport.dpr = window.devicePixelRatio;
+
+ if (canvas.classList.contains('mapboxgl-canvas')) {
+ // if mapbox
+ r3mRef.current.state.size.width = canvas.clientWidth;
+ r3mRef.current.state.size.height = canvas.clientHeight;
+ } else {
+ // if maplibre
+ r3mRef.current.state.setSize(
+ canvas.clientWidth,
+ canvas.clientHeight,
+ false
+ );
+ }
+
  })
 
  const onRemove = useFunction(() => {