Merge branch 'master' into chr/coc

README.md

@@ -28,7 +28,7 @@
 
 [<img width="600" alt="Kepler.gl Demo" src="https://eng.uber.com/wp-content/uploads/2018/05/image4-3-768x493.png">](http://kepler.gl/#/demo)
 
-[Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [Mapbox GL](https://www.mapbox.com) and [deck.gl](http://uber.github.io/deck.gl/#/), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly.
+[Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [MapLibre GL](https://maplibre.org/) and [deck.gl](https://deck.gl/), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly.
 
 Kepler.gl is also a React component that uses [Redux](https://redux.js.org/) to manage its state and data flow. It can be embedded into other React-Redux applications and is highly customizable. For information on how to embed kepler.gl in your app take a look at this step-by-step [tutorial][vis-academy] on vis.academy.
 
@@ -217,7 +217,7 @@ Action triggered when map viewport is updated.
 
 Function called when `KeplerGL` adds or removes a `MapContainer` component having an inner Mapbox map.
 
-The `mapbox` argument is an [`InteractiveMap`](https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map) when added or `null` when removed.
+The `mapbox` argument is an [`MapRef`](https://visgl.github.io/react-map-gl/docs/api-reference/types#mapref) when added or `null` when removed.
 
 The `index` argument is 0 for a single map or 1 for an additional map (since `KeplerGL` supports an optional split map view).
 

contributing/DEVELOPERS.md

@@ -82,7 +82,7 @@ npm run start:deck-src
 
 ## Running Tests
 
-- We write node and browser tests with [Tape][tape], [Enzyme][enzyme], [jsDom](https://www.npmjs.com/package/jsdom) and [@probe.gl/test-util](https://uber-web.github.io/probe.gl/docs/api-reference/test-utils/browser-driver), and lint with [ESLint][eslint]. Make sure to run test before submitting your PR. To run all of the tests once
+- We write node and browser tests with [Tape][tape], [Enzyme][enzyme], [jsDom](https://www.npmjs.com/package/jsdom) and [@probe.gl/test-util](https://uber-web.github.io/probe.gl/docs/modules/test-utils/browser-driver), and lint with [ESLint][eslint]. Make sure to run test before submitting your PR. To run all of the tests once
 
 ```bash
 yarn test

docs/api-reference/actions/actions.md

@@ -698,15 +698,15 @@ Returns **{type: ActionTypes.MAP_CLICK}**
 ### onMouseMove
 
 Trigger map mouse moveevent, payload would be
-React-map-gl PointerEvent
-[https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event][202]
+React-map-gl MapLayerMouseEvent
+[https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent][202]
 
 - **ActionTypes**: [`ActionTypes.MOUSE_MOVE`][12]
 - **Updaters**: [`visStateUpdaters.mouseMoveUpdater`][203]
 
 **Parameters**
 
-- `evt` **[Object][164]** PointerEvent
+- `evt` **[Object][164]** MapLayerMouseEvent
 
 Returns **{type: ActionTypes.MAP_CLICK}**
 
@@ -1500,7 +1500,7 @@ Set the export map format (html, json)
 [199]: ../reducers/vis-state.md#visstateupdaterslayerclickupdater
 [200]: ../reducers/vis-state.md#visstateupdaterslayerhoverupdater
 [201]: ../reducers/vis-state.md#visstateupdatersmapclickupdater
-[202]: https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event
+[202]: https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent
 [203]: ../reducers/vis-state.md#visstateupdatersmousemoveupdater
 [204]: ../reducers/vis-state.md#visstateupdatersremovedatasetupdater
 [205]: ../reducers/vis-state.md#visstateupdatersremovefilterupdater

docs/user-guides/b-kepler-gl-workflow/a-add-data-to-the-map.md

@@ -24,7 +24,8 @@ Geometry coordinates should be presented with a geographic coordinate reference
 ## Supported File Formats
  - [CSV](#csv)
  - [GeoJSON](#geojson)
- - [kepler.gl Json](#kepler-gl-json): exported from kepler.gl. See [export map](https://github.com/keplergl/kepler.gl/blob/master/docs/user-guides/k-save-and-export.md#export-map-as-json)
+ - [GeoArrow](#geoarrow)
+ - [kepler.gl Json](#keplergl-json)
 
 
 ### CSV
@@ -190,6 +191,13 @@ kepler.gl will read styles from GeoJSON files. If you are a GeoJSON expert, you
 }
 ```
 
+### GeoArrow
+
+[GeoArrow](https://geoarrow.org/) file, a binary data format which can be visualized with the [PolygonLayer](https://docs.kepler.gl/docs/user-guides/c-types-of-layers/e-polygon).
+
+### kepler.gl JSON
+
+JSON file exported from kepler.gl. See "[Export Map as JSON](https://docs.kepler.gl/docs/user-guides/k-save-and-export#export-map-as-json)".
 
 ### Load Map Using URL
 

docs/user-guides/c-types-of-layers/e-polygon.md

@@ -1,11 +1,8 @@
 # Polygon
 
-Polygon layer can display [GeoJSON](https://tools.ietf.org/html/rfc7946) features. GeoJSON supports the following geometry types: `Point`, `LineString`, `Polygon`, `MultiPoint`, `MultiLineString`, `MultiPolygon`.
+Polygon layer can display all geometry types defined by [RFC 7946 (GeoJSON)](https://tools.ietf.org/html/rfc7946): `Point`, `LineString`, `Polygon`, `MultiPoint`, `MultiLineString`, `MultiPolygon`. 
 
-kepler.gl supports all the GeoJSON types above. You can pass in either a single [`Feature`][features] or a [`FeatureCollection`][feature_collection]
-
-[feature_collection]: https://tools.ietf.org/html/rfc7946#section-3.3
-[features]: https://tools.ietf.org/html/rfc7946#section-3.2
+You can load a GeoJSON file (with a single [`Feature`](https://tools.ietf.org/html/rfc7946#section-3.2) or a [`FeatureCollection`](https://tools.ietf.org/html/rfc7946#section-3.3)) or a GeoArrow file.
 
 
 ![GeoJSON layer](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/image20.png "GeoJSON layer")

docs/user-guides/k-save-and-export.md

@@ -2,7 +2,7 @@
 
 ![Save and Export](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/k-save-and-export-1.png "activate interactions")
 
-kepler.gl is a client-side only application. In the demo app, the data you uploaded stays in your browser. Uber does not send or store any user data to any backends. This rule poses an limitation on how you can save and share your maps.
+kepler.gl is a client-side only application. In the demo app, the data you uploaded stays in your browser. kepler.gl does not send or store any user data to any backends. This rule poses an limitation on how you can save and share your maps.
 
 However, in the demo app, you can:
 

examples/demo-app/src/app.js

@@ -380,8 +380,8 @@ class App extends Component {
       // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
       // console.log(`Map ${index} has closed`);
     } else {
-      // We expect an InteractiveMap created by KeplerGl's MapContainer.
-      // https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map
+      // We expect an Map created by KeplerGl's MapContainer.
+      // https://visgl.github.io/react-map-gl/docs/api-reference/map
       const map = mapbox.getMap();
       map.on('zoomend', e => {
         // console.log(`Map ${index} zoom level: ${e.target.style.z}`);

examples/node-app/webpack.config.js

@@ -38,6 +38,12 @@ const CONFIG = {
         test: /\.json$/,
         loader: 'json-loader',
         exclude: [/node_modules/]
+      },
+      {
+        // fix for arrow-related errors
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto"
       }
     ]
   },

package.json

@@ -185,7 +185,7 @@
     "jsdom": "^16.4.0",
     "json-loader": "^0.5.4",
     "maplibre-gl": "^3.6.2",
-    "minimist": "^1.1.0",
+    "minimist": "^1.2.6",
     "nyc": "^15.1.0",
     "prettier": "1.19.1",
     "progress-bar-webpack-plugin": "^2.1.0",
@@ -238,7 +238,7 @@
     "kind-of": "6.0.3",
     "jpeg-js": "^0.4.3",
     "lodash": "4.17.19",
-    "minimist": "1.2.3",
+    "minimist": "1.2.6",
     "node-fetch": "2.6.1",
     "tough-cookie": "4.0.0"
   },

src/actions/src/vis-state-actions.ts

@@ -1061,11 +1061,11 @@ export type OnMouseMoveUpdaterAction = {
 };
 /**
  * Trigger map mouse moveevent, payload would be
- * React-map-gl PointerEvent
- * https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event
+ * React-map-gl MapLayerMouseEvent
+ * https://visgl.github.io/react-map-gl/docs/api-reference/types#maplayermouseevent
  *
  * @memberof visStateActions
- * @param evt - PointerEvent
+ * @param evt - MapLayerMouseEvent
  * @returns action
  * @public
  */

src/components/src/dnd-context.tsx

@@ -59,6 +59,7 @@ function DndContextFactory(
         onToggleEnableConfig={nop}
         onDuplicateLayer={nop}
         onRemoveLayer={nop}
+        onZoomToLayer={nop}
         layerType={layer.type}
         allowDuplicate={false}
         isDragNDropEnabled={false}

src/components/src/side-panel/layer-manager.tsx

@@ -20,7 +20,7 @@ import InfoHelperFactory from '../common/info-helper';
 
 import {LAYER_BLENDINGS, OVERLAY_BLENDINGS, PANEL_VIEW_TOGGLES} from '@kepler.gl/constants';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
-import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
+import {UIStateActions, VisStateActions, MapStateActions, ActionHandler} from '@kepler.gl/actions';
 import {SidePanelItem} from '../types';
 import {PanelListView} from '@kepler.gl/types';
 import {Datasets} from '@kepler.gl/table';
@@ -45,6 +45,7 @@ type LayerManagerProps = {
   overlayBlending: string;
   uiStateActions: typeof UIStateActions;
   visStateActions: typeof VisStateActions;
+  mapStateActions: typeof MapStateActions;
   showAddDataModal: () => void;
   removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
   showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
@@ -174,6 +175,7 @@ function LayerManagerFactory(
         removeDataset,
         uiStateActions,
         visStateActions,
+        mapStateActions,
         panelListView,
         panelMetadata
       } = this.props;
@@ -218,6 +220,7 @@ function LayerManagerFactory(
                 layerClasses={this.props.layerClasses}
                 uiStateActions={uiStateActions}
                 visStateActions={visStateActions}
+                mapStateActions={mapStateActions}
                 showDeleteDataset
               />
             ) : (
@@ -229,6 +232,7 @@ function LayerManagerFactory(
                 layerOrder={layerOrder}
                 uiStateActions={uiStateActions}
                 visStateActions={visStateActions}
+                mapStateActions={mapStateActions}
                 layerClasses={this.props.layerClasses}
               />
             )}

src/components/src/side-panel/layer-panel/dataset-layer-group.tsx

@@ -5,7 +5,7 @@ import React, {useMemo} from 'react';
 
 import DatasetLayerSectionFactory from './dataset-layer-section';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
-import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
+import {UIStateActions, VisStateActions, ActionHandler, MapStateActions} from '@kepler.gl/actions';
 import {KeplerTable, Datasets} from '@kepler.gl/table';
 
 type DatasetLayerGroupProps = {
@@ -19,6 +19,7 @@ type DatasetLayerGroupProps = {
   updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
   uiStateActions: typeof UIStateActions;
   visStateActions: typeof VisStateActions;
+  mapStateActions: typeof MapStateActions;
 };
 
 DatasetLayerGroupFactory.deps = [DatasetLayerSectionFactory];
@@ -37,7 +38,8 @@ function DatasetLayerGroupFactory(
       layerOrder,
       layerClasses,
       uiStateActions,
-      visStateActions
+      visStateActions,
+      mapStateActions
     } = props;
 
     const datasetLayerSectionData = useMemo(() => {
@@ -69,6 +71,7 @@ function DatasetLayerGroupFactory(
             layerClasses={layerClasses}
             uiStateActions={uiStateActions}
             visStateActions={visStateActions}
+            mapStateActions={mapStateActions}
           />
         ))}
       </>

src/components/src/side-panel/layer-panel/dataset-layer-section.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import SourceDataCatalogFactory from '../common/source-data-catalog';
 import LayerListFactory from './layer-list';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
-import {UIStateActions, ActionHandler, VisStateActions} from '@kepler.gl/actions';
+import {UIStateActions, ActionHandler, VisStateActions, MapStateActions} from '@kepler.gl/actions';
 import {KeplerTable, Datasets} from '@kepler.gl/table';
 
 type DatasetLayerSectionProps = {
@@ -21,7 +21,8 @@ type DatasetLayerSectionProps = {
   updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
   removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
   uiStateActions: typeof UIStateActions;
-  visStateActions: typeof VisStateActions;
+  visStateActions: typeof VisStateActions;  
+  mapStateActions: typeof MapStateActions;
 };
 
 const DatasetLayerSectionWrapper = styled.div.attrs({
@@ -48,7 +49,8 @@ function DatasetLayerSectionFactory(
       layerOrder,
       layerClasses,
       uiStateActions,
-      visStateActions
+      visStateActions,
+      mapStateActions
     } = props;
 
     const datasetCatalog = useMemo(() => {
@@ -71,6 +73,7 @@ function DatasetLayerSectionFactory(
           layerClasses={layerClasses}
           uiStateActions={uiStateActions}
           visStateActions={visStateActions}
+          mapStateActions={mapStateActions}
           isSortable={false}
         />
       </DatasetLayerSectionWrapper>

src/components/src/side-panel/layer-panel/layer-list.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {Datasets} from '@kepler.gl/table';
-import {UIStateActions, VisStateActions} from '@kepler.gl/actions';
+import {UIStateActions, VisStateActions, MapStateActions} from '@kepler.gl/actions';
 
 import {useSortable, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
@@ -23,6 +23,7 @@ export type LayerListProps = {
   isSortable?: boolean;
   uiStateActions: typeof UIStateActions;
   visStateActions: typeof VisStateActions;
+  mapStateActions: typeof MapStateActions;
 };
 
 export type LayerListFactoryDeps = [typeof LayerPanelFactory];
@@ -117,6 +118,7 @@ function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>) {
       layerOrder,
       uiStateActions,
       visStateActions,
+      mapStateActions,
       layerClasses,
       isSortable = true
     } = props;
@@ -159,10 +161,11 @@ function LayerListFactory(LayerPanel: ReturnType<typeof LayerPanelFactory>) {
         layerVisConfigChange: visStateActions.layerVisConfigChange,
         layerTextLabelChange: visStateActions.layerTextLabelChange,
         removeLayer: visStateActions.removeLayer,
+        zoomToLayer: mapStateActions.fitBounds,
         duplicateLayer: visStateActions.duplicateLayer,
         layerSetIsValid: visStateActions.layerSetIsValid
       }),
-      [visStateActions]
+      [visStateActions, mapStateActions]
     );
 
     const panelProps = useMemo(

src/components/src/side-panel/layer-panel/layer-panel-header.tsx

@@ -20,7 +20,8 @@ import {
   Trash,
   VertDots,
   WarningSign,
-  Reset
+  Reset,
+  Crosshairs
 } from '../../common/icons';
 
 import {InlineInput, StyledPanelHeader} from '../../common/styled-components';
@@ -54,6 +55,7 @@ export type LayerPanelHeaderProps = {
   onUpdateLayerLabel: ChangeEventHandler;
   onToggleEnableConfig: MouseEventHandler;
   onRemoveLayer: MouseEventHandler;
+  onZoomToLayer: MouseEventHandler;
   onDuplicateLayer: MouseEventHandler;
   onResetIsValid: MouseEventHandler;
   isConfigActive: boolean;
@@ -71,6 +73,7 @@ export type LayerPanelHeaderProps = {
     enableConfig: ComponentType<Partial<BaseProps>>;
     resetIsValid: ComponentType<Partial<BaseProps>>;
     duplicate: ComponentType<Partial<BaseProps>>;
+    crosshairs: ComponentType<Partial<BaseProps>>;
   };
   listeners?: React.ElementType;
 };
@@ -278,6 +281,7 @@ export function LayerPanelHeaderActionSectionFactory(
       onToggleEnableConfig,
       onDuplicateLayer,
       onRemoveLayer,
+      onZoomToLayer,
       showRemoveLayer,
       isEditingLabel,
       // TODO: may not contain all necessary icons for all actions, e.g. actionIcons.duplicate. Need to to merge rather than replace
@@ -305,6 +309,13 @@ export function LayerPanelHeaderActionSectionFactory(
             IconComponent={actionIcons.duplicate}
             disabled={!allowDuplicate}
           />
+          <PanelHeaderAction
+            className="layer__zoom-to-layer"
+            id={layerId}
+            tooltip={'tooltip.zoomToLayer'}
+            onClick={onZoomToLayer}
+            IconComponent={actionIcons.crosshairs}
+          />
         </StyledPanelHeaderHiddenActions>
         {isValid ? (
           <PanelHeaderAction
@@ -362,7 +373,9 @@ const defaultActionIcons = {
   hidden: EyeUnseen,
   enableConfig: ArrowDown,
   duplicate: Copy,
-  resetIsValid: Reset
+  resetIsValid: Reset,
+  crosshairs:Crosshairs
+  ,
 };
 
 LayerPanelHeaderFactory.deps = [LayerTitleSectionFactory, LayerPanelHeaderActionSectionFactory];