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

package/src/components/modals/delete-data-modal.js

@@ -0,0 +1,48 @@
+// 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 DatasetLabel from 'components/common/dataset-label';
+import {FormattedMessage} from 'localization';
+
+const StyledMsg = styled.div`
+  margin-top: 24px;
+`;
+
+export const DeleteDatasetModal = ({dataset, layers = []}) => {
+  // retrieve only layers related to the current dataset
+  const currDatasetLayers = layers.filter(layer => layer.config.dataId === (dataset && dataset.id));
+
+  return (
+    <div className="delete-dataset-modal">
+      <DatasetLabel dataset={dataset} />
+      <StyledMsg className="delete-dataset-msg">
+        <FormattedMessage
+          id={'modal.deleteData.warning'}
+          values={{length: currDatasetLayers.length}}
+        />
+      </StyledMsg>
+    </div>
+  );
+};
+
+const DeleteDatasetModalFactory = () => DeleteDatasetModal;
+export default DeleteDatasetModalFactory;

package/src/components/modals/error-display.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.
+
+import React from 'react';
+import ErrorBoundary from 'components/common/error-boundary';
+import NotificationItemFactory from 'components/notification-panel/notification-item';
+const NotificationItem = NotificationItemFactory();
+
+const ErrorDisplay = ({error}) => (
+  <ErrorBoundary>
+    <NotificationItem
+      notification={{
+        type: 'error',
+        message: error,
+        id: 'cloud-export-error'
+      }}
+      isExpanded
+    />
+  </ErrorBoundary>
+);
+
+export default ErrorDisplay;

package/src/components/modals/export-data-modal.js

