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

package/src/components/container.js

@@ -0,0 +1,173 @@
+// 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, {Component} from 'react';
+import {connect} from 'react-redux';
+import memoize from 'lodash.memoize';
+import {console as Console} from 'global/window';
+import {injector, provideRecipesToInjector, flattenDeps} from './injector';
+import KeplerGlFactory from './kepler-gl';
+import {forwardTo} from 'actions/action-wrapper';
+
+import {registerEntry, deleteEntry, renameEntry} from 'actions/identity-actions';
+import {notNullorUndefined} from 'utils/data-utils';
+
+export const ERROR_MSG = {
+  noState:
+    `kepler.gl state does not exist. ` +
+    `You might forget to mount keplerGlReducer in your root reducer.` +
+    `If it is not mounted as state.keplerGl by default, you need to provide getState as a prop`
+};
+
+ContainerFactory.deps = [KeplerGlFactory];
+
+export function ContainerFactory(KeplerGl) {
+  /** @lends KeplerGl */
+  /**
+    * Main Kepler.gl Component
+    * @param {Object} props
+    *
+    * @param {string} props.id - _required_
+    *
+    * - Default: `map`
+    * The id of this KeplerGl instance. `id` is required if you have multiple
+    * KeplerGl instances in your app. It defines the prop name of the KeplerGl state that is
+    * stored in the KeplerGl reducer. For example, the state of the KeplerGl component with id `foo` is
+    * stored in `state.keplerGl.foo`.
+    *
+    * In case you create multiple kepler.gl instances using the same id, the kepler.gl state defined by the entry will be
+    * overridden by the latest instance and reset to a blank state.
+    * @param {string} props.mapboxApiAccessToken - _required_
+    * @param {string} props.mapboxApiUrl - _optional_
+    * @param {Boolean} props.mapStylesReplaceDefault - _optional_
+    * @param {object} props.initialUiState - _optional_
+
+    * You can create a free account at [www.mapbox.com](www.mapbox.com) and create a token at
+    * [www.mapbox.com/account/access-tokens](www.mapbox.com/account/access-tokens)
+    *
+    *
+    * @param {Number} props.width - _required_ Width of the KeplerGl UI.
+    * @public
+   */
+  class Container extends Component {
+    // default id and address if not provided
+    static defaultProps = {
+      id: 'map',
+      getState: state => state.keplerGl,
+      mint: true
+    };
+
+    constructor(props, ctx) {
+      super(props, ctx);
+
+      this.getSelector = memoize((id, getState) => state => {
+        if (!getState(state)) {
+          // log error
+          Console.error(ERROR_MSG.noState);
+
+          return null;
+        }
+        return getState(state)[id];
+      });
+      this.getDispatch = memoize((id, dispatch) => forwardTo(id, dispatch));
+    }
+
+    componentDidMount() {
+      const {
+        id,
+        mint,
+        mapboxApiAccessToken,
+        mapboxApiUrl,
+        mapStylesReplaceDefault,
+        initialUiState
+      } = this.props;
+
+      // add a new entry to reducer
+      this.props.dispatch(
+        registerEntry({
+          id,
+          mint,
+          mapboxApiAccessToken,
+          mapboxApiUrl,
+          mapStylesReplaceDefault,
+          initialUiState
+        })
+      );
+    }
+
+    componentDidUpdate(prevProps) {
+      // check if id has changed, if true, copy state over
+      if (
+        notNullorUndefined(prevProps.id) &&
+        notNullorUndefined(this.props.id) &&
+        prevProps.id !== this.props.id
+      ) {
+        this.props.dispatch(renameEntry(prevProps.id, this.props.id));
+      }
+    }
+
+    componentWillUnmount() {
+      if (this.props.mint !== false) {
+        // delete entry in reducer
+        this.props.dispatch(deleteEntry(this.props.id));
+      }
+    }
+
+    render() {
+      const {id, getState, dispatch, state} = this.props;
+      const selector = this.getSelector(id, getState);
+
+      if (!selector || !selector(state)) {
+        // instance state hasn't been mounted yet
+        return <div />;
+      }
+
+      return (
+        <KeplerGl
+          {...this.props}
+          id={id}
+          selector={selector}
+          dispatch={this.getDispatch(id, dispatch)}
+        />
+      );
+    }
+  }
+
+  const mapStateToProps = (state, props) => ({state, ...props});
+  const dispatchToProps = dispatch => ({dispatch});
+  return connect(mapStateToProps, dispatchToProps)(Container);
+}
+
+const allDependencies = flattenDeps([], ContainerFactory);
+
+// provide all dependencies to appInjector
+export const appInjector = allDependencies.reduce(
+  (inj, factory) => inj.provide(factory, factory),
+  injector()
+);
+
+// Helper to inject custom components and return kepler.gl container
+export function injectComponents(recipes = []) {
+  return provideRecipesToInjector(recipes, appInjector).get(ContainerFactory);
+}
+
+const InjectedContainer = appInjector.get(ContainerFactory);
+
+export default InjectedContainer;

