I have a world map and when you zoom in you can see provinces of cities. Some cities and/or provinces, based on a criteria, are colored different.

I found two geojson maps, one includes countries and the other includes provinces. Currently, I have the following code to create my maps:

  this.WorldMapSource = new VectorSource({
    format: new GeoJSON(),
    url: this.WorldMapData
  });

  this.ProvinceMapSource = new VectorSource({
    format: new GeoJSON(),
    url: this.ProvinceMapData
  })

  this.WorldMapView = new View({
    center: [0, 0],
    zoom: 2,
    minZoom: 1,
    maxZoom: 10
  });

  this.WorldMap = new Map({
    renderer: 'webgl',
    target: 'world-map',
    layers: [
      new VectorImageLayer({
        source: this.WorldMapSource,
        style: this.fillWorldMap,
        minZoom: 1,
        maxZoom: 7
      }),
      new VectorImageLayer({
        source: this.ProvinceMapSource,
        style: this.fillCountryMap,
        minZoom: 6,
        maxZoom: 999
      })
    ],
    view: this.WorldMapView
  });

Btw, I am using Vue, if that helps somehow.

But when I zoom in/out or simply drag the map, it freezes for a moment and I see some blank areas. Is there a workaround for this?