mapgl-empty

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js"></script>
<div id="outer-container">
  <div id="map-container"></div>
</div>
<button id="change">Change size</button>
<button id="change-invalidate">Change and invalidate size</button>

CSS

#outer-container {
  width: 150px;
  height: 150px;
  border: 1px solid #ff0000;
  background: #ffaaaa;
}

#map-container {
  width: 70%;
  height: 70%;
  border: 1px solid #0000ff;
}

JavaScript

const map = new mapgl.Map('map-container', {
  center: [55.31878, 25.23584],
  zoom: 13,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7'
});

const outerContainer = document.getElementById('outer-container');
  
document.getElementById('change').addEventListener('click', () => {
  outerContainer.style.width = outerContainer.style.height = '200px';
});

document.getElementById('change-invalidate').addEventListener('click', () => {
  outerContainer.style.width = outerContainer.style.height = '250px';
  map.invalidateSize();
});