[Chore] use unfolded cdn for base map, layer type select and icon lay…

…er svg (#2233)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Shan He <heshan0131@gmail.com>

src/components/src/index.ts

@@ -265,7 +265,7 @@ export type {SourceDataCatalogProps} from './side-panel/common/source-data-catal
 export type {DatasetInfoProps} from './side-panel/common/dataset-info';
 export type {DatasetTagProps} from './side-panel/common/dataset-tag';
 export type {CustomPanelsProps} from './side-panel/custom-panel';
-export type {LayerTypeListItemType} from './side-panel/layer-panel/layer-type-list-item';
+export type {LayerTypeListItemProps, LayerTypeListItemType} from './side-panel/layer-panel/layer-type-list-item';
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
 export type {MapLegendPanelProps, MapLegendPanelFactoryDeps} from './map/map-legend-panel';
 export type {FormatterDropdownProps} from './common/data-table/option-dropdown';

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

@@ -20,17 +20,18 @@
 
 import React, {ComponentType} from 'react';
 import styled, {withTheme} from 'styled-components';
-import {CLOUDFRONT} from '@kepler.gl/constants';
+import {KEPLER_UNFOLDED_BUCKET} from '@kepler.gl/constants';
 import classNames from 'classnames';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {BaseProps} from '../../common/icons';
 
-type LayerTypeListItemProps = {
+export type LayerTypeListItemProps = {
   value: {
     icon: ComponentType<Partial<BaseProps>>;
     label: string;
   };
-  isTile: boolean;
+  isTile?: boolean;
+  className?: string;
 };
 
 type WithThemeProps = LayerTypeListItemProps & {theme: Record<string, string>};
@@ -55,7 +56,7 @@ const StyledListItem = styled.div`
   .layer-type-selector__item__icon {
     color: ${props => props.theme.labelColor};
     display: flex;
-    background-image: url(${`${CLOUDFRONT}/kepler.gl-layer-icon-bg.png`});
+    background-image: url(${`${KEPLER_UNFOLDED_BUCKET}/images/kepler.gl-layer-icon-bg.png`});
     background-size: ${props => props.theme.layerTypeIconSizeL}px
       ${props => props.theme.layerTypeIconSizeL}px;
     height: ${props => props.theme.layerTypeIconSizeL}px;

src/constants/src/default-settings.ts

@@ -33,8 +33,8 @@ import {TOOLTIP_FORMAT_TYPES} from './tooltip';
 import {RGBAColor} from '@kepler.gl/types';
 
 export const ACTION_PREFIX = '@@kepler.gl/';
-export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl';
-export const ICON_PREFIX = `${CLOUDFRONT}/geodude`;
+export const KEPLER_UNFOLDED_BUCKET = 'https://cdn.unfolded.ai/statics/keplergl';
+export const BASEMAP_ICON_PREFIX = `${KEPLER_UNFOLDED_BUCKET}/geodude`;
 export const DEFAULT_MAPBOX_API_URL = 'https://api.mapbox.com';
 export const TRANSITION_DURATION = 0;
 
@@ -296,7 +296,7 @@ export const DEFAULT_MAP_STYLES = [
     id: NO_MAP_ID,
     label: 'No Basemap',
     url: null,
-    icon: 'https://storage.googleapis.com/unfolded_public/statics/keplergl/geodude/NO_BASEMAP.png',
+    icon: `${BASEMAP_ICON_PREFIX}/NO_BASEMAP.png`,
     layerGroups: [BACKGROUND_LAYER_GROUP],
     colorMode: BASE_MAP_COLOR_MODES.NONE,
     style: EMPTY_MAPBOX_STYLE
@@ -305,39 +305,39 @@ export const DEFAULT_MAP_STYLES = [
     id: 'dark',
     label: 'Dark',
     url: 'mapbox://styles/uberdata/cjoqbbf6l9k302sl96tyvka09',
-    icon: `${ICON_PREFIX}/UBER_DARK_V2.png`,
+    icon: `${BASEMAP_ICON_PREFIX}/UBER_DARK_V2.png`,
     layerGroups: DEFAULT_LAYER_GROUPS,
     colorMode: BASE_MAP_COLOR_MODES.DARK
   },
   {
     id: 'light',
     label: 'Light',
     url: 'mapbox://styles/uberdata/cjoqb9j339k1f2sl9t5ic5bn4',
-    icon: `${ICON_PREFIX}/UBER_LIGHT_V2.png`,
+    icon: `${BASEMAP_ICON_PREFIX}/UBER_LIGHT_V2.png`,
     layerGroups: DEFAULT_LAYER_GROUPS,
     colorMode: BASE_MAP_COLOR_MODES.LIGHT
   },
   {
     id: 'muted',
     label: 'Muted Light',
     url: 'mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4',
-    icon: `${ICON_PREFIX}/UBER_MUTED_LIGHT.png`,
+    icon: `${BASEMAP_ICON_PREFIX}/UBER_MUTED_LIGHT.png`,
     layerGroups: DEFAULT_LAYER_GROUPS,
     colorMode: BASE_MAP_COLOR_MODES.LIGHT
   },
   {
     id: 'muted_night',
     label: 'Muted Night',
     url: 'mapbox://styles/uberdata/cjfxhlikmaj1b2soyzevnywgs',
-    icon: `${ICON_PREFIX}/UBER_MUTED_NIGHT.png`,
+    icon: `${BASEMAP_ICON_PREFIX}/UBER_MUTED_NIGHT.png`,
     layerGroups: DEFAULT_LAYER_GROUPS,
     colorMode: BASE_MAP_COLOR_MODES.DARK
   },
   {
     id: 'satellite',
     label: 'Satellite',
     url: `mapbox://styles/mapbox/satellite-v9`,
-    icon: `${ICON_PREFIX}/UBER_SATELLITE.png`,
+    icon: `${BASEMAP_ICON_PREFIX}/UBER_SATELLITE.png`,
     layerGroups: [],
     colorMode: BASE_MAP_COLOR_MODES.NONE
   }

src/layers/src/icon-layer/icon-layer.ts

@@ -24,7 +24,7 @@ import GL from '@luma.gl/constants';
 
 import {SvgIconLayer} from '@kepler.gl/deckgl-layers';
 import IconLayerIcon from './icon-layer-icon';
-import {ICON_FIELDS, CLOUDFRONT, ColorRange} from '@kepler.gl/constants';
+import {ICON_FIELDS, KEPLER_UNFOLDED_BUCKET, ColorRange} from '@kepler.gl/constants';
 import IconInfoModalFactory from './icon-info-modal';
 import Layer, {LayerBaseConfig, LayerBaseConfigPartial, LayerColumn} from '../base-layer';
 import {assignPointPairToLayerColumn} from '../layer-utils';
@@ -73,7 +73,7 @@ export type IconLayerData = {index: number; icon: string};
 
 const brushingExtension = new BrushingExtension();
 
-export const SVG_ICON_URL = `${CLOUDFRONT}/icons/svg-icons.json`;
+export const SVG_ICON_URL = `${KEPLER_UNFOLDED_BUCKET}/icons/svg-icons.json`;
 
 export const iconPosAccessor = ({lat, lng, altitude}: IconLayerColumnsConfig) => (
   dc: DataContainerInterface
@@ -142,6 +142,10 @@ export default class IconLayer extends Layer {
     this.getSvgIcons();
   }
 
+  get svgIconUrl() {
+    return SVG_ICON_URL;
+  }
+
   get type(): 'icon' {
     return 'icon';
   }
@@ -199,7 +203,7 @@ export default class IconLayer extends Layer {
 
     if (window.fetch) {
       window
-        .fetch(SVG_ICON_URL, fetchConfig)
+        .fetch(this.svgIconUrl, fetchConfig)
         .then(response => response.json())
         .then((parsed: {svgIcons?: any[]} = {}) => {
           const {svgIcons = []} = parsed;