package/src/components/context.d.ts

@@ -0,0 +1,10 @@
+import {createContext, RefType} from 'react';
+
+export const RootContext = createContext<RefType<any> | null>(null);
+
+const KeplerGlContext = createContext({
+  selector: state => state,
+  id: 'map'
+});
+
+export default KeplerGlContext;

package/src/components/context.js

@@ -0,0 +1,32 @@
+// 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 {createContext} from 'react';
+
+const identity = state => state;
+// New Context API only supported after 16.3
+const KeplerGlContext = createContext({
+  selector: identity,
+  id: 'map'
+});
+
+export const RootContext = createContext(null);
+
+export default KeplerGlContext;

package/src/components/editor/constants.js

@@ -0,0 +1,39 @@
+// 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.
+
+// Copied from react-map-gl-draw until it gets exported
+export const RENDER_STATE = {
+  INACTIVE: 'INACTIVE',
+  UNCOMMITTED: 'UNCOMMITTED',
+  SELECTED: 'SELECTED',
+  HOVERED: 'HOVERED'
+};
+export const RENDER_TYPE = {
+  POINT: 'Point',
+  LINE_STRING: 'LineString',
+  POLYGON: 'Polygon',
+  RECTANGLE: 'Rectangle'
+};
+
+export const COLORS = {
+  PRIMARY: '#26B5F2',
+  SECONDARY: '#ffff00',
+  TERTIARY: '#6c6c6c'
+};

package/src/components/editor/editor.js

