@flowmap.gl/data 8.0.0-alpha.4 → 8.0.0-alpha.8

package/src/{FlowMapSelectors.ts → FlowmapSelectors.ts}

@@ -16,7 +16,7 @@
  *
  */
 
-import {bounds} from '@mapbox/geo-viewport';
+import {WebMercatorViewport} from '@math.gl/web-mercator';
 import {ascending, descending, extent, min} from 'd3-array';
 import {nest} from 'd3-collection';
 import {ScaleLinear, scaleLinear, scaleSqrt} from 'd3-scale';
@@ -44,8 +44,8 @@ import getColors, {
   isDiffColors,
   isDiffColorsRGBA,
 } from './colors';
-import FlowMapAggregateAccessors from './FlowMapAggregateAccessors';
-import {FlowMapState} from './FlowMapState';
+import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
+import {FlowmapState} from './FlowmapState';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -60,8 +60,8 @@ import {
   FlowAccessors,
   FlowCirclesLayerAttributes,
   FlowLinesLayerAttributes,
-  FlowMapData,
-  FlowMapDataAccessors,
+  FlowmapData,
+  FlowmapDataAccessors,
   isCluster,
   isLocationClusterNode,
   LayersData,
@@ -70,74 +70,75 @@ import {
 } from './types';
 
 const MAX_CLUSTER_ZOOM_LEVEL = 20;
-const NUMBER_OF_FLOWS_TO_DISPLAY = 5000;
 type KDBushTree = any;
 
 export type Selector<L, F, T> = ParametricSelector<
-  FlowMapState,
-  FlowMapData<L, F>,
+  FlowmapState,
+  FlowmapData<L, F>,
   T
 >;
 
-export default class FlowMapSelectors<L, F> {
-  accessors: FlowMapAggregateAccessors<L, F>;
+export default class FlowmapSelectors<L, F> {
+  accessors: FlowmapAggregateAccessors<L, F>;
 
-  constructor(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  constructor(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
     this.setAccessors(accessors);
   }
 
-  setAccessors(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  setAccessors(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
-  getFetchedFlows = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedFlows = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
-  getFetchedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.locations;
-  getSelectedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settingsState.maxTopFlowsDisplayNum;
+  getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedLocations;
-  getLocationFilterMode = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.locationFilterMode;
-  getClusteringEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.clusteringEnabled;
-  getLocationTotalsEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.locationTotalsEnabled;
-  getZoom = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getZoom = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport.zoom;
-  getViewport = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getViewport = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport;
-  getSelectedTimeRange = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedTimeRange;
 
-  getColorSchemeKey: Selector<L, F, string | undefined> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+  getColorScheme: Selector<L, F, string | string[] | undefined> = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeEnabled;
 
   getFadeOpacityEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeOpacityEnabled;
 
   getFadeAmount: Selector<L, F, number> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.animationEnabled;
 
   getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
@@ -308,11 +309,11 @@ export default class FlowMapSelectors<L, F> {
 
       const getLocationWeight = makeLocationWeightGetter(
         flows,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
       );
       const clusterLevels = clusterLocations(
         locations,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
         getLocationWeight,
         {
           maxZoom: MAX_CLUSTER_ZOOM_LEVEL,
@@ -320,7 +321,7 @@ export default class FlowMapSelectors<L, F> {
       );
       const clusterIndex = buildIndex<F>(clusterLevels);
       const {getLocationName, getLocationClusterName} =
-        this.accessors.getFlowMapDataAccessors();
+        this.accessors.getFlowmapDataAccessors();
 
       // Adding meaningful names
       const getName = (id: string) => {
@@ -415,7 +416,7 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getClusterZoom = (state: FlowMapState, props: FlowMapData<L, F>) => {
+  getClusterZoom = (state: FlowmapState, props: FlowmapData<L, F>) => {
     const {settingsState} = state;
     if (!settingsState.clusteringEnabled) return undefined;
     if (settingsState.clusteringAuto || settingsState.clusteringLevel == null) {
@@ -486,9 +487,9 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  _getFlowMapColors = createSelector(
+  _getFlowmapColors = createSelector(
     this.getDiffMode,
-    this.getColorSchemeKey,
+    this.getColorScheme,
     this.getDarkMode,
     this.getFadeEnabled,
     this.getFadeOpacityEnabled,
@@ -497,12 +498,12 @@ export default class FlowMapSelectors<L, F> {
     getColors,
   );
 
-  getFlowMapColorsRGBA = createSelector(
-    this._getFlowMapColors,
-    (flowMapColors) => {
-      return isDiffColors(flowMapColors)
-        ? getDiffColorsRGBA(flowMapColors)
-        : getColorsRGBA(flowMapColors);
+  getFlowmapColorsRGBA = createSelector(
+    this._getFlowmapColors,
+    (flowmapColors) => {
+      return isDiffColors(flowmapColors)
+        ? getDiffColorsRGBA(flowmapColors)
+        : getColorsRGBA(flowmapColors);
     },
   );
 
@@ -549,12 +550,12 @@ export default class FlowMapSelectors<L, F> {
           //   : flows,
           flows,
           clusterZoom,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       } else {
         aggregated = aggregateFlows(
           flows,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       }
       aggregated.sort((a, b) =>
@@ -675,12 +676,12 @@ export default class FlowMapSelectors<L, F> {
       this.getMaxLocationCircleSize,
       (viewport, maxLocationCircleSize) => {
         const pad = maxLocationCircleSize;
-        return bounds(
-          [viewport.longitude, viewport.latitude],
-          viewport.zoom,
-          [viewport.width + pad * 2, viewport.height + pad * 2],
-          512,
-        );
+        const bounds = new WebMercatorViewport({
+          ...viewport,
+          width: viewport.width + pad * 2,
+          height: viewport.height + pad * 2,
+        }).getBounds();
+        return [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
       },
     );
 
@@ -850,8 +851,8 @@ export default class FlowMapSelectors<L, F> {
   );
 
   getLocationTotalsExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
       return this._getLocationTotalsForViewportExtent(state, props);
@@ -860,17 +861,19 @@ export default class FlowMapSelectors<L, F> {
     }
   };
 
-  getFlowsForFlowMapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
+  getFlowsForFlowmapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
     createSelector(
       this.getSortedAggregatedFilteredFlows,
       this.getLocationIdsInViewport,
       this.getSelectedLocationsSet,
       this.getLocationFilterMode,
+      this.getMaxTopFlowsDisplayNum,
       (
         flows,
         locationIdsInViewport,
         selectedLocationsSet,
         locationFilterMode,
+        maxTopFlowsDisplayNum,
       ) => {
         if (!flows || !locationIdsInViewport) return undefined;
         const picked: (F | AggregateFlow)[] = [];
@@ -897,7 +900,7 @@ export default class FlowMapSelectors<L, F> {
             }
           }
           // Only keep top
-          if (pickedCount > NUMBER_OF_FLOWS_TO_DISPLAY) break;
+          if (pickedCount > maxTopFlowsDisplayNum) break;
         }
         // assuming they are sorted in descending order,
         // we need ascending for rendering
@@ -906,11 +909,11 @@ export default class FlowMapSelectors<L, F> {
     );
 
   _getFlowMagnitudeExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
-      const flows = this.getFlowsForFlowMapLayer(state, props);
+      const flows = this.getFlowsForFlowmapLayer(state, props);
       if (flows) {
         const rv = extent(flows, this.accessors.getFlowMagnitude);
         return rv[0] !== undefined && rv[1] !== undefined ? rv : undefined;
@@ -1032,7 +1035,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationsForFlowMapLayer: Selector<
+  getLocationsForFlowmapLayer: Selector<
     L,
     F,
     Array<L | ClusterNode> | undefined
@@ -1062,11 +1065,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getLocationsForFlowMapLayerById: Selector<
+  getLocationsForFlowmapLayerById: Selector<
     L,
     F,
     Map<string, L | ClusterNode> | undefined
-  > = createSelector(this.getLocationsForFlowMapLayer, (locations) => {
+  > = createSelector(this.getLocationsForFlowmapLayer, (locations) => {
     if (!locations) return undefined;
     return locations.reduce(
       (m, d) => (m.set(this.accessors.getLocationId(d), d), m),
@@ -1075,10 +1078,10 @@ export default class FlowMapSelectors<L, F> {
   });
 
   getLayersData: Selector<L, F, LayersData> = createSelector(
-    this.getLocationsForFlowMapLayer,
-    this.getFlowsForFlowMapLayer,
-    this.getFlowMapColorsRGBA,
-    this.getLocationsForFlowMapLayerById,
+    this.getLocationsForFlowmapLayer,
+    this.getFlowsForFlowmapLayer,
+    this.getFlowmapColorsRGBA,
+    this.getLocationsForFlowmapLayerById,
     this.getLocationIdsInViewport,
     this.getInCircleSizeGetter,
     this.getOutCircleSizeGetter,
@@ -1087,7 +1090,7 @@ export default class FlowMapSelectors<L, F> {
     (
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1098,7 +1101,7 @@ export default class FlowMapSelectors<L, F> {
       return this._prepareLayersData(
         locations,
         flows,
-        flowMapColors,
+        flowmapColors,
         locationsById,
         locationIdsInViewport,
         getInCircleSize,
@@ -1109,11 +1112,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  prepareLayersData(state: FlowMapState, props: FlowMapData<L, F>): LayersData {
-    const locations = this.getLocationsForFlowMapLayer(state, props) || [];
-    const flows = this.getFlowsForFlowMapLayer(state, props) || [];
-    const flowMapColors = this.getFlowMapColorsRGBA(state, props);
-    const locationsById = this.getLocationsForFlowMapLayerById(state, props);
+  prepareLayersData(state: FlowmapState, props: FlowmapData<L, F>): LayersData {
+    const locations = this.getLocationsForFlowmapLayer(state, props) || [];
+    const flows = this.getFlowsForFlowmapLayer(state, props) || [];
+    const flowmapColors = this.getFlowmapColorsRGBA(state, props);
+    const locationsById = this.getLocationsForFlowmapLayerById(state, props);
     const locationIdsInViewport = this.getLocationIdsInViewport(state, props);
     const getInCircleSize = this.getInCircleSizeGetter(state, props);
     const getOutCircleSize = this.getOutCircleSizeGetter(state, props);
@@ -1121,7 +1124,7 @@ export default class FlowMapSelectors<L, F> {
     return this._prepareLayersData(
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1134,7 +1137,7 @@ export default class FlowMapSelectors<L, F> {
   _prepareLayersData(
     locations: (L | ClusterNode)[] | undefined,
     flows: (F | AggregateFlow)[] | undefined,
-    flowMapColors: DiffColorsRGBA | ColorsRGBA,
+    flowmapColors: DiffColorsRGBA | ColorsRGBA,
     locationsById: Map<string, L | ClusterNode> | undefined,
     locationIdsInViewport: Set<string> | undefined,
     getInCircleSize: (locationId: string) => number,
@@ -1162,25 +1165,25 @@ export default class FlowMapSelectors<L, F> {
       number,
     ];
     const flowColorScale = getFlowColorScale(
-      flowMapColors,
+      flowmapColors,
       flowMagnitudeExtent,
       false,
     );
 
-    // Using yield here helps to avoid creating intermediary arrays
+    // Using a generator here helps to avoid creating intermediary arrays
     const circlePositions = Float32Array.from(
       (function* () {
         for (const location of locations) {
-          // yield* effectively does same as flatMap here
+          // yield* effectively works as flatMap here
           yield* getLocationCentroid(location);
         }
       })(),
     );
 
     // TODO: diff mode
-    const circleColor = isDiffColorsRGBA(flowMapColors)
-      ? flowMapColors.positive.locationCircles.inner
-      : flowMapColors.locationCircles.inner;
+    const circleColor = isDiffColorsRGBA(flowmapColors)
+      ? flowmapColors.positive.locationCircles.inner
+      : flowmapColors.locationCircles.inner;
 
     const circleColors = Uint8Array.from(
       (function* () {
@@ -1251,7 +1254,7 @@ export default class FlowMapSelectors<L, F> {
     const staggeringValues = animationEnabled
       ? Float32Array.from(
           (function* () {
-            for (const flow of flows) {
+            for (const f of flows) {
               // @ts-ignore
               yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
             }

package/src/{FlowMapState.ts → FlowmapState.ts}

@@ -17,10 +17,12 @@ export interface SettingsState {
   clusteringLevel?: number;
   darkMode: boolean;
   fadeAmount: number;
-  colorScheme: string | undefined;
+  colorScheme: string | string[] | undefined;
+  highlightColor: string;
+  maxTopFlowsDisplayNum: number;
 }
 
-export interface FlowMapState {
+export interface FlowmapState {
   filterState: FilterState;
   settingsState: SettingsState;
   viewport: ViewportProps;

package/src/colors.ts

@@ -28,7 +28,7 @@ import {range} from 'd3-array';
 import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
 import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
 import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
-import {SettingsState} from './FlowMapState';
+import {SettingsState} from './FlowmapState';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -58,7 +58,10 @@ export function opacifyHex(hexCode: string, opacity: number): string {
   return `rgba(${col.r}, ${col.g}, ${col.b}, ${opacity})`;
 }
 
-export function colorAsRgba(color: string): RGBA {
+export function colorAsRgba(color: string | number[]): RGBA {
+  if (Array.isArray(color)) {
+    return color as RGBA;
+  }
   const col = d3color(color);
   if (!col) {
     console.warn('Invalid color: ', color);
@@ -100,7 +103,7 @@ const getColorSteps = (interpolate: (x: number) => string) =>
     .reverse();
 
 const FLOW_MIN_COLOR = 'rgba(240,240,240,0.5)';
-export const BLUES_PALE = [FLOW_MIN_COLOR, ColorScheme.primary];
+export const GRAYISH = [FLOW_MIN_COLOR, ColorScheme.primary];
 const schemeBluYl = [
   '#f7feae',
   '#b7e6a5',
@@ -134,7 +137,6 @@ export const schemeTeal = [
 export const DEFAULT_COLOR_SCHEME = schemeTeal;
 export const COLOR_SCHEMES: {[key: string]: string[]} = {
   Blues: asScheme(schemeBlues),
-  BluesPale: BLUES_PALE,
   BluGrn: [
     '#c4e6c3',
     '#96d2a4',
@@ -186,6 +188,7 @@ export const COLOR_SCHEMES: {[key: string]: string[]} = {
   ],
   Emrld: schemeEmrld,
   GnBu: asScheme(schemeGnBu),
+  Grayish: GRAYISH,
   Greens: asScheme(schemeGreens),
   Greys: asScheme(schemeGreys),
   Inferno: getColorSteps(interpolateInferno),
@@ -330,7 +333,7 @@ const diffColors: DiffColors = {
   outlineColor: 'rgb(230,233,237)',
 };
 
-export function getFlowMapColors(
+export function getFlowmapColors(
   settingsState: SettingsState,
 ): Colors | DiffColors {
   return getColors(
@@ -346,7 +349,7 @@ export function getFlowMapColors(
 
 export function getColors(
   diffMode: boolean,
-  schemeKey: string | undefined,
+  colorScheme: string | string[] | undefined,
   darkMode: boolean,
   fadeEnabled: boolean,
   fadeOpacityEnabled: boolean,
@@ -357,11 +360,18 @@ export function getColors(
     return diffColors;
   }
 
-  let scheme = (schemeKey && COLOR_SCHEMES[schemeKey]) || DEFAULT_COLOR_SCHEME;
+  let scheme;
 
-  if (darkMode) {
-    scheme = scheme.slice().reverse();
+  if (Array.isArray(colorScheme)) {
+    scheme = colorScheme;
+  } else {
+    scheme =
+      (colorScheme && COLOR_SCHEMES[colorScheme]) || DEFAULT_COLOR_SCHEME;
+    if (darkMode) {
+      scheme = scheme.slice().reverse();
+    }
   }
+
   // if (animate)
   // if (fadeAmount > 0)
   {
@@ -550,7 +560,7 @@ export interface LocationCircleColors {
   incoming?: string;
   highlighted?: string;
   empty?: string;
-  emptyOutline?: string;
+  outlineEmptyMix?: number;
 }
 
 export interface LocationAreaColors {
@@ -597,7 +607,7 @@ export interface LocationCircleColorsRGBA {
   incoming: RGBA;
   highlighted: RGBA;
   empty: RGBA;
-  emptyOutline: RGBA;
+  outlineEmptyMix: number;
 }
 
 export interface LocationAreaColorsRGBA {
@@ -682,7 +692,7 @@ function getFlowAndCircleColors(
         flowColorHighlighted,
       ),
       empty: emptyColor,
-      emptyOutline: mixColorsRGBA(innerColor, emptyColor, 0.4),
+      outlineEmptyMix: inputColors?.locationCircles?.outlineEmptyMix ?? 0.4,
     },
   };
 }

package/src/getViewStateForLocations.ts

@@ -1,41 +1,50 @@
-import {BoundingBox, viewport} from '@mapbox/geo-viewport';
 import {geoBounds} from 'd3-geo';
-import {FeatureCollection, GeometryCollection, GeometryObject} from 'geojson';
-import {ViewState} from './types';
+import {fitBounds} from '@math.gl/web-mercator';
+import type {
+  FeatureCollection,
+  GeometryCollection,
+  GeometryObject,
+} from 'geojson';
+import type {ViewState} from './types';
 
 export type LocationProperties = any;
 
+export type GetViewStateOptions = {
+  pad?: number; // size ratio
+  padding?: {top: number; bottom: number; left: number; right: number};
+  tileSize?: number;
+  // minZoom?: number;  // not supported by fitBounds
+  maxZoom?: number;
+};
+
 export function getViewStateForFeatures(
   featureCollection:
     | FeatureCollection<GeometryObject, LocationProperties>
     | GeometryCollection,
   size: [number, number],
-  opts?: {
-    pad?: number;
-    tileSize?: number;
-    minZoom?: number;
-    maxZoom?: number;
-  },
-): ViewState {
-  const {pad = 0.05, tileSize = 512, minZoom = 0, maxZoom = 100} = opts || {};
-  const [[x1, y1], [x2, y2]] = geoBounds(featureCollection as any);
-  const bounds: BoundingBox = [
-    x1 - pad * (x2 - x1),
-    y1 - pad * (y2 - y1),
-    x2 + pad * (x2 - x1),
-    y2 + pad * (y2 - y1),
-  ];
-  const {
-    center: [longitude, latitude],
-    zoom,
-  } = viewport(bounds, size, undefined, undefined, tileSize, true);
-
+  opts?: GetViewStateOptions,
+): ViewState & {width: number; height: number} {
+  const {pad = 0.05, maxZoom = 100} = opts || {};
+  const bounds = geoBounds(featureCollection as any);
+  const [[x1, y1], [x2, y2]] = bounds;
+  const paddedBounds: [[number, number], [number, number]] = pad
+    ? [
+        [x1 - pad * (x2 - x1), y1 - pad * (y2 - y1)],
+        [x2 + pad * (x2 - x1), y2 + pad * (y2 - y1)],
+      ]
+    : bounds;
+  const [width, height] = size;
   return {
-    longitude,
-    latitude,
-    zoom: Math.max(Math.min(maxZoom, zoom), minZoom),
-    bearing: 0,
-    pitch: 0,
+    ...fitBounds({
+      width,
+      height,
+      bounds: paddedBounds,
+      padding: opts?.padding,
+      // minZoom,
+      maxZoom,
+    }),
+    width,
+    height,
   };
 }
 
@@ -43,13 +52,8 @@ export function getViewStateForLocations(
   locations: any[],
   getLocationCentroid: (location: any) => [number, number],
   size: [number, number],
-  opts?: {
-    pad?: number;
-    tileSize?: number;
-    minZoom?: number;
-    maxZoom?: number;
-  },
-): ViewState {
+  opts?: GetViewStateOptions,
+): ViewState & {width: number; height: number} {
   return getViewStateForFeatures(
     {
       type: 'GeometryCollection',

package/src/index.ts

@@ -1,10 +1,13 @@
 export * from './types';
 export * from './colors';
-export * from './FlowMapState';
-export * from './FlowMapSelectors';
+export * from './FlowmapState';
+export * from './FlowmapSelectors';
 export * from './time';
 export * from './getViewStateForLocations';
-export * from './provider/FlowMapDataProvider';
-export {default as FlowMapAggregateAccessors} from './FlowMapAggregateAccessors';
-export type {default as FlowMapDataProvider} from './provider/FlowMapDataProvider';
-export {default as LocalFlowMapDataProvider} from './provider/LocalFlowMapDataProvider';
+export * from './provider/FlowmapDataProvider';
+export {default as FlowmapAggregateAccessors} from './FlowmapAggregateAccessors';
+export type {default as FlowmapDataProvider} from './provider/FlowmapDataProvider';
+export {default as LocalFlowmapDataProvider} from './provider/LocalFlowmapDataProvider';
+export {default as createWorkerDataProvider} from './provider/createWorkerDataProvider';
+export {default as WorkerFlowmapDataProvider} from './provider/WorkerFlowmapDataProvider';
+export * from './provider/WorkerFlowmapDataProvider';