Accept custom styles for ol-kit components about ol-kit HOT 7 CLOSED

Thinking about using MUI themes, which would be added to the provider context.

<Map
  map={this.myMap}
  theme={createMuiTheme({
    palette: {
      primary: '#0000FF',
    },
  })}
/>

If you wanted a component to have a different theme, this would be simple:

<Map
  theme={createMuiTheme({
    palette: {
      primary: '#0000FF'
    },
  })}
>
  <Child
    theme={createMuiTheme({
      palette: {
        primary: '#00FF00'
      }
    })}
  />
</Map>

The context that we already use would make this pretty simple.

I'm open to other ideas. Thoughts?

from ol-kit.

<Map onMapInit={this.onMapInit} fullScreen
  theme={
    createMuiTheme({
      palette: {
        type: 'dark'
      }
    })
  }
>

Still a WIP, but going smoother than I was thinking it would.

from ol-kit.

This is dark mode for the controls and Layer panel. I changed the color, because the secondary color for material-ui is obnoxious.

<Map onMapInit={this.onMapInit} fullScreen
  theme={
    createMuiTheme({
      palette: {
        type: 'dark',
        secondary: {
          main: '#90caf9'
        }
      }
    })
  }
>

And then, with a one string change, let there be light:

<Map onMapInit={this.onMapInit} fullScreen
  theme={
    createMuiTheme({
      palette: {
        type: 'light',
        secondary: {
          main: '#90caf9'
        }
      }
    })
  }
>

from ol-kit.

Popup's done.

from ol-kit.

Think I'm going to get TimeSlider for free, as it's pretty much material anyway.

from ol-kit.

#206 (comment) Good idea.

from ol-kit.

We are deprecating ol-kit.
You may consider these alternatives:

• Use openlayers directly as recent versions of openlayers provides quite a bit of functionality out of box.
• Additionally , you can take a look at these openlayers libraries.

from ol-kit.