@@ -0,0 +1,218 @@
+// 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, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {Editor as Draw} from 'react-map-gl-draw';
+import window from 'global/window';
+import classnames from 'classnames';
+import get from 'lodash.get';
+import {createSelector} from 'reselect';
+
+import FeatureActionPanelFactory from './feature-action-panel';
+import {FILTER_TYPES, EDITOR_MODES, EDITOR_AVAILABLE_LAYERS} from 'constants/default-settings';
+
+import {DEFAULT_RADIUS, getStyle as getFeatureStyle} from './feature-styles';
+import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style';
+import KeyEvent from 'constants/keyevent';
+
+const StyledWrapper = styled.div`
+  cursor: ${props => (props.editor.mode === EDITOR_MODES.EDIT ? 'pointer' : 'crosshair')};
+  position: relative;
+`;
+
+const editorLayerFilter = layer => EDITOR_AVAILABLE_LAYERS.includes(layer.type);
+
+EditorFactory.deps = [FeatureActionPanelFactory];
+
+export default function EditorFactory(FeatureActionPanel) {
+  class Editor extends Component {
+    static propTypes = {
+      filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+      layers: PropTypes.arrayOf(PropTypes.object).isRequired,
+      datasets: PropTypes.object.isRequired,
+      editor: PropTypes.object.isRequired,
+      layersToRender: PropTypes.object.isRequired,
+      onSelect: PropTypes.func.isRequired,
+      onUpdate: PropTypes.func.isRequired,
+      onDeleteFeature: PropTypes.func.isRequired,
+      onTogglePolygonFilter: PropTypes.func.isRequired,
+
+      index: PropTypes.number,
+      classnames: PropTypes.string,
+      clickRadius: PropTypes.number,
+      isEnabled: PropTypes.bool
+    };
+
+    static defaultProps = {
+      clickRadius: DEFAULT_RADIUS
+    };
+
+    state = {
+      showActions: false,
+      lastPosition: null
+    };
+
+    componentDidMount() {
+      window.addEventListener('keydown', this._onKeyPressed);
+    }
+
+    componentWillUnmount() {
+      window.removeEventListener('keydown', this._onKeyPressed);
+    }
+
+    layerSelector = props => props.layers;
+    layersToRenderSelector = props => props.layersToRender;
+    filterSelector = props => props.filters;
+    selectedFeatureIdSelector = props => get(props, ['editor', 'selectedFeature', 'id']);
+    editorFeatureSelector = props => get(props, ['editor', 'features']);
+
+    currentFilterSelector = createSelector(
+      this.filterSelector,
+      this.selectedFeatureIdSelector,
+      (filters, selectedFeatureId) => filters.find(f => f.value && f.value.id === selectedFeatureId)
+    );
+
+    availableLayersSeletor = createSelector(
+      this.layerSelector,
+      this.layersToRenderSelector,
+      (layers, layersToRender) =>
+        layers.filter(editorLayerFilter).filter(layer => {
+          return layersToRender[layer.id];
+        })
+    );
+
+    allFeaturesSelector = createSelector(
+      this.filterSelector,
+      this.editorFeatureSelector,
+      (filters, editorFeatures) =>
+        filters
+          .filter(f => f.type === FILTER_TYPES.polygon)
+          .map(f => f.value)
+          .concat(editorFeatures)
+    );
+
+    _onKeyPressed = event => {
+      const {isEnabled} = this.props;
+
+      if (!isEnabled) {
+        return;
+      }
+
+      switch (event.keyCode) {
+        case KeyEvent.DOM_VK_DELETE:
+        case KeyEvent.DOM_VK_BACK_SPACE:
+          this._onDeleteSelectedFeature();
+          break;
+        case KeyEvent.DOM_VK_ESCAPE:
+          this.props.onSelect(null);
+          break;
+        default:
+          break;
+      }
+    };
+
+    _onSelect = ({selectedFeatureId, sourceEvent}) => {
+      const allFeatures = this.allFeaturesSelector(this.props);
+      this.setState(
+        {
+          ...(sourceEvent.rightButton
+            ? {
+                showActions: true,
+                lastPosition: {
+                  x: sourceEvent.changedPointers[0].offsetX,
+                  y: sourceEvent.changedPointers[0].offsetY
+                }
+              }
+            : null)
+        },
+        () => {
+          this.props.onSelect(allFeatures.find(f => f.id === selectedFeatureId));
+        }
+      );
+    };
+
+    _onDeleteSelectedFeature = () => {
+      if (this.state.showActions) {
+        this.setState({showActions: false});
+      }
+
+      const {editor} = this.props;
+      const {selectedFeature = {}} = editor;
+      this.props.onDeleteFeature(selectedFeature);
+    };
+
+    _closeFeatureAction = () => {
+      this.setState({showActions: false});
+    };
+
+    _onToggleLayer = layer => {
+      const {selectedFeature} = this.props.editor;
+      if (!selectedFeature) {
+        return;
+      }
+
+      this.props.onTogglePolygonFilter(layer, selectedFeature);
+    };
+
+    render() {
+      const {className, clickRadius, datasets, editor, onUpdate, style} = this.props;
+
+      const {lastPosition, showActions} = this.state;
+      const selectedFeatureId = get(editor, ['selectedFeature', 'id']);
+      const currentFilter = this.currentFilterSelector(this.props);
+      const availableLayers = this.availableLayersSeletor(this.props);
+      const allFeatures = this.allFeaturesSelector(this.props);
+
+      return (
+        <StyledWrapper editor={editor} className={classnames('editor', className)} style={style}>
+          <Draw
+            clickRadius={clickRadius}
+            mode={editor.mode}
+            features={allFeatures}
+            selectedFeatureId={selectedFeatureId}
+            onSelect={this._onSelect}
+            onUpdate={onUpdate}
+            getEditHandleShape={getEditHandleShape}
+            getFeatureStyle={getFeatureStyle}
+            getEditHandleStyle={getEditHandleStyle}
+          />
+          {showActions && Boolean(selectedFeatureId) ? (
+            <FeatureActionPanel
+              selectedFeature={get(editor, ['selectedFeature'])}
+              datasets={datasets}
+              layers={availableLayers}
+              currentFilter={currentFilter}
+              onClose={this._closeFeatureAction}
+              onDeleteFeature={this._onDeleteSelectedFeature}
+              onToggleLayer={this._onToggleLayer}
+              position={lastPosition}
+            />
+          ) : null}
+        </StyledWrapper>
+      );
+    }
+  }
+
+  Editor.displayName = 'Editor';
+
+  return Editor;
+}

