@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/map/map-control.js

@@ -0,0 +1,100 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import KeplerGlLogo from 'components/common/logo';
+
+// factories
+import SplitMapButtonFactory from './split-map-button';
+import Toggle3dButtonFactory from './toggle-3d-button';
+import LayerSelectorPanelFactory from './layer-selector-panel';
+import MapLegendPanelFactory from './map-legend-panel';
+import MapDrawPanelFactory from './map-draw-panel';
+import LocalePanelFactory from './locale-panel';
+
+const StyledMapControl = styled.div`
+  right: 0;
+  padding: ${props => props.theme.mapControl.padding}px;
+  z-index: 10;
+  margin-top: ${props => props.top || 0}px;
+  position: absolute;
+  display: grid;
+  row-gap: 8px;
+  justify-items: end;
+  pointer-events: none; /* prevent padding from blocking input */
+  & > * {
+    /* all children should allow input */
+    pointer-events: all;
+  }
+`;
+
+const LegendLogo = <KeplerGlLogo version={false} appName="kepler.gl" />;
+
+MapControlFactory.deps = [
+  MapDrawPanelFactory,
+  Toggle3dButtonFactory,
+  SplitMapButtonFactory,
+  MapLegendPanelFactory,
+  LayerSelectorPanelFactory,
+  LocalePanelFactory
+];
+
+function MapControlFactory(
+  MapDrawPanel,
+  Toggle3dButton,
+  SplitMapButton,
+  MapLegendPanel,
+  LayerSelectorPanel,
+  LocalePanel
+) {
+  const DEFAULT_ACTIONS = [
+    SplitMapButton,
+    LayerSelectorPanel,
+    Toggle3dButton,
+    MapLegendPanel,
+    MapDrawPanel,
+    LocalePanel
+  ];
+
+  /** @type {import('./map-control').MapControl} */
+  const MapControl = ({actionComponents = DEFAULT_ACTIONS, ...props}) => {
+    return (
+      <StyledMapControl className="map-control" top={props.top}>
+        {actionComponents.map((ActionComponent, index) => (
+          <ActionComponent key={index} className="map-control-action" {...props} />
+        ))}
+      </StyledMapControl>
+    );
+  };
+
+  MapControl.defaultProps = {
+    isSplit: false,
+    top: 0,
+    mapIndex: 0,
+    logoComponent: LegendLogo
+  };
+
+  MapControl.displayName = 'MapControl';
+
+  return React.memo(MapControl);
+}
+
+export default MapControlFactory;

package/src/components/map/map-draw-panel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Editor, MapControls} from '../../reducers';
+import {MapDrawPanelIcons} from './map-control';
+
+export type MapDrawPanelProps = {
+  editor: Editor,
+  mapControls: MapControls,
+  onToggleMapControl: (control: string) => void;
+  onSetEditorMode: (mode: string) => void,
+  onToggleEditorVisibility: () => void,
+  actionIcons: MapDrawPanelIcons
+};
+
+export type MapDrawPanelComponent = React.FunctionComponent<MapDrawPanelProps>;
+export function MapDrawPanelFactory(): MapDrawPanelComponent;
+

package/src/components/map/map-draw-panel.js

