fix: ensure OpenLayers instance is initialized before adding map to D…

…OM (#3388)

* fix: ensure OpenLayers instance is initialized before adding map to DOM

* fix inconsistent property naming

* improve test readability

packages/map/src/vaadin-map.js

@@ -361,7 +361,6 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
           align-self: end;
         }
       </style>
-      <div id="map"></div>
     `;
   }
 
@@ -379,24 +378,28 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
     return this._configuration;
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.__initMap();
-  }
-
-  /** @private */
-  __initMap() {
+  constructor() {
+    super();
+    // Create map container element and initialize OL map instance
+    this._mapTarget = document.createElement('div');
+    this._mapTarget.id = 'map';
     this._configuration = new OpenLayersMap({
-      target: this.$.map
+      target: this._mapTarget
     });
     // Override default controls to remove default labels, which is required to
     // correctly display icons through pseudo-element
     this._configuration.getControls().clear();
     this._configuration.getControls().push(new Zoom({ zoomInLabel: '', zoomOutLabel: '' }));
     this._configuration.getControls().push(new Attribution());
   }
+
+  /** @protected */
+  ready() {
+    super.ready();
+    // Add map container to shadow root, trigger OL resize calculation
+    this.shadowRoot.appendChild(this._mapTarget);
+    this._configuration.updateSize();
+  }
 }
 
 if (isEnabled()) {

packages/map/test/map.test.js

@@ -0,0 +1,41 @@
+import { expect } from '@esm-bundle/chai';
+import '../enable.js';
+import '../vaadin-map.js';
+import TileLayer from 'ol/layer/Tile';
+import Map from 'ol/Map';
+import OSM from 'ol/source/OSM';
+import View from 'ol/View';
+
+async function nextMapRender(map) {
+  return new Promise((resolve) => {
+    map.configuration.on('rendercomplete', resolve);
+  });
+}
+
+describe('configuration in detached state', () => {
+  let mapElement;
+
+  beforeEach(() => {
+    mapElement = document.createElement('vaadin-map');
+    mapElement.style.width = '100px';
+    mapElement.style.height = '100px';
+  });
+
+  afterEach(() => {
+    mapElement.remove();
+  });
+
+  it('should be configurable when detached', async () => {
+    // OL instance should be initialized
+    expect(mapElement.configuration).to.be.instanceOf(Map);
+    // Configure map
+    mapElement.configuration.addLayer(new TileLayer({ source: new OSM() }));
+    mapElement.configuration.setView(new View({ center: [0, 0], zoom: 3 }));
+    // Attach and wait for layer to be rendered
+    document.body.appendChild(mapElement);
+    await nextMapRender(mapElement);
+    // Verify layer is set up
+    const layers = mapElement.shadowRoot.querySelectorAll('.ol-layer');
+    expect(layers.length).to.equal(1);
+  });
+});