@@ -0,0 +1,193 @@
+// 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 {EXPORT_DATA_TYPE_OPTIONS} from 'constants/default-settings';
+import {FileType} from 'components/common/icons';
+import {
+  StyledExportSection,
+  StyledFilteredOption,
+  StyledModalContent,
+  StyledType,
+  CheckMark
+} from 'components/common/styled-components';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+
+const propTypes = {
+  datasets: PropTypes.object.isRequired,
+  selectedDataset: PropTypes.string,
+  dataType: PropTypes.string.isRequired,
+  filtered: PropTypes.bool.isRequired,
+  // callbacks
+  applyCPUFilter: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onChangeExportSelectedDataset: PropTypes.func.isRequired,
+  onChangeExportDataType: PropTypes.func.isRequired,
+  onChangeExportFiltered: PropTypes.func.isRequired
+};
+
+const getDataRowCount = (datasets, selectedDataset, filtered, intl) => {
+  const selectedData = datasets[selectedDataset];
+  if (!selectedData) {
+    return intl.formatMessage(
+      {id: 'modal.exportData.fileCount'},
+      {fileCount: Object.keys(datasets).length}
+    );
+  }
+  const {dataContainer, filteredIdxCPU} = selectedData;
+
+  if (filtered && !filteredIdxCPU) {
+    return '-';
+  }
+
+  const rowCount = filtered ? filteredIdxCPU.length : dataContainer.numRows();
+
+  return intl.formatMessage(
+    {id: 'modal.exportData.rowCount'},
+    {rowCount: rowCount.toLocaleString()}
+  );
+};
+
+const ExportDataModalFactory = () => {
+  class ExportDataModal extends Component {
+    componentDidMount() {
+      const toCPUFilter = this.props.selectedDataset || Object.keys(this.props.datasets);
+      this.props.applyCPUFilter(toCPUFilter);
+    }
+
+    _onSelectDataset = ({target: {value}}) => {
+      this.props.applyCPUFilter(value);
+      this.props.onChangeExportSelectedDataset(value);
+    };
+
+    render() {
+      const {
+        supportedDataTypes,
+        datasets,
+        selectedDataset,
+        dataType,
+        filtered,
+        onChangeExportDataType,
+        onChangeExportFiltered,
+        intl
+      } = this.props;
+
+      return (
+        <StyledModalContent className="export-data-modal">
+          <div>
+            <StyledExportSection>
+              <div className="description">
+                <div className="title">
+                  <FormattedMessage id={'modal.exportData.datasetTitle'} />
+                </div>
+                <div className="subtitle">
+                  <FormattedMessage id={'modal.exportData.datasetSubtitle'} />
+                </div>
+              </div>
+              <div className="selection">
+                <select value={selectedDataset} onChange={this._onSelectDataset}>
+                  {[intl.formatMessage({id: 'modal.exportData.allDatasets'})]
+                    .concat(Object.keys(datasets))
+                    .map(d => (
+                      <option key={d} value={d}>
+                        {(datasets[d] && datasets[d].label) || d}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            </StyledExportSection>
+            <StyledExportSection>
+              <div className="description">
+                <div className="title">
+                  <FormattedMessage id={'modal.exportData.dataTypeTitle'} />
+                </div>
+                <div className="subtitle">
+                  <FormattedMessage id={'modal.exportData.dataTypeSubtitle'} />
+                </div>
+              </div>
+              <div className="selection">
+                {supportedDataTypes.map(op => (
+                  <StyledType
+                    key={op.id}
+                    selected={dataType === op.id}
+                    available={op.available}
+                    onClick={() => op.available && onChangeExportDataType(op.id)}
+                  >
+                    <FileType ext={op.label} height="80px" fontSize="11px" />
+                    {dataType === op.id && <CheckMark />}
+                  </StyledType>
+                ))}
+              </div>
+            </StyledExportSection>
+            <StyledExportSection>
+              <div className="description">
+                <div className="title">
+                  <FormattedMessage id={'modal.exportData.dataTypeTitle'} />
+                </div>
+                <div className="subtitle">
+                  <FormattedMessage id={'modal.exportData.filterDataSubtitle'} />
+                </div>
+              </div>
+              <div className="selection">
+                <StyledFilteredOption
+                  className="unfiltered-option"
+                  selected={!filtered}
+                  onClick={() => onChangeExportFiltered(false)}
+                >
+                  <div className="filter-option-title">
+                    <FormattedMessage id={'modal.exportData.unfilteredData'} />
+                  </div>
+                  <div className="filter-option-subtitle">
+                    {getDataRowCount(datasets, selectedDataset, false, intl)}
+                  </div>
+                  {!filtered && <CheckMark />}
+                </StyledFilteredOption>
+                <StyledFilteredOption
+                  className="filtered-option"
+                  selected={filtered}
+                  onClick={() => onChangeExportFiltered(true)}
+                >
+                  <div className="filter-option-title">
+                    <FormattedMessage id={'modal.exportData.filteredData'} />
+                  </div>
+                  <div className="filter-option-subtitle">
+                    {getDataRowCount(datasets, selectedDataset, true, intl)}
+                  </div>
+                  {filtered && <CheckMark />}
+                </StyledFilteredOption>
+              </div>
+            </StyledExportSection>
+          </div>
+        </StyledModalContent>
+      );
+    }
+  }
+  ExportDataModal.propTypes = propTypes;
+  ExportDataModal.defaultProps = {
+    supportedDataTypes: EXPORT_DATA_TYPE_OPTIONS
+  };
+
+  return injectIntl(ExportDataModal);
+};
+
+export default ExportDataModalFactory;

package/src/components/modals/export-image-modal.d.ts

@@ -0,0 +1,21 @@
+import {FunctionComponent} from 'react';
+import {SetExportImageSettingUpdaterAction} from '../../actions';
+import {ExportImage} from '../../reducers';
+import {IntlShape} from 'react-intl';
+
+export type ExportImageModalProps = {
+  exportImage: ExportImage;
+  mapW: number;
+  mapH: number;
+  onUpdateImageSetting: (payload: SetExportImageSettingUpdaterAction.payload) => void;
+  cleanupExportImage: () => void;
+};
+
+type IntlProps = {
+  intl: IntlShape;
+};
+
+export const ExportImageModal: FunctionComponent<ExportImageModalProps & IntlProps>;
+function ExportImageModalFactory(): FunctionComponent<ExportImageModalProps>;
+
+export default ExportImageModalFactory;

package/src/components/modals/export-image-modal.js

@@ -0,0 +1,144 @@
+// 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, {useEffect} from 'react';
+import styled from 'styled-components';
+import ImagePreview from 'components/common/image-preview';
+
+import {EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS} from 'constants/default-settings';
+
+import {StyledModalContent, SelectionButton, CheckMark} from 'components/common/styled-components';
+import Switch from 'components/common/switch';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+
+const ImageOptionList = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 250px;
+
+  .image-option-section {
+    .image-option-section-title {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+
+  .button-list {
+    display: flex;
+    flex-direction: row;
+    padding: 8px 0px;
+  }
+
+  input {
+    margin-right: 8px;
+  }
+`;
+
+const ExportImageModalFactory = () => {
+  /** @type {typeof import('./export-image-modal').ExportImageModal} */
+  const ExportImageModal = ({
+    mapW,
+    mapH,
+    exportImage,
+    onUpdateImageSetting,
+    cleanupExportImage,
+    intl
+  }) => {
+    const {legend, ratio, resolution} = exportImage;
+
+    useEffect(() => {
+      onUpdateImageSetting({
+        exporting: true
+      });
+      return cleanupExportImage;
+    }, [onUpdateImageSetting, cleanupExportImage]);
+
+    useEffect(() => {
+      if (mapH !== exportImage.mapH || mapW !== exportImage.mapW) {
+        onUpdateImageSetting({
+          mapH,
+          mapW
+        });
+      }
+    }, [mapH, mapW, exportImage, onUpdateImageSetting]);
+
+    return (
+      <StyledModalContent className="export-image-modal">
+        <ImageOptionList>
+          <div className="image-option-section">
+            <div className="image-option-section-title">
+              <FormattedMessage id={'modal.exportImage.ratioTitle'} />
+            </div>
+            <FormattedMessage id={'modal.exportImage.ratioDescription'} />
+            <div className="button-list" id="export-image-modal__option_ratio">
+              {EXPORT_IMG_RATIO_OPTIONS.filter(op => !op.hidden).map(op => (
+                <SelectionButton
+                  key={op.id}
+                  selected={ratio === op.id}
+                  onClick={() => onUpdateImageSetting({ratio: op.id})}
+                >
+                  <FormattedMessage id={op.label} />
+                  {ratio === op.id && <CheckMark />}
+                </SelectionButton>
+              ))}
+            </div>
+          </div>
+          <div className="image-option-section">
+            <div className="image-option-section-title">
+              <FormattedMessage id={'modal.exportImage.resolutionTitle'} />
+            </div>
+            <FormattedMessage id={'modal.exportImage.resolutionDescription'} />
+            <div className="button-list" id="export-image-modal__option_resolution">
+              {EXPORT_IMG_RESOLUTION_OPTIONS.map(op => (
+                <SelectionButton
+                  key={op.id}
+                  selected={resolution === op.id}
+                  onClick={() => op.available && onUpdateImageSetting({resolution: op.id})}
+                >
+                  {op.label}
+                  {resolution === op.id && <CheckMark />}
+                </SelectionButton>
+              ))}
+            </div>
+          </div>
+          <div className="image-option-section">
+            <div className="image-option-section-title">
+              <FormattedMessage id={'modal.exportImage.mapLegendTitle'} />
+            </div>
+            <Switch
+              type="checkbox"
+              id="add-map-legend"
+              checked={legend}
+              label={intl.formatMessage({id: 'modal.exportImage.mapLegendAdd'})}
+              onChange={() => onUpdateImageSetting({legend: !legend})}
+            />
+          </div>
+        </ImageOptionList>
+        <ImagePreview exportImage={exportImage} />
+      </StyledModalContent>
+    );
+  };
+
+  return injectIntl(ExportImageModal);
+};
+
+export default ExportImageModalFactory;

package/src/components/modals/export-map-modal/components.js

@@ -0,0 +1,42 @@
+// 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 {StyledExportSection} from 'components/common/styled-components';
+
+export const StyledExportMapSection = styled(StyledExportSection)`
+  margin-top: ${props => props.theme.exportIntraSectionMargin}px;
+`;
+
+export const StyledWarning = styled.span`
+  color: ${props => props.theme.errorColor};
+  font-weight: ${props => props.theme.selectFontWeightBold};
+`;
+
+export const StyledExportLink = styled.a`
+  text-decoration-line: underline !important;
+`;
+
+export const ExportMapLink = ({children, ...props}) => (
+  <StyledExportLink target="_blank" rel="noopener noreferrer" {...props}>
+    {children}
+  </StyledExportLink>
+);

package/src/components/modals/export-map-modal/export-html-map.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import {setUserMapboxAccessToken, setExportHTMLMapMode} from '../../actions';
+import {IntlShape} from 'react-intl';
+
+export type ExportHtmlMapProps = {
+  onChangeExportMapHTMLMode: typeof setExportHTMLMapMode;
+  onEditUserMapboxAccessToken: typeof setUserMapboxAccessToken;
+  options: {
+    userMapboxToken?: string;
+    mode?: string;
+  };
+};
+
+type IntlProps = {
+  intl: IntlShape;
+};
+
+export const ExportHtmlMap: React.FunctionComponent<ExportHtmlMapProps & IntlProps>;
+function ExportHtmlMapFactory(): React.FunctionComponent<ExportHtmlMapProps>;
+
+export default ExportHtmlMapFactory;

package/src/components/modals/export-map-modal/export-html-map.js

@@ -0,0 +1,145 @@
+// 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 {StyledExportSection, StyledType, CheckMark} from 'components/common/styled-components';
+import {StyledExportMapSection, StyledWarning, ExportMapLink} from './components';
+import {EXPORT_HTML_MAP_MODE_OPTIONS} from 'constants/default-settings';
+import {EXPORT_HTML_MAP_DOC, EXPORT_HTML_MAP_MODES_DOC} from 'constants/user-guides';
+import styled from 'styled-components';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+
+const ExportMapStyledExportSection = styled(StyledExportSection)`
+  .disclaimer {
+    font-size: ${props => props.theme.inputFontSize};
+    color: ${props => props.theme.inputColor};
+    margin-top: 12px;
+  }
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  padding: ${props => props.theme.inputPadding};
+  color: ${props => (props.error ? 'red' : props.theme.titleColorLT)};
+  height: ${props => props.theme.inputBoxHeight};
+  outline: 0;
+  font-size: ${props => props.theme.inputFontSize};
+
+  :active,
+  :focus,
+  &.focus,
+  &.active {
+    outline: 0;
+  }
+`;
+
+const BigStyledTile = styled(StyledType)`
+  height: unset;
+  width: unset;
+  img {
+    width: 180px;
+    height: 120px;
+  }
+`;
+
+function ExportHtmlMapFactory() {
+  /** @type {typeof import('./export-html-map').ExportHtmlMap} */
+  const ExportHtmlMap = ({
+    onChangeExportMapHTMLMode = mode => {},
+    onEditUserMapboxAccessToken = token => {},
+    options = {},
+    intl
+  }) => (
+    <div>
+      <StyledExportMapSection>
+        <div className="description" />
+        <div className="selection">
+          <FormattedMessage id={'modal.exportMap.html.selection'} />
+        </div>
+      </StyledExportMapSection>
+      <ExportMapStyledExportSection className="export-map-modal__html-options">
+        <div className="description">
+          <div className="title">
+            <FormattedMessage id={'modal.exportMap.html.tokenTitle'} />
+          </div>
+          <div className="subtitle">
+            <FormattedMessage id={'modal.exportMap.html.tokenSubtitle'} />
+          </div>
+        </div>
+        <div className="selection">
+          <StyledInput
+            onChange={e => onEditUserMapboxAccessToken(e.target.value)}
+            type="text"
+            placeholder={intl.formatMessage({id: 'modal.exportMap.html.tokenPlaceholder'})}
+            value={options ? options.userMapboxToken : ''}
+          />
+          <div className="disclaimer">
+            <StyledWarning>
+              <FormattedMessage id={'modal.exportMap.html.tokenMisuseWarning'} />
+            </StyledWarning>
+            <FormattedMessage id={'modal.exportMap.html.tokenDisclaimer'} />
+            <ExportMapLink href={EXPORT_HTML_MAP_DOC}>
+              <FormattedMessage id={'modal.exportMap.html.tokenUpdate'} />
+            </ExportMapLink>
+          </div>
+        </div>
+      </ExportMapStyledExportSection>
+      <ExportMapStyledExportSection>
+        <div className="description">
+          <div className="title">
+            <FormattedMessage id={'modal.exportMap.html.modeTitle'} />
+          </div>
+          <div className="subtitle">
+            <FormattedMessage id={'modal.exportMap.html.modeSubtitle1'} />
+            <a href={EXPORT_HTML_MAP_MODES_DOC}>
+              <FormattedMessage id={'modal.exportMap.html.modeSubtitle2'} />
+            </a>
+          </div>
+        </div>
+        <div className="selection">
+          {EXPORT_HTML_MAP_MODE_OPTIONS.map(mode => (
+            <BigStyledTile
+              key={mode.id}
+              selected={options.mode === mode.id}
+              available={mode.available}
+              onClick={() => mode.available && onChangeExportMapHTMLMode(mode.id)}
+            >
+              <img src={mode.url} alt="" />
+              <p>
+                <FormattedMessage
+                  id={'modal.exportMap.html.modeDescription'}
+                  values={{mode: intl.formatMessage({id: mode.label})}}
+                />
+              </p>
+              {options.mode === mode.id && <CheckMark />}
+            </BigStyledTile>
+          ))}
+        </div>
+      </ExportMapStyledExportSection>
+    </div>
+  );
+
+  ExportHtmlMap.displayName = 'ExportHtmlMap';
+
+  return injectIntl(ExportHtmlMap);
+}
+
+export default ExportHtmlMapFactory;