@guardian/interactive-component-library 0.3.0 → 0.3.2-rc1

package/dist/components/molecules/canvas-map/lib/util/array.js

@@ -0,0 +1,15 @@
+function arrayEquals(arr1, arr2) {
+  const len1 = arr1.length;
+  if (len1 !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < len1; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+export {
+  arrayEquals
+};

package/dist/components/molecules/canvas-map/lib/util/bboxFeature.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Function to create a GeoJSON feature from a GeoBoundsLike object.
+ * @function
+ * @param {import("./extent").ExtentLike} extent
+ * @returns {import("../formats/GeoJSON").GeoJSONFeature} A GeoJSON feature representing a rectangle for the given bounds.
+ * @note The reverse winding order of coordinates. This is essential in D3 https://stackoverflow.com/questions/49311001/d3-js-drawing-geojson-incorrectly
+ */
+export function bboxFeature(extent: import('./extent').ExtentLike): import('../formats/GeoJSON').GeoJSONFeature;

package/dist/components/molecules/canvas-map/lib/util/bboxFeature.js

@@ -0,0 +1,24 @@
+import { Extent } from "./extent.js";
+function bboxFeature(extent) {
+  const { minX, minY, maxX, maxY } = Extent.convert(extent);
+  const feature = {
+    type: "Feature",
+    properties: {},
+    geometry: {
+      coordinates: [
+        [
+          [minX, minY],
+          [minX, maxY],
+          [maxX, maxY],
+          [maxX, minY],
+          [minX, minY]
+        ]
+      ],
+      type: "Polygon"
+    }
+  };
+  return feature;
+}
+export {
+  bboxFeature
+};

package/dist/components/molecules/canvas-map/lib/util/bounds.d.ts

@@ -0,0 +1,47 @@
+import { GeoCoordinate } from './coordinate';
+import { Extent } from './extent';
+/**
+ * @typedef {import("./coordinate").GeoCoordinateLike} Coordinate
+ * @typedef {[number, number, number, number] | [Coordinate, Coordinate] | {sw: Coordinate, ne: Coordinate}} GeoBoundsLike
+ */
+/**
+ * A GeoBounds object represents a geographical bounding box, defined by its southwest and northeast points in longitude and latitude.
+ *
+ * @property {GeoCoordinate} southWest
+ * @property {GeoCoordinate} northEast
+ */
+export class GeoBounds {
+    /**
+     * Converts an array to a `GeoBounds` object.
+     *
+     * If a `GeoBounds` object is passed in, the function returns it unchanged.
+     *
+     * Internally, the function calls `GeoCoordinate#convert` to convert arrays to `GeoCoordinate` values.
+     *
+     * @param {GeoBoundsLike} input - An array of two coordinates to convert
+     * @returns {GeoBounds | null} A new `GeoBounds` object, if a conversion occurred, or the original `GeoBounds` object.
+     */
+    static convert(input: GeoBoundsLike): GeoBounds | null;
+    /**
+     * @constructor
+     * @param {Object} bounds
+     * @param {GeoCoordinate} bounds.southWest
+     * @param {GeoCoordinate} bounds.northEast
+     */
+    constructor({ southWest, northEast }: {
+        southWest: GeoCoordinate;
+        northEast: GeoCoordinate;
+    });
+    southWest: GeoCoordinate;
+    northEast: GeoCoordinate;
+    /**
+     * @returns {[number, number, number, number]}
+     */
+    flat(): [number, number, number, number];
+    toExtent(): Extent;
+}
+export type Coordinate = import('./coordinate').GeoCoordinateLike;
+export type GeoBoundsLike = [number, number, number, number] | [Coordinate, Coordinate] | {
+    sw: Coordinate;
+    ne: Coordinate;
+};

package/dist/components/molecules/canvas-map/lib/util/bounds.js

@@ -0,0 +1,61 @@
+import { GeoCoordinate } from "./coordinate.js";
+import { Extent } from "./extent.js";
+class GeoBounds {
+  /**
+   * @constructor
+   * @param {Object} bounds
+   * @param {GeoCoordinate} bounds.southWest
+   * @param {GeoCoordinate} bounds.northEast
+   */
+  constructor({ southWest, northEast }) {
+    this.southWest = southWest;
+    this.northEast = northEast;
+  }
+  /**
+   * @returns {[number, number, number, number]}
+   */
+  flat() {
+    return [
+      this.southWest.lng,
+      this.southWest.lat,
+      this.northEast.lng,
+      this.northEast.lat
+    ];
+  }
+  toExtent() {
+    return new Extent(
+      this.southWest.lng,
+      this.southWest.lat,
+      this.northEast.lng,
+      this.northEast.lat
+    );
+  }
+  /**
+   * Converts an array to a `GeoBounds` object.
+   *
+   * If a `GeoBounds` object is passed in, the function returns it unchanged.
+   *
+   * Internally, the function calls `GeoCoordinate#convert` to convert arrays to `GeoCoordinate` values.
+   *
+   * @param {GeoBoundsLike} input - An array of two coordinates to convert
+   * @returns {GeoBounds | null} A new `GeoBounds` object, if a conversion occurred, or the original `GeoBounds` object.
+   */
+  static convert(input) {
+    if (input instanceof GeoBounds) return input;
+    if (!input) return null;
+    if (Array.isArray(input)) {
+      const [sw, ne] = input.map((d) => GeoCoordinate.convert(d));
+      return new GeoBounds({ southWest: sw, northEast: ne });
+    } else if (typeof input === "object" && input !== null) {
+      const { sw, ne } = input;
+      return new GeoBounds({
+        southWest: GeoCoordinate.convert(sw),
+        northEast: GeoCoordinate.convert(ne)
+      });
+    }
+    throw new Error("`input` argument must be of type `GeoBoundsLike`");
+  }
+}
+export {
+  GeoBounds
+};

package/dist/components/molecules/canvas-map/lib/util/coordinate.d.ts

@@ -0,0 +1,26 @@
+/** @typedef {[number, number] | {lng: number, lat: number}} GeoCoordinateLike */
+/**
+ * A `GeoCoordinate` object represents a given longitude and latitude coordinate, measured in degrees.
+ * These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).
+ *
+ * @class
+ */
+export class GeoCoordinate {
+    /**
+     * Converts an array of two numbers or an object with `lng` and `lat` properties
+     * to a `GeoCoordinate` object.
+     *
+     * If a `GeoCoordinate` object is passed in, the function returns it unchanged.
+     *
+     * @param {GeoCoordinateLike} input - An array of two numbers ([lng<number>, lat<number>]), a  {lng: number, lat: number} object, or an instance of `GeoCoordinate`.
+     * @returns {GeoCoordinate} A new `GeoCoordinate` object, if a conversion occurred, or the original `GeoCoordinate` object.
+     */
+    static convert(input: GeoCoordinateLike): GeoCoordinate;
+    constructor(longitude: any, latitude: any);
+    lng: any;
+    lat: any;
+}
+export type GeoCoordinateLike = [number, number] | {
+    lng: number;
+    lat: number;
+};

package/dist/components/molecules/canvas-map/lib/util/coordinate.js

@@ -0,0 +1,35 @@
+class GeoCoordinate {
+  constructor(longitude, latitude) {
+    if (isNaN(longitude) || isNaN(latitude)) {
+      throw new Error(`Invalid GeoCoordinate: (${longitude}, ${latitude})`);
+    }
+    this.lng = longitude;
+    this.lat = latitude;
+  }
+  /**
+   * Converts an array of two numbers or an object with `lng` and `lat` properties
+   * to a `GeoCoordinate` object.
+   *
+   * If a `GeoCoordinate` object is passed in, the function returns it unchanged.
+   *
+   * @param {GeoCoordinateLike} input - An array of two numbers ([lng<number>, lat<number>]), a  {lng: number, lat: number} object, or an instance of `GeoCoordinate`.
+   * @returns {GeoCoordinate} A new `GeoCoordinate` object, if a conversion occurred, or the original `GeoCoordinate` object.
+   */
+  static convert(input) {
+    if (input instanceof GeoCoordinate) {
+      return input;
+    }
+    if (Array.isArray(input) && (input.length === 2 || input.length === 3)) {
+      return new GeoCoordinate(Number(input[0]), Number(input[1]));
+    }
+    if (!Array.isArray(input) && typeof input === "object" && input !== null) {
+      return new GeoCoordinate(Number(input.lng), Number(input.lat));
+    }
+    throw new Error(
+      "`input` argument must be specified as an object {lng: <lng>, lat: <lat>} or an array [lng<number>, lat<number>]"
+    );
+  }
+}
+export {
+  GeoCoordinate
+};

package/dist/components/molecules/canvas-map/lib/util/debug.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @function
+ * @param {Array<import('../geometry').Geometry>} geometries
+ */
+export function validateGeometries(geometries: Array<import('../geometry').Geometry>): void;
+/**
+ *
+ * @param {import('../Feature').Feature | Object} feature - The feature you want to inspect
+ * @returns {string} URL to geojson.io, with feature embedded
+ */
+export function generateDebugUrl(feature: import('../Feature').Feature | any, convertToGeoJSON?: boolean): string;

package/dist/components/molecules/canvas-map/lib/util/debug.js

@@ -0,0 +1,27 @@
+function validateGeometries(geometries) {
+  if (!Array.isArray(geometries)) {
+    throw new Error("geometries must be an array");
+  }
+  geometries.forEach((geometry) => {
+    var _a;
+    if (!geometry.type) {
+      throw new Error("geometry must have a type");
+    }
+    if (!((_a = geometry.coordinates) == null ? void 0 : _a.length)) {
+      throw new Error("geometry must have coordinates");
+    }
+  });
+}
+function generateDebugUrl(feature, convertToGeoJSON = true) {
+  const featureGeoJSON = convertToGeoJSON ? feature.getGeoJSON() : feature;
+  const featureCollection = {
+    type: "FeatureCollection",
+    features: [featureGeoJSON]
+  };
+  const jsonString = encodeURIComponent(JSON.stringify(featureCollection));
+  return `https://geojson.io/#data=data:application/json,${jsonString}`;
+}
+export {
+  generateDebugUrl,
+  validateGeometries
+};

package/dist/components/molecules/canvas-map/lib/util/deflate.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @module ol/geom/flat/deflate
+ */
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
+ * @return {number} offset Offset.
+ */
+export function deflateCoordinate(flatCoordinates: Array<number>, offset: number, coordinate: any): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<import("../../coordinate.js").Coordinate>} coordinates Coordinates.
+ * @param {number} stride Stride.
+ * @return {number} offset Offset.
+ */
+export function deflateCoordinates(flatCoordinates: Array<number>, offset: number, coordinates: Array<any>, stride: number): number;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<Array<import("../../coordinate.js").Coordinate>>} coordinatess Coordinatess.
+ * @param {number} stride Stride.
+ * @param {Array<number>} [ends] Ends.
+ * @return {Array<number>} Ends.
+ */
+export function deflateCoordinatesArray(flatCoordinates: Array<number>, offset: number, coordinatess: Array<Array<any>>, stride: number, ends?: Array<number>): Array<number>;
+/**
+ * @param {Array<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {Array<Array<Array<import("../../coordinate.js").Coordinate>>>} coordinatesss Coordinatesss.
+ * @param {number} stride Stride.
+ * @param {Array<Array<number>>} [endss] Endss.
+ * @return {Array<Array<number>>} Endss.
+ */
+export function deflateMultiCoordinatesArray(flatCoordinates: Array<number>, offset: number, coordinatesss: Array<Array<Array<any>>>, stride: number, endss?: Array<Array<number>>): Array<Array<number>>;

