Kepler.gl: Having Custom Default Style on Startup

[xJWzZ]

I'm using Kepler GL with a custom Map Style often and am frustrated to always use the GUI to upload the link every time I start the application.

I'm wondering if there is a way to load a custom style on startup similar to \

I've tried altering DEFAULT_MAP_STYLES in kepler.gl/src/constants/default-settings.js but it doesn't seem to work.

I don't post here often so apologies if I have left out helpful information.

[heshan0131]

Yes you can pass in mapStyles to KeplerGl component the map styles should be an array of object with these keys:

{
    id: 'muted_night',
    label: 'Muted Night',
    url: 'mapbox://styles/xxxx/yyyy',
    icon:  '<url to image>'
}

[xJWzZ]

That worked except I had to change the url key with a style key as I wasn't using the standard mapbox urls.

const CUSTOM_STYLE = {
customStyle:
{
"id": "customStyle",
"label": "TileServerStyle",
"style": "http://tileserver.org/xxxx/yyyy/style.json",
"icon": ""
}
}

and then getting it to display using:

this.props.dispatch(loadMapStyles(CUSTOM_STYLE))

Thanks!

[heshan0131]

this PR might be of interests to you
https://github.com/uber/kepler.gl/pull/472

[macrigiuseppe]

completed

[daaain]

The code snippets above didn't work for me and the PR was a bit too big to easily read, so after taking a while to figure this out with trial and error I thought I should share a current working method here:

this.props.dispatch(inputMapStyle({
  id: "customStyle",
  label: "Custom style",
  url: "mapbox://styles/xxxx/yyyy",
  icon: ""
}))

this.props.dispatch(addCustomMapStyle())