@@ -0,0 +1,125 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {useCallback} from 'react';
+import classnames from 'classnames';
+
+import {EDITOR_MODES} from 'constants/default-settings';
+import {
+  CursorClick,
+  DrawPolygon,
+  EyeSeen,
+  EyeUnseen,
+  Polygon,
+  Rectangle
+} from 'components/common/icons';
+import {MapControlButton} from 'components/common/styled-components';
+import ToolbarItem from 'components/common/toolbar-item';
+import MapControlTooltipFactory from './map-control-tooltip';
+import MapControlPanelFactory from './map-control-panel';
+import MapControlToolbarFactory from './map-control-toolbar';
+
+MapDrawPanelFactory.deps = [
+  MapControlTooltipFactory,
+  MapControlPanelFactory,
+  MapControlToolbarFactory
+];
+function MapDrawPanelFactory(MapControlTooltip, MapControlPanel, MapControlToolbar) {
+  const defaultActionIcons = {
+    visible: EyeSeen,
+    hidden: EyeUnseen,
+    polygon: DrawPolygon,
+    cursor: CursorClick,
+    innerPolygon: Polygon,
+    rectangle: Rectangle
+  };
+  /** @type {import('./map-draw-panel').MapDrawPanelComponent} */
+  const MapDrawPanel = React.memo(
+    ({
+      editor,
+      mapControls,
+      onToggleMapControl,
+      onSetEditorMode,
+      onToggleEditorVisibility,
+      actionIcons = defaultActionIcons
+    }) => {
+      const isActive = mapControls?.mapDraw?.active;
+      const onToggleMenuPanel = useCallback(() => onToggleMapControl('mapDraw'), [
+        onToggleMapControl
+      ]);
+      if (!mapControls?.mapDraw?.show) {
+        return null;
+      }
+      return (
+        <div className="map-draw-controls" style={{position: 'relative'}}>
+          {isActive ? (
+            <MapControlToolbar show={isActive}>
+              <ToolbarItem
+                className="edit-feature"
+                onClick={() => onSetEditorMode(EDITOR_MODES.EDIT)}
+                label="toolbar.select"
+                icon={actionIcons.cursor}
+                active={editor.mode === EDITOR_MODES.EDIT}
+              />
+              <ToolbarItem
+                className="draw-feature"
+                onClick={() => onSetEditorMode(EDITOR_MODES.DRAW_POLYGON)}
+                label="toolbar.polygon"
+                icon={actionIcons.innerPolygon}
+                active={editor.mode === EDITOR_MODES.DRAW_POLYGON}
+              />
+              <ToolbarItem
+                className="draw-rectangle"
+                onClick={() => onSetEditorMode(EDITOR_MODES.DRAW_RECTANGLE)}
+                label="toolbar.rectangle"
+                icon={actionIcons.rectangle}
+                active={editor.mode === EDITOR_MODES.DRAW_RECTANGLE}
+              />
+              <ToolbarItem
+                className="toggle-features"
+                onClick={onToggleEditorVisibility}
+                label={editor.visible ? 'toolbar.hide' : 'toolbar.show'}
+                icon={editor.visible ? actionIcons.visible : actionIcons.hidden}
+              />
+            </MapControlToolbar>
+          ) : null}
+          <MapControlButton
+            onClick={e => {
+              e.preventDefault();
+              onToggleMenuPanel();
+            }}
+            active={isActive}
+            className={classnames('map-control-button', 'map-draw', {isActive})}
+            data-tip
+            data-for="map-draw"
+          >
+            <actionIcons.polygon height="22px" />
+            <MapControlTooltip id="map-draw" message="tooltip.DrawOnMap" />
+          </MapControlButton>
+        </div>
+      );
+    }
+  );
+
+  MapDrawPanel.displayName = 'MapDrawPanel';
+  return MapDrawPanel;
+}
+
+export default MapDrawPanelFactory;

package/src/components/map/map-legend-panel.d.ts

@@ -0,0 +1,20 @@
+import React, {Element} from 'react';
+import {Layer} from 'layers';
+import {MapControls} from '../../reducers';
+
+interface MapLegendPanelIcons {
+  legend: ComponentType<any>
+}
+
+export type MapLegendPanelProps = {
+  layers: ReadonlyArray<Layer>;
+  scale: number;
+  onToggleMapControl: (control: string) => void;
+  isExport: boolean;
+  logoComponent: Element;
+  actionIcons: MapLegendPanelIcons;
+  mapControls: MapControls;
+};
+
+export type MapLegendPanelComponent = React.FunctionComponent<MapLegendPanelProps>;
+export function MapLegendPanelFactory(): MapLegendPanelComponent;

package/src/components/map/map-legend-panel.js