package/dist/components/molecules/canvas-map/lib/util/distance.d.ts

@@ -0,0 +1 @@
+export function haversineDistance(lat1: any, lon1: any, lat2: any, lon2: any): number;

package/dist/components/molecules/canvas-map/lib/util/distance.js

@@ -0,0 +1,12 @@
+function haversineDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371e3;
+  const toRadians = (degrees) => degrees * Math.PI / 180;
+  const dLat = toRadians(lat2 - lat1);
+  const dLon = toRadians(lon2 - lon1);
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+export {
+  haversineDistance
+};

package/dist/components/molecules/canvas-map/lib/util/dom.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Transform the children of a parent node so they match the
+ * provided list of children.  This function aims to efficiently
+ * remove, add, and reorder child nodes while maintaining a simple
+ * implementation (it is not guaranteed to minimize DOM operations).
+ * @param {Node} node The parent node whose children need reworking.
+ * @param {Array<Node>} children The desired children.
+ */
+export function replaceChildren(node: Node, children: Array<Node>): void;

package/dist/components/molecules/canvas-map/lib/util/dom.js

@@ -0,0 +1,28 @@
+function replaceChildren(node, children) {
+  const oldChildren = node.childNodes;
+  let done = false;
+  for (let i = 0; !done; ++i) {
+    const oldChild = oldChildren[i];
+    const newChild = children[i];
+    if (!oldChild && !newChild) {
+      done = true;
+      break;
+    }
+    if (oldChild === newChild) {
+      continue;
+    }
+    if (!oldChild) {
+      node.appendChild(newChild);
+      continue;
+    }
+    if (!newChild) {
+      node.removeChild(oldChild);
+      --i;
+      continue;
+    }
+    node.insertBefore(newChild, oldChild);
+  }
+}
+export {
+  replaceChildren
+};

