How to use ol-mapbox-style - 10 common examples

export function clearStyleFunction(def, vectorStyleId, vectorStyles, layer, state) {
  var styleFunction;
  var layerId = def.id;
  var glStyle = vectorStyles[layerId];
  var olMap = lodashGet(state, 'legacy.map.ui.selected');
  if (olMap) {
    lodashEach(olMap.getLayers().getArray(), subLayer => {
      if (subLayer.wv.id === layerId) {
        layer = subLayer;
      }
    });
  }
  styleFunction = stylefunction(layer, glStyle, vectorStyleId);
  if (glStyle.name === 'Orbit Tracks') {
    // Filter time by 5 mins
    layer.setStyle(function(feature, resolution) {
      var minute;
      var minutes = feature.get('label');
      if (minutes) {
        minute = minutes.split(':');
      }
      if ((minute && minute[1] % 5 === 0) || feature.getType() === 'LineString') {
        return styleFunction(feature, resolution);
      }
    });
  }
  return update(vectorStyles, { layerId: { maps: { $unset: ['custom'] } } });
}

layer = subLayer;
            }
          });
        }
      } else {
        lodashEach(layerGroups, subLayer => {
          if (subLayer.wv && (subLayer.wv.id === layerId)) {
            layer = subLayer;
          }
        });
      }
    });
  }

  // Apply mapbox-gl styles
  styleFunction = stylefunction(layer, glStyle, vectorStyleId);
  // Filter Orbit Tracks
  if (glStyle.name === 'Orbit Tracks') {
    // Filter time by 5 mins
    layer.setStyle(function(feature, resolution) {
      var minute;
      var minutes = feature.get('label');
      if (minutes) {
        minute = minutes.split(':');
      }
      if ((minute && minute[1] % 5 === 0) || feature.getType() === 'LineString') {
        return styleFunction(feature, resolution);
      }
    });
  } else if (glStyle.name === 'SEDAC' &&
    ((selected[layerId] && selected[layerId].length))) {
    const selectedFeatures = selected[layerId];

import VectorTileSource from '../src/ol/source/VectorTile.js';
import TileGrid from '../src/ol/tilegrid/TileGrid.js';

import olms from 'ol-mapbox-style';
import {defaultResolutions} from 'ol-mapbox-style/util.js';

const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';

// Match the server resolutions
const maxResolution = 360 / 512;
defaultResolutions.length = 14;
for (let i = 0; i < 14; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) {

  // Custom tile grid for the EPSG:4326 projection
  const tileGrid = new TileGrid({
    extent: [-180, -90, 180, 90],
    tileSize: 512,
    resolutions: defaultResolutions
  });

  const mapboxStyle = map.get('mapbox-style');

  // Replace the source with a EPSG:4326 projection source for each vector tile layer
  map.getLayers().forEach(function(layer) {
    const mapboxSource = layer.get('mapbox-source');
    if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') {
      const source = layer.getSource();
      layer.setSource(new VectorTileSource({

import View from '../src/ol/View.js';
import MVT from '../src/ol/format/MVT.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import TileGrid from '../src/ol/tilegrid/TileGrid.js';

import olms from 'ol-mapbox-style';
import {defaultResolutions} from 'ol-mapbox-style/util.js';

const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';

// Match the server resolutions
const maxResolution = 360 / 512;
defaultResolutions.length = 14;
for (let i = 0; i < 14; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) {

  // Custom tile grid for the EPSG:4326 projection
  const tileGrid = new TileGrid({
    extent: [-180, -90, 180, 90],
    tileSize: 512,
    resolutions: defaultResolutions
  });

  const mapboxStyle = map.get('mapbox-style');

  // Replace the source with a EPSG:4326 projection source for each vector tile layer

updateStyle(newMapStyle) {
    if(!this.map) return;
    apply(this.map, newMapStyle);
  }

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

const map = apply('map-container', './data/bright.json');

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

apply('map', 'data/tilejson.json');

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

apply('map', 'data/geojson.json');

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

apply('map', ' https://demo.tegola.io/styles/hot-osm.json');

import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';

apply('map', 'data/geojson-inline.json');