using same layer in shared view on openlayers

Question

I want to render the same layer in both views but getting the issue. the layer is displaying on one map at a single time. if zoom in or zoom out, it sometimes reflects on view 1 or sometimes on view 2.

var roadLayer = new TileLayer({
  source: new OSM(),
});

var view = new View({
  center: [-6655.5402445057125, 6709968.258934638],
  zoom: 13,
});

var map1 = new Map({
  target: 'roadMap',
  layers: [roadLayer],
  view: view,
});

var map2 = new Map({
  target: 'aerialMap',
  layers: [roadLayer],
  view: view,
});

Answer 1

That is mentioned in the upgrade notes https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#layers-can-only-be-added-to-a-single-map

You can however use the same source in two layers:

var source = new OSM();

var view = new View({
  center: [-6655.5402445057125, 6709968.258934638],
  zoom: 13,
});

var map1 = new Map({
  target: 'roadMap',
  layers: [
    new TileLayer({
      source: source,
    })
  ],
  view: view,
});

var map2 = new Map({
  target: 'aerialMap',
  layers: [
    new TileLayer({
      source: source,
    })
  ],
  view: view,
});