[fix] map style selector: provide backup UI content (#2277)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Jacob Wasilkowski <4933392+jwasilgeo@users.noreply.github.com>
keplergl · Jun 21, 2023 · e09ed28 · e09ed28
1 parent 963df0c
commit e09ed28
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 37 deletions.
diff --git a/src/components/src/side-panel/map-style-panel/map-style-selector.tsx b/src/components/src/side-panel/map-style-panel/map-style-selector.tsx
@@ -21,18 +21,20 @@
 import React, {ComponentType} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
+
+import {FormattedMessage} from '@kepler.gl/localization';
+import {MapStyle} from '@kepler.gl/reducers';
+import {NO_BASEMAP_ICON} from '@kepler.gl/constants';
+
 import {ArrowDown} from '../../common/icons';
 import PanelHeaderActionFactory from '../panel-header-action';
-
 import {
   PanelHeaderContent,
   PanelHeaderTitle,
   PanelLabel,
   StyledPanelHeader,
   StyledPanelHeaderProps
 } from '../../common/styled-components';
-import {FormattedMessage} from '@kepler.gl/localization';
-import {MapStyle} from '@kepler.gl/reducers';
 import {BaseProps} from '../../common/icons';
 
 type StyledMapDropdownProps = StyledPanelHeaderProps & {hasCallout: boolean};
@@ -89,45 +91,51 @@ function MapStyleSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeade
   const defaultActionIcons = {
     arrowDown: ArrowDown
   };
+
   const MapStyleSelector = ({
     mapStyle,
     onChange,
     toggleActive,
     isSelecting,
     actionIcons = defaultActionIcons
-  }: MapStyleSelectorProps) => (
-    <div>
-      <PanelLabel>
-        <FormattedMessage id={'mapManager.mapStyle'} />
-      </PanelLabel>
-      {Object.keys(mapStyle.mapStyles).map(op => (
-        <StyledMapDropdown
-          className={classnames('map-dropdown-option', {
-            collapsed: !isSelecting && mapStyle.styleType !== op
-          })}
-          key={op}
-          onClick={isSelecting ? () => onChange(op) : toggleActive}
-          hasCallout={Boolean(mapStyle.mapStyles[op].custom)}
-        >
-          <PanelHeaderContent className="map-title-block">
-            <img className="map-preview" src={mapStyle.mapStyles[op].icon} />
-            <PanelHeaderTitle className="map-preview-name">
-              {mapStyle.mapStyles[op].label}
-            </PanelHeaderTitle>
-          </PanelHeaderContent>
-          {!isSelecting ? (
-            <PanelHeaderAction
-              className="map-dropdown-option__enable-config"
-              id="map-enable-config"
-              IconComponent={actionIcons.arrowDown}
-              tooltip={'tooltip.selectBaseMapStyle'}
-              onClick={toggleActive}
-            />
-          ) : null}
-        </StyledMapDropdown>
-      ))}
-    </div>
-  );
+  }: MapStyleSelectorProps) => {
+    const {mapStyles, styleType} = mapStyle;
+
+    return (
+      <div>
+        <PanelLabel>
+          <FormattedMessage id={'mapManager.mapStyle'} />
+        </PanelLabel>
+
+        {Object.values(mapStyles).map(
+          ({id, custom, icon = NO_BASEMAP_ICON, label = 'Untitled'}) => (
+            <StyledMapDropdown
+              className={classnames('map-dropdown-option', {
+                collapsed: !isSelecting && styleType !== id
+              })}
+              key={id}
+              onClick={isSelecting ? () => onChange(id) : toggleActive}
+              hasCallout={Boolean(custom)}
+            >
+              <PanelHeaderContent className="map-title-block">
+                <img className="map-preview" src={icon} />
+                <PanelHeaderTitle className="map-preview-name">{label}</PanelHeaderTitle>
+              </PanelHeaderContent>
+              {!isSelecting ? (
+                <PanelHeaderAction
+                  className="map-dropdown-option__enable-config"
+                  id="map-enable-config"
+                  IconComponent={actionIcons.arrowDown}
+                  tooltip={'tooltip.selectBaseMapStyle'}
+                  onClick={toggleActive}
+                />
+              ) : null}
+            </StyledMapDropdown>
+          )
+        )}
+      </div>
+    );
+  };
 
   return MapStyleSelector;
 }

diff --git a/src/constants/src/default-settings.ts b/src/constants/src/default-settings.ts
@@ -291,12 +291,14 @@ export const EMPTY_MAPBOX_STYLE = {
   layers: []
 };
 
+export const NO_BASEMAP_ICON = `${BASEMAP_ICON_PREFIX}/NO_BASEMAP.png`;
+
 export const DEFAULT_MAP_STYLES = [
   {
     id: NO_MAP_ID,
     label: 'No Basemap',
     url: null,
-    icon: `${BASEMAP_ICON_PREFIX}/NO_BASEMAP.png`,
+    icon: NO_BASEMAP_ICON,
     layerGroups: [BACKGROUND_LAYER_GROUP],
     colorMode: BASE_MAP_COLOR_MODES.NONE,
     style: EMPTY_MAPBOX_STYLE