@@ -0,0 +1,100 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {useCallback} from 'react';
+import classnames from 'classnames';
+import {Legend} from 'components/common/icons';
+import {FormattedMessage} from 'localization';
+import {MapControlButton, Tooltip} from 'components/common/styled-components';
+import MapControlTooltipFactory from './map-control-tooltip';
+import MapControlPanelFactory from './map-control-panel';
+import MapLegendFactory from './map-legend';
+
+const MapLegendTooltip = ({id, message}) => (
+  <Tooltip id={id} place="left" effect="solid">
+    <span>
+      <FormattedMessage id={message} />
+    </span>
+  </Tooltip>
+);
+
+MapLegendPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory, MapLegendFactory];
+
+function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
+  const defaultActionIcons = {
+    legend: Legend
+  };
+
+  /** @type {import('./map-legend-panel').MapLegendPanelComponent} */
+  const MapLegendPanel = ({
+    layers,
+    mapControls,
+    scale,
+    onToggleMapControl,
+    isExport,
+    logoComponent,
+    actionIcons = defaultActionIcons
+  }) => {
+    const mapLegend = mapControls?.mapLegend || {};
+    const {active: isActive, disableClose} = mapLegend || {};
+    const onToggleMenuPanel = useCallback(() => onToggleMapControl('mapLegend'), [
+      onToggleMapControl
+    ]);
+
+    const onClick = useCallback(
+      e => {
+        e.preventDefault();
+        onToggleMenuPanel();
+      },
+      [onToggleMenuPanel]
+    );
+
+    if (!mapLegend.show) {
+      return null;
+    }
+    return !isActive ? (
+      (<MapControlButton
+        data-tip
+        data-for="show-legend"
+        className={classnames('map-control-button', 'show-legend', {isActive})}
+        onClick={onClick}
+      >
+        <actionIcons.legend height="22px" />
+        <MapLegendTooltip id="show-legend" message={'tooltip.showLegend'} />
+      </MapControlButton>)
+    ) : (
+      (<MapControlPanel
+        scale={scale}
+        header={'header.layerLegend'}
+        onClick={onToggleMenuPanel}
+        isExport={isExport}
+        disableClose={disableClose}
+        logoComponent={logoComponent}
+      >
+        <MapLegend layers={layers} />
+      </MapControlPanel>)
+    );
+  };
+
+  MapLegendPanel.displayName = 'MapLegendPanel';
+  return MapLegendPanel;
+}
+
+export default MapLegendPanelFactory;

package/src/components/map/map-legend.d.ts

@@ -0,0 +1,58 @@
+import {FunctionComponent} from 'react';
+import {Layer, LayerConfig, VisualChannel, VisualChannelDescription} from 'layers';
+import {MapLegendPanelComponent} from './map-legend-panel';
+
+export type LayerSizeLegendProps = {
+  label: string,
+  name: string
+};
+
+export const LayerSizeLegend: FunctionComponent<LayerSizeLegendProps>;
+
+export type SingleColorLegendProps = {
+  width: number,
+  color: string
+};
+
+export const SingleColorLegend: FunctionComponent<SingleColorLegendProps>;
+
+export type LayerColorLegendProps = {
+  description: VisualChannelDescription,
+  config: LayerConfig,
+  width: number,
+  colorChannel: VisualChannel
+};
+
+export const LayerColorLegend: FunctionComponent<LayerColorLegendProps>;
+
+export type LayerLegendHeaderProps = {
+  layer: Layer,
+  options?: {
+    showLayerName?: boolean
+  }
+};
+
+export const LayerLegendHeader: FunctionComponent<LayerLegendHeaderProps>;
+
+export function LayerLegendHeaderFactory(): LayerLegendHeader;
+
+export type LayerLegendContentProps = {
+  layer: Layer,
+  containerW: number,
+};
+
+export const LayerLegendContent: FunctionComponent<LayerLegendContentProps>;
+
+export function LayerLegendContentFactory(): LayerLegendContent;
+
+export type MapLegendProps = {
+  layers?: ReadonlyArray<Layer>,
+  width?: number,
+  options?: {
+    showLayerName?: boolean
+  }
+};
+
+export const MapLegend: FunctionComponent<MapLegendProps>;
+
+export function MapLegendFactory(): MapLegend;

