How do I make Kepler GL use a local MBTiles Server for base maps instead of online maps?

Question

I have an MBTile Server running on my local machine as a service for an offline web app. We use this to serve base maps in an offline environment. I'm exploring broadening the scope of the web app to include Kepler GL functionality.

What file(s) and code need to be changed or added to direct Kepler GL to use my tiles server on localhost:3000?

Thanks

Tried replacing the token key for mapbox and the map URL.

defaults-settings.js

... export const MAP_URI = 'demo/map?mapUrl='; ...

webpack.config.js

... // Optional: Enables reading mapbox and dropbox client token from environment variable plugins: [ //new webpack.EnvironmentPlugin(['MapboxAccessToken', 'DropboxClientId']) new webpack.EnvironmentPlugin({'MapboxAccessToken': 'pk.XXX', 'DropboxClientId': null}) ] }; ...

Replacing the MAP_URI with the path to the tiles server (http://localhost:3000) will still pass the compiler and kepler will run, but absent any maps.

score 1 · Answer 1 · answered Sep 24 '19 at 15:14

You need to load your style via url or static object which contains your sources pointing to your local tile server. Then call loadCustomMapStyle to load it, and addCustomMapStyle to use it immediately.

const wrapIt = wrapTo("map");
dispatch(
  wrapIt(
    loadCustomMapStyle({
      style: styleObject
    })
  )
);
dispatch(wrapIt(addCustomMapStyle()));

How do I make Kepler GL use a local MBTiles Server for base maps instead of online maps?

1 Answers1