diff --git a/src/components/src/index.ts b/src/components/src/index.ts index 817fc4b50d..3047860a35 100644 --- a/src/components/src/index.ts +++ b/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'; diff --git a/src/components/src/side-panel/layer-panel/layer-type-list-item.tsx b/src/components/src/side-panel/layer-panel/layer-type-list-item.tsx index 24eb9e46d9..1da0594db6 100644 --- a/src/components/src/side-panel/layer-panel/layer-type-list-item.tsx +++ b/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>; label: string; }; - isTile: boolean; + isTile?: boolean; + className?: string; }; type WithThemeProps = LayerTypeListItemProps & {theme: Record}; @@ -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; diff --git a/src/constants/src/default-settings.ts b/src/constants/src/default-settings.ts index 3857265b07..d660443814 100644 --- a/src/constants/src/default-settings.ts +++ b/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,7 +305,7 @@ 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 }, @@ -313,7 +313,7 @@ export const DEFAULT_MAP_STYLES = [ 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 }, @@ -321,7 +321,7 @@ export const DEFAULT_MAP_STYLES = [ 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 }, @@ -329,7 +329,7 @@ export const DEFAULT_MAP_STYLES = [ 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 }, @@ -337,7 +337,7 @@ export const DEFAULT_MAP_STYLES = [ 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 } diff --git a/src/layers/src/icon-layer/icon-layer.ts b/src/layers/src/icon-layer/icon-layer.ts index 3815a598e7..f34ea4c7ce 100644 --- a/src/layers/src/icon-layer/icon-layer.ts +++ b/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;