Defines base, vector and MVT layer to be added to a OpenLayers map object.

OL.initMVTeditMap.js

const layerBase = new ol.layer.Tile({
  source: new ol.source.OSM({
    url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
    opaque: false,
    attributions: []
  })
});

const sourceMVT = new ol.source.VectorTile({
  cacheSize: 0,
  format: new ol.format.MVT(),
  url: 'https://geolytix.xyz/dev/api/layer/mvt/{z}/{x}/{y}?locale=GB&layer=Scratch&table=dev.scratch'
});

const layerMVT = new ol.layer.VectorTile({
  preload: 0,
  source: sourceMVT,
  style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#090',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 0, 0)'
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 0, 0.01)'
        }),
        stroke: new ol.style.Stroke({
          color: '#090',
          width: 2
        })
      })
    })
});

function clearTileCache() {
  //sourceMVT.tileCache.expireCache({});
  sourceMVT.clear();
  sourceMVT.tileCache.clear();
  sourceMVT.refresh();
}

const sourceVector = new ol.source.Vector();

const layerVector = new ol.layer.Vector({
  source: sourceVector,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#EE266D',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 0, 0.01)'
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 0, 0.01)'
      }),
      stroke: new ol.style.Stroke({
        color: '#EE266D',
        width: 2
      })
    })
  })
});

const geoJSON = new ol.format.GeoJSON();

const map = new ol.Map({
  target: 'map',
  controls: [],
  interactions: [
    new ol.interaction.MouseWheelZoom(),
    new ol.interaction.DragPan()
  ],
  layers: [layerBase, layerMVT, layerVector],
  view: new ol.View({
    center: ol.proj.fromLonLat([-3, 55]),
    zoom: 6
  })
});