package/dist/components/molecules/canvas-map/lib/util/extent.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Get extent for array of coordinates
+ * @param {[[number, number]]} coordinates
+ * @returns {Extent}
+ */
+export function extentForCoordinates(coordinates: [[number, number]]): Extent;
+/**
+ * Combine two extents into a single extent that contains both.
+ *
+ * @param {ExtentLike} extent1
+ * @param {ExtentLike} extent2
+ * @returns {Extent} The combined extent.
+ */
+export function combineExtents(extent1: ExtentLike, extent2: ExtentLike): Extent;
+/**
+ * Check if the passed coordinate is contained or on the edge of the extent.
+ *
+ * @param {Extent} extent Extent.
+ * @param {[number, number]} coordinate Coordinate.
+ * @return {boolean} The coordinate is contained in the extent.
+ */
+export function containsCoordinate(extent: Extent, coordinate: [number, number]): boolean;
+/**
+ * Check if the passed coordinate is contained or on the edge of the extent.
+ *
+ * @param {Extent} extent Extent.
+ * @param {number} x X coordinate.
+ * @param {number} y Y coordinate.
+ * @return {boolean} The x, y values are contained in the extent.
+ */
+export function containsXY(extent: Extent, x: number, y: number): boolean;
+/**
+ * @typedef {[number, number, number, number] | [[number, number], [number, number]] |  {minX: number, minY: number, maxX: number, maxY: number}} ExtentLike
+ */
+/**
+ * @class Extent
+ * @property {number} minX The minimum x value of the extent.
+ * @property {number} minY The minimum y value of the extent.
+ * @property {number} maxX The maximum x value of the extent.
+ * @property {number} maxY The maximum y value of the extent.
+ * @property {ExtentLike} array The extent as an array of numbers.
+ *
+ * @example
+ * // The extent of a 975x610 viewport
+ * const viewPortExtent = new Extent([0, 0, 975, 610])
+ */
+export class Extent {
+    /**
+     * Converts {@link ExtentLike} to an {@link Extent} object.
+     *
+     * If an {@link Extent} object is passed in, the function returns it unchanged.
+     *
+     *
+     * @param {ExtentLike} input - Extent defined as {@link ExtentLike}.
+     * @returns {Extent} A new `Extent` object, if a conversion occurred, or the original `Extent` object.
+     */
+    static convert(input: ExtentLike): Extent;
+    constructor(minX: any, minY: any, maxX: any, maxY: any);
+    minX: any;
+    minY: any;
+    maxX: any;
+    maxY: any;
+    get width(): number;
+    get height(): number;
+    /**
+     * Turn extent into a flat array of numbers: [minX, minY, maxX, maxY].
+     *
+     * @returns {[number, number, number, number]} - The extent as a flat array
+     */
+    flat(): [number, number, number, number];
+    /**
+     * Create a new extent where the coordinates are multiplied by scaleFactor.
+     *
+     * @param {number} scaleFactor
+     * @returns {Extent} - The scaled
+     */
+    scale(scaleFactor: number): Extent;
+    /**
+     * Check if the passed coordinate is contained or on the edge of the extent.
+     *
+     * @param {[number, number]} coordinate Coordinate.
+     * @return {boolean} The coordinate is contained in the extent.
+     */
+    containsCoordinate(coordinate: [number, number]): boolean;
+    /**
+     * Combine with another extent
+     *
+     * @param {ExtentLike} extent
+     * @returns {Extent} A new extent that fits both this extent add the added one
+     */
+    combineWith(extent: ExtentLike): Extent;
+}
+export type ExtentLike = [number, number, number, number] | [[number, number], [number, number]] | {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};

