mapgl viewport changing

Map logic with viewport chaning

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="wrapper">
  <div id="container"></div>
  <div id="menu">Menu</div>
</div>
<button id="button">Show menu</button>

CSS

#container,
#wrapper {
  width: 300px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

#menu {
  display: none;
  position: absolute;
  left: 25px;
  bottom: 0;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid;
  z-index: 100;
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const initialCenter = [82.90328, 54.98280];

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

new mapgl.Marker(map, {
  coordinates: initialCenter,
  label: {
    text: 'initial center'
  }
});

let showed = false;

document.getElementById('button').addEventListener('click', () => {
  showed = !showed;
  
  if (showed) {
  	document.getElementById('menu').style.display = 'block'
  const visualPixelCenter = [150, 125];
  const visualMapCenter = map.unproject(visualPixelCenter);
  const diff = [initialCenter[0] - visualMapCenter[0], initialCenter[1] - visualMapCenter[1]];

  map.setCenter([initialCenter[0] + diff[0], initialCenter[1] + diff[1]]);
  } else {
  	document.getElementById('menu').style.display = 'none';	
  map.setCenter([initialCenter[0] + diff[0], initialCenter[1] + diff[1]]);
  }

});