[Enhancement] use mapbox style url for default (published) uber map s…

…tyles (keplergl#292)

* use mapbox style url for default (published) uber map styles

src/components/kepler-gl.js

@@ -23,7 +23,8 @@ import {console as Console} from 'global/window';
 import {bindActionCreators} from 'redux';
 import {json as requestJson} from 'd3-request';
 import styled, {ThemeProvider}  from 'styled-components';
-import {connect as keplerGlConnect} from '../connect/keplergl-connect';
+import {connect as keplerGlConnect} from 'connect/keplergl-connect';
+import {isValidStyleUrl, getStyleDownloadUrl} from 'utils/map-style-utils/mapbox-gl-style-editor';
 
 import * as VisStateActions from 'actions/vis-state-actions';
 import * as MapStateActions from 'actions/map-state-actions';
@@ -148,9 +149,12 @@ function KeplerGlFactory(
 
     _requestMapStyle = (mapStyle) => {
       const {url, id} = mapStyle;
-      requestJson(url, (error, result) => {
+      const downloadUrl = isValidStyleUrl(url) ?
+        getStyleDownloadUrl(url, this.props.mapboxApiAccessToken) : url;
+
+      requestJson(downloadUrl, (error, result) => {
         if (error) {
-          Console.warn(`Error loading map style ${mapStyle.url}`);
+          Console.warn(`Error loading map style ${url}`);
         } else {
           this.props.mapStyleActions.loadMapStyles({
             [id]: {...mapStyle, style: result}

src/constants/default-settings.js

@@ -22,7 +22,6 @@ import keyMirror from 'keymirror';
 
 export const ACTION_PREFIX = '@@kepler.gl/';
 export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl';
-export const STYLE_PREFIX = `${CLOUDFRONT}/map-styles`;
 export const ICON_PREFIX = `${CLOUDFRONT}/geodude`;
 
 // Modal Ids
@@ -128,28 +127,28 @@ export const DEFAULT_MAP_STYLES = [
   {
     id: 'dark',
     label: 'Dark',
-    url: `${STYLE_PREFIX}/dark`,
+    url: 'mapbox://styles/uberdata/cjoqbbf6l9k302sl96tyvka09',
     icon: `${ICON_PREFIX}/UBER_DARK_V2.png`,
     layerGroups: DEFAULT_LAYER_GROUPS
   },
   {
     id: 'light',
     label: 'Light',
-    url: `${STYLE_PREFIX}/light`,
+    url: 'mapbox://styles/uberdata/cjoqb9j339k1f2sl9t5ic5bn4',
     icon: `${ICON_PREFIX}/UBER_LIGHT_V2.png`,
     layerGroups: DEFAULT_LAYER_GROUPS
   },
   {
     id: 'muted',
     label: 'Muted Light',
-    url: `${STYLE_PREFIX}/muted-light`,
+    url: 'mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4',
     icon: `${ICON_PREFIX}/UBER_MUTED_LIGHT.png`,
     layerGroups: DEFAULT_LAYER_GROUPS
   },
   {
     id: 'muted_night',
     label: 'Muted Night',
-    url: `${STYLE_PREFIX}/muted-night`,
+    url: 'mapbox://styles/uberdata/cjfxhlikmaj1b2soyzevnywgs',
     icon: `${ICON_PREFIX}/UBER_MUTED_NIGHT.png`,
     layerGroups: DEFAULT_LAYER_GROUPS
   }