package/src/components/editor/feature-action-panel.js

@@ -0,0 +1,143 @@
+// 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, useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import ActionPanel, {ActionPanelItem} from 'components/common/action-panel';
+import styled from 'styled-components';
+import onClickOutside from 'react-onclickoutside';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {Trash, Layers, Copy, Checkmark} from 'components/common/icons';
+import copy from 'copy-to-clipboard';
+
+const LAYOVER_OFFSET = 4;
+
+const StyledActionsLayer = styled.div`
+  position: absolute;
+`;
+
+PureFeatureActionPanelFactory.deps = [];
+
+export function PureFeatureActionPanelFactory() {
+  const FeatureActionPanel = ({
+    className,
+    datasets,
+    selectedFeature,
+    position,
+    layers,
+    currentFilter,
+    onToggleLayer,
+    onDeleteFeature
+  }) => {
+    const [copied, setCopied] = useState(false);
+    const {layerId = []} = currentFilter || {};
+    const intl = useIntl();
+
+    const copyGeometry = useCallback(() => {
+      if (selectedFeature?.geometry) copy(JSON.stringify(selectedFeature.geometry));
+      setCopied(true);
+    }, [selectedFeature?.geometry]);
+
+    return (
+      <StyledActionsLayer
+        className={classnames('feature-action-panel', className)}
+        style={{
+          top: `${position.y + LAYOVER_OFFSET}px`,
+          left: `${position.x + LAYOVER_OFFSET}px`
+        }}
+      >
+        <ActionPanel>
+          <ActionPanelItem
+            className="editor-layers-list"
+            label={intl.formatMessage({id: 'editor.filterLayer', defaultMessage: 'Filter layers'})}
+            Icon={Layers}
+          >
+            {layers.map((layer, index) => (
+              <ActionPanelItem
+                key={index}
+                label={layer.config.label}
+                color={datasets[layer.config.dataId].color}
+                isSelection={true}
+                isActive={layerId.includes(layer.id)}
+                onClick={() => onToggleLayer(layer)}
+                className="layer-panel-item"
+              />
+            ))}
+          </ActionPanelItem>
+          <ActionPanelItem
+            label={intl.formatMessage({id: 'editor.copyGeometry', defaultMessage: 'Copy Geometry'})}
+            className="delete-panel-item"
+            Icon={copied ? Checkmark : Copy}
+            onClick={copyGeometry}
+          />
+
+          <ActionPanelItem
+            label={intl.formatMessage({id: 'tooltip.delete', defaultMessage: 'Delete'})}
+            className="delete-panel-item"
+            Icon={Trash}
+            onClick={onDeleteFeature}
+          />
+        </ActionPanel>
+      </StyledActionsLayer>
+    );
+  };
+
+  FeatureActionPanel.displayName = 'FeatureActionPanel';
+  FeatureActionPanel.propTypes = {
+    className: PropTypes.string,
+    datasets: PropTypes.object.isRequired,
+    position: PropTypes.object.isRequired,
+    layers: PropTypes.arrayOf(PropTypes.object).isRequired,
+    currentFilter: PropTypes.object,
+    onClose: PropTypes.func.isRequired,
+    onDeleteFeature: PropTypes.func.isRequired
+  };
+
+  FeatureActionPanel.defaultProps = {
+    position: {}
+  };
+
+  return FeatureActionPanel;
+}
+
+FeatureActionPanelFactory.deps = PureFeatureActionPanelFactory.deps;
+
+export default function FeatureActionPanelFactory() {
+  const PureFeatureActionPanel = PureFeatureActionPanelFactory();
+
+  const ClickOutsideFeatureActionPanel = props => {
+    // @ts-ignore
+    ClickOutsideFeatureActionPanel.handleClickOutside = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      props.onClose?.();
+    };
+    return <PureFeatureActionPanel {...props} />;
+  };
+
+  const clickOutsideConfig = {
+    // @ts-ignore
+    handleClickOutside: () => ClickOutsideFeatureActionPanel.handleClickOutside
+  };
+
+  return onClickOutside(ClickOutsideFeatureActionPanel, clickOutsideConfig);
+}

