Applying JSON style from URL to Vector in OpenLayers

Question

Can the style be a URL in OpenLayers?
var layer_offline = new ol.layer.VectorTile({
    declutter: true,
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      url: 'http://localhost/tile?z={z}&x={x}&y={y}'
    }),
    style: ???? // <--- This one I would need to load a JSON file
});

ahocevar · Accepted Answer

The easiest way to do this is to use the ol-mapbox-style plugin. It has an API that allows you to use Mapbox Style JSONs as style for a specific layer (like in your snippet), but it also allows you to create a whole map from a Mapbox Style document.
What you want is probably something along these lines:
var layer_offline = new ol.layer.VectorTile({
  declutter: true,
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'http://localhost/tile?z={z}&x={x}&y={y}'
  })
});
layer_offline.setStyle(olms.stylefunction(layer_offline, style_json, 'mysource');

where layer_offline is the Mapbox Style JSON, and mysource is the id of the source from that style JSON you want to render.

Applying JSON style from URL to Vector in OpenLayers

One Answer

Add your own answers!

Ask a Question