6

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
});

1 Answer 1

7

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.

3
  • Is there any performance gain as compared to Openlayer's styleFunction?
    – wondim
    Sep 5, 2020 at 12:52
  • 1
    No. Internally, ol-mapbox-style also uses a styleFunction.
    – ahocevar
    Sep 6, 2020 at 14:14
  • Thank you for the information. Keep up the great work! Hopefully in the future versions, there will be an improvement :)
    – wondim
    Sep 8, 2020 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.