package/dist/components/molecules/canvas-map/lib/util/extent.js

@@ -0,0 +1,118 @@
+class Extent {
+  constructor(minX, minY, maxX, maxY) {
+    this.minX = minX;
+    this.minY = minY;
+    this.maxX = maxX;
+    this.maxY = maxY;
+  }
+  get width() {
+    return this.maxX - this.minX;
+  }
+  get height() {
+    return this.maxY - this.minY;
+  }
+  /**
+   * Turn extent into a flat array of numbers: [minX, minY, maxX, maxY].
+   *
+   * @returns {[number, number, number, number]} - The extent as a flat array
+   */
+  flat() {
+    return [this.minX, this.minY, this.maxX, this.maxY];
+  }
+  /**
+   * Create a new extent where the coordinates are multiplied by scaleFactor.
+   *
+   * @param {number} scaleFactor
+   * @returns {Extent} - The scaled
+   */
+  scale(scaleFactor) {
+    const scaled = (
+      /** @type {ExtentLike} */
+      [this.minX, this.minY, this.maxX, this.maxY].map((d) => d * scaleFactor)
+    );
+    return Extent.convert(scaled);
+  }
+  /**
+   * Check if the passed coordinate is contained or on the edge of the extent.
+   *
+   * @param {[number, number]} coordinate Coordinate.
+   * @return {boolean} The coordinate is contained in the extent.
+   */
+  containsCoordinate(coordinate) {
+    return containsXY(this, coordinate[0], coordinate[1]);
+  }
+  /**
+   * Combine with another extent
+   *
+   * @param {ExtentLike} extent
+   * @returns {Extent} A new extent that fits both this extent add the added one
+   */
+  combineWith(extent) {
+    return combineExtents(this, extent);
+  }
+  /**
+   * Converts {@link ExtentLike} to an {@link Extent} object.
+   *
+   * If an {@link Extent} object is passed in, the function returns it unchanged.
+   *
+   *
+   * @param {ExtentLike} input - Extent defined as {@link ExtentLike}.
+   * @returns {Extent} A new `Extent` object, if a conversion occurred, or the original `Extent` object.
+   */
+  static convert(input) {
+    if (input instanceof Extent) return input;
+    if (!input) return null;
+    if (Array.isArray(input) && input.length === 4) {
+      const [minX, minY, maxX, maxY] = input;
+      return new Extent(minX, minY, maxX, maxY);
+    } else if (Array.isArray(input) && input.length === 2) {
+      const [min, max] = input;
+      return new Extent(min[0], min[1], max[0], max[1]);
+    } else if (typeof input === "object" && input !== null) {
+      const { minX, minY, maxX, maxY } = input;
+      return new Extent(minX, minY, maxX, maxY);
+    }
+    throw new Error("`input` argument must be of type `ExtentLike`");
+  }
+}
+function extentForCoordinates(coordinates) {
+  let minX = Infinity, minY = Infinity;
+  let maxX = -Infinity, maxY = -Infinity;
+  for (const coordinate of coordinates) {
+    if (coordinate[0] < minX) {
+      minX = coordinate[0];
+    }
+    if (coordinate[0] > maxX) {
+      maxX = coordinate[0];
+    }
+    if (coordinate[1] < minY) {
+      minY = coordinate[1];
+    }
+    if (coordinate[1] > maxY) {
+      maxY = coordinate[1];
+    }
+  }
+  return new Extent(minX, minY, maxX, maxY);
+}
+function combineExtents(extent1, extent2) {
+  const e1 = Extent.convert(extent1);
+  const e2 = Extent.convert(extent2);
+  const minX = Math.min(e1.minX, e2.minX);
+  const minY = Math.min(e1.minY, e2.minY);
+  const maxX = Math.max(e1.maxX, e2.maxX);
+  const maxY = Math.max(e1.maxY, e2.maxY);
+  return new Extent(minX, minY, maxX, maxY);
+}
+function containsCoordinate(extent, coordinate) {
+  return containsXY(extent, coordinate[0], coordinate[1]);
+}
+function containsXY(extent, x, y) {
+  return x >= extent.minX && x <= extent.maxX && y >= extent.minY && y <= extent.maxY;
+}
+export {
+  Extent,
+  combineExtents,
+  containsCoordinate,
+  containsXY,
+  extentForCoordinates
+};

