How to apply a custom local/offline map style to an OpenLayers Map

Question

I have a local webpage as part of a larger desktop application. I want to change the default style of the Open Layer map to "Klokantech Basic". I've downloaded a copy of the style JSON but struggeerling to apply it to the map. Currently my code looks like:

var map = new ol.Map({
        layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
        target: 'map',
        style: './mapStyle.json',
        view: new ol.View({
            center: ol.proj.fromLonLat([-0.146953, 51.493758]),
            zoom: 15
        })

But setting a style isn't working, I've looked online and there appears to be Map Box, this however uses an API key, something which I don't want to use/ maintain.

The whole page and its resources are stored locally, is there any way of referencing the local style file without an API?

Here is my current code.

Answer 1

The mapbox style is for vector tile source and I pretend you use it for your vector layer.

Openlayers don't seem to support the Mapbox style for MVT. It use a style function to apply to the vector tile.You can see here a exemple of how Openlayers make style function for vector tiles.