Make custom style icon use NO_BASEMAP_ICON

keplergl · May 2, 2024 · 7f0fc46 · 7f0fc46
1 parent 58a3f54
commit 7f0fc46
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 16 deletions.
diff --git 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() {
                 <InputLight
                   type="text"
                   value={inputStyle.url || ''}
-                  onChange={({target: {value}}) => 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"
                 />
               </StyledModalSection>

diff --git 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
@@ -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
@@ -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;