[Bug] Raster style.json doesn't load

[exrhizo]

Describe the bug My style json from mapbox docs doesn't load into the demo.

based my json on mapbox example

To Reproduce Steps to reproduce the behavior:

1. Go to https://kepler.gl/demo
2. Click to add a map style
3. Add https://gist.githubusercontent.com/exrhizo/0c6250cb76ae92558a8a37f8caad9c2a/raw/4733d20447b4d8acec8a125bcd6c9022681a75e8/osm-raster-style.json
4. Name it
5. A preview tile shows up but "Add Style" is greyed out

Expected behavior I can use a raster tile

Screenshots

Desktop (please complete the following information):

• OS: Mac Senoma
• Browser Chrome 124.0.6367.118 (Official Build) (arm64)
• Version 3.0.0

[shge]

I found a way to add style (looks weird though):

1. Enter mapbox://styles/mapbox/streets-v12
2. Change something in URL
3. Enter https://gist.githubusercontent.com/exrhizo/0c6250cb76ae92558a8a37f8caad9c2a/raw/4733d20447b4d8acec8a125bcd6c9022681a75e8/osm-raster-style.json

https://github.com/keplergl/kepler.gl/assets/25113178/6227ced3-35fd-4cc8-9a85-deaba1fedf1f

[exrhizo]

🤯

I was able to get this to work programmatically:

export const BACKGROUND_LAYER_GROUP_SLUG = "Background";
export const BACKGROUND_LAYER_GROUP: DEFAULT_LAYER_GROUP = {
  slug: BACKGROUND_LAYER_GROUP_SLUG,
  filter: () => false,
  defaultVisibility: false,
  isVisibilityToggleAvailable: false,
  isMoveToTopAvailable: false,
  isColorPickerAvailable: true,
};

export function getOpenStreetMapStyles(): KeplerStyles {
  const osmStyleJsonUrl = `${window.location.origin}/app/static/kepler/osm-raster-style.json`;
  const style: KeplerStyles = {
    osm_public: {
      id: "osm_public",
      label: "Open Street Map",
      url: "",
      icon: "https://a.tile.openstreetmap.org/0/0/0.png",
      layerGroups: [BACKGROUND_LAYER_GROUP],
      colorMode: "LIGHT",
      style: {
        version: 8,
        name: "Open Street Map",
        sources: {
          openmaptiles: {
            type: "raster",
            tiles: [
              "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
              "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
              "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
            ],
            tileSize: 256,
            attribution:
              '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          },
        },
        layers: [
          {
            id: "simple-tiles",
            type: "raster",
            source: "openmaptiles",
            minzoom: 0,
            maxzoom: 19,
          },
        ],
      },
    },
  };

  console.log("Kepler.App Using Open Street Map", { osmStyleJsonUrl, style });
  return style;
}

mapStyles = getOpenStreetMapStyles();
keplerGlReducer.initialState({
    mapStyle: {
      mapStyles,
      styleType,
}, ... })