2

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.

Jamestrod
  • 219
  • 2
  • 11

1 Answers1

0

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.

FatAl
  • 859
  • 1
  • 6
  • 20
  • 1
    As you stated, OpenLayers does not support Mapbox style directly but using `ol-mapbox-style` https://github.com/boundlessgeo/ol-mapbox-style (a plugin), it does by converting these styles to OpenLayers styling syntax – Thomas Gratier Aug 05 '18 at 21:20
  • 1
    It shoud be explained how to migrate the styles. Answer "use a plugin" is not ab answer. The plugin needs some online resources so in you prapare a map for localhost or intranet purposes it won't be a solution. – Marek Marczak Jul 30 '20 at 07:08