How do I use different themes for open street maps in open layers?

Question

I have a map application with custom interactive layers, but I want to use the dark theme from this . I'm using playing around on jsfiddle and I just can't seen to get the dark theme to work. I tried this:

      new TileLayer({
        source: new TileJSON({
          url: 'https://raw.githubusercontent.com/openmaptiles/dark-matter-gl-style/master/style.json'
        })
      })

I'm using classic apache and php. I have no clue about npm and webpack.

Answer 1

The style.json is only a Mapbox Style Specification, not the Data as TileJSON itself.

You can use Mapbox Style Specifications for Vector Tile Layers like the OSM by using ol-mapbox-style . There is also some information about this issue on openmaptiles, where you found the theme.

Answer 2

We are the authors of OpenMapTiles project and the repos you are linking.

If you need to use the dark-matter-gl style - the easiest is to go to https://cloud.maptiler.com/maps/darkmatter/ , create a free account and copy&paste the sample viewer provided on this website.

This gives you free hosting and the style into your webpage - with a viewer of your choice, including OpenLayers.