@globalfishingwatch/react-map-gl/src/utils/crisp-pixel.js

A React wrapper for MapboxGL-js and overlay API.

// @flow

/* global window */
const pixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;

export const crispPixel = (size: number) => Math.round(size * pixelRatio) / pixelRatio;

export const crispPercentage = (
  el: null | HTMLElement,
  percentage: number,
  dimension: 'x' | 'y' = 'x'
) => {
  if (el === null) {
    return percentage;
  }
  const origSize = dimension === 'x' ? el.offsetWidth : el.offsetHeight;
  return (crispPixel((percentage / 100) * origSize) / origSize) * 100;
};