diff --git a/src/components/src/modals/add-map-style-modal.tsx b/src/components/src/modals/add-map-style-modal.tsx index 16a46c8e1e..bc3e9123e1 100644 --- a/src/components/src/modals/add-map-style-modal.tsx +++ b/src/components/src/modals/add-map-style-modal.tsx @@ -19,6 +19,7 @@ import {media} from '@kepler.gl/styles'; import {transformRequest} from '@kepler.gl/utils'; import {injectIntl, IntlShape} from 'react-intl'; import {FormattedMessage} from '@kepler.gl/localization'; +import {NO_BASEMAP_ICON} from '@kepler.gl/constants'; import maplibregl from 'maplibre-gl'; import {InputStyle, MapState} from '@kepler.gl/types'; @@ -194,7 +195,9 @@ function AddMapStyleModalFactory() { this.props.inputMapStyle({url: value, id: 'Custom Style' })} + onChange={({target: {value}}) => + this.props.inputMapStyle({url: value, id: 'Custom Style', icon: NO_BASEMAP_ICON}) + } placeholder="e.g. https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" /> diff --git a/src/reducers/src/map-style-updaters.ts b/src/reducers/src/map-style-updaters.ts index e2c2e1c1da..20a3237fb3 100644 --- a/src/reducers/src/map-style-updaters.ts +++ b/src/reducers/src/map-style-updaters.ts @@ -8,7 +8,6 @@ import Console from 'global/console'; // Utils import { getDefaultLayerGroupVisibility, - isValidStyleUrl, getStyleDownloadUrl, mergeLayerGroupVisibility, editTopMapStyle, @@ -601,9 +600,7 @@ function getLoadMapStyleTasks(mapStyles, mapboxApiAccessToken, mapboxApiUrl, onS // @ts-expect-error .map(({id, url, accessToken}) => ({ id, - url: isValidStyleUrl(url) - ? getStyleDownloadUrl(url, accessToken || mapboxApiAccessToken, mapboxApiUrl) - : url + url: getStyleDownloadUrl(url, accessToken || mapboxApiAccessToken, mapboxApiUrl) })) .map(LOAD_MAP_STYLE_TASK) ).bimap( @@ -698,12 +695,12 @@ export const inputMapStyleUpdater = ( // differentiate between either a url to hosted style json that needs an icon url, // or an icon already available client-side as a data uri - const isValidUrl = isValidStyleUrl(updated.url); const isUpdatedIconDataUri = updated.icon?.startsWith('data:image'); - const isValid = isValidUrl || Boolean(updated.uploadedFile); + const isValid = Boolean(updated.uploadedFile); + const isMapboxStyleUrl = updated.url?.startsWith('mapbox://') || updated.url?.includes('mapbox.com'); const icon = - isValidUrl && !isUpdatedIconDataUri + !isUpdatedIconDataUri && isMapboxStyleUrl ? getStyleImageIcon({ mapState, styleUrl: updated.url || '', diff --git a/src/utils/src/index.ts b/src/utils/src/index.ts index cdcb010e9e..349f658127 100644 --- a/src/utils/src/index.ts +++ b/src/utils/src/index.ts @@ -70,7 +70,6 @@ export { getDefaultLayerGroupVisibility, editTopMapStyle, editBottomMapStyle, - isValidStyleUrl, getStyleDownloadUrl, getStyleImageIcon, scaleMapStyleByResolution, diff --git a/src/utils/src/map-style-utils/mapbox-gl-style-editor.ts b/src/utils/src/map-style-utils/mapbox-gl-style-editor.ts index dc37eb36ec..53183583fc 100644 --- a/src/utils/src/map-style-utils/mapbox-gl-style-editor.ts +++ b/src/utils/src/map-style-utils/mapbox-gl-style-editor.ts @@ -102,13 +102,6 @@ export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) = }; }, resolver); -// valid style url -// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4 -// lowercase letters, numbers and dashes only. -export function isValidStyleUrl(url) { - return typeof url === 'string' && Boolean(url.match(mapUrlRg) || url.match(httpRg)); -} - export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) { if (styleUrl.startsWith('http')) { return styleUrl;