package/src/components/editor/feature-styles.js

@@ -0,0 +1,75 @@
+// 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 {RenderStates, RenderTypes} from 'react-map-gl-draw';
+import get from 'lodash.get';
+import {COLORS} from './constants';
+
+export const DEFAULT_RADIUS = 5;
+export const DEFAULT_STATE_STYLE_STROKE = COLORS.PRIMARY;
+
+export const STATE_STYLES_STROKE = {
+  [RenderStates.INACTIVE]: '#26B5F2',
+  [RenderStates.UNCOMMITTED]: '#a9a9a9',
+  [RenderStates.CLOSING]: '#a9a9a9',
+  [RenderStates.SELECTED]: '#26B5F2',
+  [RenderStates.HOVERED]: '#26B5F2'
+};
+
+export const DEFAULT_STATE_STYLE_FILL = '#000';
+
+export const STATE_STYLES_FILL = {
+  [RenderStates.INACTIVE]: '#333333',
+  [RenderStates.HOVERED]: '#7ac943',
+  [RenderStates.SELECTED]: '#ffff00',
+  [RenderStates.UNCOMMITTED]: '#a9a9a9',
+  [RenderStates.CLOSING]: '#a9a9a9'
+};
+
+export const DEFAULT_STATE_STYLE_OPACITY = 0.1;
+
+export const STATE_STYLES_STROKE_WIDTH = 2;
+
+export const DEFAULT_STROKE_DASH_ARRAY = '4,2';
+
+export const RENDER_TYPE_STYLES = {
+  [RenderTypes.POINT]: () => ({r: DEFAULT_RADIUS}),
+  [RenderTypes.LINE_STRING]: () => ({fill: 'none'})
+};
+
+export function noOp() {}
+
+export function getStyle({feature, state}) {
+  const isVisible = get(feature, ['properties', 'isVisible'], true);
+  const style = {
+    stroke: STATE_STYLES_STROKE[state] || DEFAULT_STATE_STYLE_STROKE,
+    strokeWidth: isVisible ? STATE_STYLES_STROKE_WIDTH : 0,
+    fill: STATE_STYLES_FILL[state] || DEFAULT_STATE_STYLE_FILL,
+    fillOpacity: DEFAULT_STATE_STYLE_OPACITY,
+    ...(state !== RenderStates.SELECTED ? {strokeDasharray: DEFAULT_STROKE_DASH_ARRAY} : null)
+  };
+
+  const renderType = feature.properties ? feature.properties.renderType : feature.renderType;
+
+  return {
+    ...style,
+    ...(RENDER_TYPE_STYLES[renderType] || noOp)()
+  };
+}