package/dist/components/molecules/canvas-map/lib/util/index.d.ts

@@ -0,0 +1,6 @@
+export * from './coordinate';
+export * from './bounds';
+export * from './extent';
+export * from './bboxFeature';
+export * from './resolution';
+export * from './zoomLevel';

package/dist/components/molecules/canvas-map/lib/util/memoise.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wraps a function in another function that remembers the last return.  If the
+ * returned function is called twice in a row with the same arguments and the same
+ * this object, it will return the value from the first call in the second call.
+ * @function
+ * @template ReturnType
+ * @param {function(...any): ReturnType} fn - The function to memoise
+ * @returns {function(...any): ReturnType} The memoised function
+ */
+export function memoise<ReturnType>(fn: (...args: any[]) => ReturnType): (...args: any[]) => ReturnType;

package/dist/components/molecules/canvas-map/lib/util/memoise.js

@@ -0,0 +1,20 @@
+import { arrayEquals } from "./array.js";
+function memoise(fn) {
+  let called = false;
+  let lastResult;
+  let lastArgs;
+  let lastThis;
+  return function(...args) {
+    const nextArgs = Array.prototype.slice.call(args);
+    if (!called || this !== lastThis || !arrayEquals(nextArgs, lastArgs)) {
+      called = true;
+      lastThis = this;
+      lastArgs = nextArgs;
+      lastResult = fn.apply(this, args);
+    }
+    return lastResult;
+  };
+}
+export {
+  memoise
+};

package/dist/components/molecules/canvas-map/lib/util/resolution.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Get map resolution
+ *
+ * @param {Extent} extent Geographical extent: [ lonMin, latMin, lonMax, latMax ]
+ * @param {size} viewportSize Viewport size: [ width, height ]
+ * @return {number} Map resolution (horizontal)
+ * @api
+ */
+export function resolutionForExtent(extent: Extent, viewportSize: size): number;

package/dist/components/molecules/canvas-map/lib/util/resolution.js

@@ -0,0 +1,11 @@
+import { haversineDistance } from "./distance.js";
+function resolutionForExtent(extent, viewportSize) {
+  const [lonMin, latMin, lonMax, latMax] = extent;
+  const latMid = (latMin + latMax) / 2;
+  const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+  const resolution = distance / viewportSize[0];
+  return resolution;
+}
+export {
+  resolutionForExtent
+};