SSR: tolerate floating point imprecision

package.json

@@ -98,6 +98,8 @@
     }
   },
   "lint-staged": {
-    "*.{js,css,scss}": "prettier --write"
+    "*.{js,css,scss}": "prettier --write",
+    "src/**/*.tsx": "prettier --write",
+    "demo/**/*.tsx": "prettier --write"
   }
 }

src/map/Map.tsx

@@ -1047,10 +1047,18 @@ export class Map extends Component<MapProps, MapReactState> {
     const tileX = lng2tile(latLng[1], zoom)
     const tileY = lat2tile(latLng[0], zoom)
 
-    return [
-      (tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0),
-      (tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0),
-    ] as Point
+    const pixelX = (tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0)
+    const pixelY = (tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0)
+
+    // If SSR is used, this enclosing function must always return the same result for the same input.
+    // When the values are computed with e.g. Math.cos (Math.log, ...), the exact implementatiom is platform
+    // dependent and results can slightly vary.
+    // See https://stackoverflow.com/questions/26570626/math-log2-precision-has-changed-in-chrome
+    const roundMathImprecision = (pixel: number) => {
+      return Math.round(pixel * 1000) / 1000
+    }
+
+    return [roundMathImprecision(pixelX), roundMathImprecision(pixelY)]
   }
 
   calculateZoomCenter = (center: Point, coords: Point, oldZoom: number, newZoom: number): Point => {

src/overlays/Marker.tsx

@@ -1,9 +1,15 @@
 import React, { useState } from 'react'
-import { PigeonProps } from '../types'
+import { PigeonProps, Point } from '../types'
 
-interface MarkerProps extends PigeonProps {
+type CallbackArgs<P> = {
+  event: React.MouseEvent
+  anchor: Point
+  payload: P
+}
+
+interface MarkerProps<P> extends PigeonProps {
   color?: string
-  payload?: any
+  payload?: P
 
   width?: number
   height?: number
@@ -16,13 +22,13 @@ interface MarkerProps extends PigeonProps {
   children?: JSX.Element
 
   // callbacks
-  onClick?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
-  onContextMenu?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
-  onMouseOver?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
-  onMouseOut?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
+  onClick?: (arg: CallbackArgs<P>) => void
+  onContextMenu?: (arg: CallbackArgs<P>) => void
+  onMouseOver?: (arg: CallbackArgs<P>) => void
+  onMouseOut?: (arg: CallbackArgs<P>) => void
 }
 
-export function Marker(props: MarkerProps): JSX.Element {
+export function Marker<P = any>(props: MarkerProps<P>): JSX.Element {
   const width =
     typeof props.width !== 'undefined'
       ? props.width
@@ -54,6 +60,8 @@ export function Marker(props: MarkerProps): JSX.Element {
         filter: hover ? 'drop-shadow(0 0 4px rgba(0, 0, 0, .3))' : '',
         pointerEvents: 'none',
         cursor: 'pointer',
+        width: width,
+        height: height,
         ...(props.style || {}),
       }}
       className={props.className ? `${props.className} pigeon-click-block` : 'pigeon-click-block'}