alpha mapgl raster tile

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1.15.0-rastertiles.0"></script>
<div id="container"></div>
<button id="delete">Delete raster tiles</button>

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#delete {
  position: absolute;
  top: 15px;
  left: 15px;
}

JavaScript

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

window.addEventListener('resize', () => map.invalidateSize());

const rasterTileLayer = new mapgl.RasterTileLayer(map, {
  minZoom: 2, // Минимальный зум, на котором есть тайлы
  maxZoom: 20, // Максимальный зум, на котором есть тайлы
  maxDisplayZoom: 20, // Максимальный зум, до которого показывать последние тайлы с maxZoom
  tilesUrl: ([x, y, zoom]) => `https://a.tile.openstreetmap.org/${zoom}/${x}/${y}.png`,
});

const marker = new mapgl.Marker(map, {
  coordinates: [82.8975588, 54.9801759],
});

document.getElementById('delete').onclick = () => rasterTileLayer.destroy();