/**
 * Tile layers get clipped to their extent.
 */

import Map from '../../../../src/ol/Map.js';
import TileLayer from '../../../../src/ol/layer/Tile.js';
import View from '../../../../src/ol/View.js';
import XYZ from '../../../../src/ol/source/XYZ.js';
import {useGeographic} from '../../../../src/ol/proj.js';

useGeographic();

const center = [7, 50];
const extent = [2, 47, 10, 53];

new Map({
  target: 'map',
  view: new View({
    center: center,
    zoom: 3,
  }),
  layers: [
    new TileLayer({
      source: new XYZ({
        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
        maxZoom: 3,
      }),
      extent: extent,
    }),
    new TileLayer({
      source: new XYZ({
        url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
        minZoom: 3,
        maxZoom: 5,
      }),
      extent: extent,
    }),
  ],
});

render();
