[Bug] Fix custom map style input (#2564)

* Fix for custom basemap styles not loading Signed-off-by: Adam Krebs <amk528@cs.nyu.edu> * Make custom style icon use NO_BASEMAP_ICON Signed-off-by: Adam Krebs <amk528@cs.nyu.edu> --------- Signed-off-by: Adam Krebs <amk528@cs.nyu.edu>
keplergl · Jul 15, 2024 · 9341911 · 9341911
1 parent 8918027
commit 9341911
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 21 deletions.
diff --git a/src/components/src/modal-container.tsx b/src/components/src/modal-container.tsx
@@ -434,7 +434,7 @@ export default function ModalContainerFactory(
               onConfirm: this._onAddCustomMapStyle,
               confirmButton: {
                 large: true,
-                disabled: !mapStyle.inputStyle.style,
+                disabled: !mapStyle.inputStyle.url,
                 children: 'modal.button.addStyle'
               }
             };

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})}
+                  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
@@ -11,9 +11,6 @@ import {
 } from '@kepler.gl/constants';
 import {BaseMapStyle, LayerGroup, MapState} from '@kepler.gl/types';
 
-const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;
-const httpRg = /^(?=(http:|https:))/;
-
 export function getDefaultLayerGroupVisibility({layerGroups = []}: {layerGroups: LayerGroup[]}) {
   return layerGroups.reduce(
     (accu, layer) => ({
@@ -102,13 +99,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;

diff --git a/test/node/reducers/map-style-test.js b/test/node/reducers/map-style-test.js
@@ -836,7 +836,7 @@ test('#mapStyleReducer -> EDIT_CUSTOM_MAP_STYLE', t => {
 
   t.deepEqual(
     nextState.inputStyle,
-    {...inputMapStyleToEdit, error: false, isValid: true, style: null, uploadedFile: null},
+    {...inputMapStyleToEdit, error: false, isValid: false, style: null, uploadedFile: null},
     'should set the inputStyle'
   );