package/src/components/map/map-legend.js

@@ -0,0 +1,228 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import {rgb} from 'd3-color';
+import ColorLegend from 'components/common/color-legend';
+import {CHANNEL_SCALES, DIMENSIONS} from 'constants/default-settings';
+import {FormattedMessage} from 'localization';
+
+export const StyledMapControlLegend = styled.div`
+  padding: 10px ${props => props.theme.mapControl.padding}px 10px
+    ${props => props.theme.mapControl.padding}px;
+  font-size: 11px;
+  border-bottom-color: ${props => props.theme.panelBorderColor};
+  border-bottom-style: solid;
+  border-bottom-width: ${props => (props.last ? 0 : '1px')};
+  width: ${props => props.width}px;
+
+  .legend--layer_name {
+    font-size: 12px;
+    padding-right: ${props => props.theme.mapControl.padding}px;
+    color: ${props => props.theme.textColor};
+    font-weight: 500;
+  }
+  .legend--layer_type {
+    color: ${props => props.theme.subtextColor};
+    font-weight: 500;
+    font-size: 11px;
+    padding-right: ${props => props.theme.mapControl.padding}px;
+  }
+
+  .legend--layer__title {
+    padding-right: ${props => props.theme.mapControl.padding}px;
+  }
+
+  .legend--layer_by {
+    color: ${props => props.theme.subtextColor};
+  }
+
+  .legend--layer_color_field {
+    color: ${props => props.theme.textColorHl};
+    font-weight: 500;
+  }
+
+  .legend--layer_color-legend {
+    margin-top: 6px;
+  }
+`;
+
+export const VisualChannelMetric = ({name}) => {
+  return (
+    <div className="legend--layer__title">
+      <span className="legend--layer_color_field">
+        <FormattedMessage id={name} />
+      </span>
+    </div>
+  );
+};
+
+/** @type {typeof import('./map-legend').LayerSizeLegend} */
+export const LayerSizeLegend = ({label, name}) => (
+  <div className="legend--layer_size-schema">
+    <p>
+      <span className="legend--layer_by">
+        <FormattedMessage id={label} />
+      </span>
+      <span className="legend--layer_by"> by </span>
+    </p>
+    <VisualChannelMetric name={name} />
+  </div>
+);
+
+const SINGLE_COLOR_DOMAIN = [''];
+
+/** @type {typeof import('./map-legend').SingleColorLegend} */
+export const SingleColorLegend = React.memo(({width, color}) => (
+  <ColorLegend
+    scaleType="ordinal"
+    displayLabel={false}
+    domain={SINGLE_COLOR_DOMAIN}
+    fieldType={null}
+    range={{colors: [rgb(...color).toString()]}}
+    width={width}
+  />
+));
+
+SingleColorLegend.displayName = 'SingleColorLegend';
+
+/** @type {typeof import('./map-legend').LayerColorLegend} */
+export const LayerColorLegend = React.memo(({description, config, width, colorChannel}) => {
+  const enableColorBy = description.measure;
+  const {scale, field, domain, range, property} = colorChannel;
+  const [colorScale, colorField, colorDomain] = [scale, field, domain].map(k => config[k]);
+  const colorRange = config.visConfig[range];
+
+  return (
+    <div>
+      <div className="legend--layer_color-schema">
+        <div>
+          {enableColorBy ? <VisualChannelMetric name={enableColorBy} /> : null}
+          <div className="legend--layer_color-legend">
+            {enableColorBy ? (
+              <ColorLegend
+                scaleType={colorScale}
+                displayLabel
+                domain={colorDomain}
+                fieldType={(colorField && colorField.type) || 'real'}
+                range={colorRange}
+                width={width}
+              />
+            ) : (
+              <SingleColorLegend
+                color={config.visConfig[property] || config[property] || config.color}
+                width={width}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LayerColorLegend.displayName = 'LayerColorLegend';
+
+const isColorChannel = visualChannel =>
+  [CHANNEL_SCALES.color, CHANNEL_SCALES.colorAggr].includes(visualChannel.channelScaleType);
+
+export function LayerLegendHeaderFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendHeader }> */
+  const LayerLegendHeader = ({options, layer}) => {
+    return options?.showLayerName !== false ? (
+      <div className="legend--layer_name">{layer.config.label}</div>
+    ) : null;
+  };
+  return LayerLegendHeader;
+}
+
+export function LayerLegendContentFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendContent }> */
+  const LayerLegendContent = ({layer, containerW}) => {
+    const colorChannels = Object.values(layer.visualChannels).filter(isColorChannel);
+    const nonColorChannels = Object.values(layer.visualChannels).filter(vc => !isColorChannel(vc));
+
+    return (
+      <>
+        {colorChannels.map(colorChannel =>
+          !colorChannel.condition || colorChannel.condition(layer.config) ? (
+            <LayerColorLegend
+              key={colorChannel.key}
+              description={layer.getVisualChannelDescription(colorChannel.key)}
+              config={layer.config}
+              width={containerW - 2 * DIMENSIONS.mapControl.padding}
+              colorChannel={colorChannel}
+            />
+          ) : null
+        )}
+        {nonColorChannels.map(visualChannel => {
+          const matchCondition = !visualChannel.condition || visualChannel.condition(layer.config);
+          const enabled = layer.config[visualChannel.field] || visualChannel.defaultMeasure;
+
+          const description = layer.getVisualChannelDescription(visualChannel.key);
+
+          return matchCondition && enabled ? (
+            <LayerSizeLegend
+              key={visualChannel.key}
+              label={description.label}
+              name={description.measure}
+            />
+          ) : null;
+        })}
+      </>
+    );
+  };
+
+  return LayerLegendContent;
+}
+
+MapLegendFactory.deps = [LayerLegendHeaderFactory, LayerLegendContentFactory];
+function MapLegendFactory(LayerLegendHeader, LayerLegendContent) {
+  /** @type {typeof import('./map-legend').MapLegend }> */
+  const MapLegend = ({layers = [], width, options}) => (
+    <div className="map-legend">
+      {layers.map((layer, index) => {
+        if (!layer.isValidToSave() || layer.config.hidden) {
+          return null;
+        }
+        const containerW = width || DIMENSIONS.mapControl.width;
+
+        return (
+          <StyledMapControlLegend
+            className="legend--layer"
+            last={index === layers.length - 1}
+            key={index}
+            width={containerW}
+          >
+            <LayerLegendHeader options={options} layer={layer} />
+            <LayerLegendContent containerW={containerW} layer={layer} />
+          </StyledMapControlLegend>
+        );
+      })}
+    </div>
+  );
+
+  MapLegend.displayName = 'MapLegend';
+
+  return MapLegend;
+}
+
+export default MapLegendFactory;

package/src/components/map/map-popover.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import {FunctionComponent} from 'react';
+import {IntlShape} from 'react-intl';
+import {LayerHoverProp} from '../../utils/layer-utils';
+
+export type MapPopoverProps = {
+  x: number;
+  y: number;
+  frozen?: boolean;
+  coordinate: [number, number] | boolean;
+  layerHoverProp: LayerHoverProp | null;
+  isBase?: boolean;
+  zoom: number;
+  container?: HTMLElement | null;
+  onClose: () => void;
+};
+
+type IntlProps = {
+  intl: IntlShape;
+};
+
+export const MapPopover: FunctionComponent<MapPopoverProps & IntlProps>;
+function MapPopoverFactory(
+  LayerHoverInfo: React.Component,
+  CoordinateInfo: React.Component
+): FunctionComponent<MapPopoverProps & IntlProps>;
+
+export default MapPopoverFactory;