Masking results full

index.html

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

 <div id="mapid"></div>

masking-results-full.markdown

Masking results full

A Pen by Vladimir Seregin on CodePen.

License.

script.js

var v144 = L.tileLayer('http://3.249.151.149/results/v144/{z}-{y}-{x}.jpg', {
    maxZoom: 10,
    minZoom: 1,
    id: 'mapbox/streets-v11',
    tileSize: 256,
    zoomOffset: 0,
    accessToken: 'your.mapbox.access.token'
})

var v110 = L.tileLayer('http://3.249.151.149/results/v110/{z}-{y}-{x}.jpg', {
    maxZoom: 10,
    minZoom: 1,
    id: 'mapbox/streets-v11',
    tileSize: 256,
    zoomOffset: 0,
    accessToken: 'your.mapbox.access.token'
})

var last_4k = L.tileLayer('http://3.249.151.149/results/4K/{z}-{y}-{x}.jpg', {
    maxZoom: 10,
    minZoom: 1,
    id: 'mapbox/streets-v11',
    tileSize: 256,
    zoomOffset: 0,
    accessToken: 'your.mapbox.access.token'
})

var original = L.tileLayer('http://3.249.151.149/results/original/{z}-{y}-{x}.jpg', {
    maxZoom: 10,
    minZoom: 1,
    id: 'mapbox/streets-v11',
    tileSize: 256,
    zoomOffset: 0,
    accessToken: 'your.mapbox.access.token'
})
var layers = [original, v110, v144, last_4k];
var map = L.map(
  'mapid', 
  {
    layers:[original]
  }
).setView([90, -180], 10);

L.control.layers({
  "Оригинальная модель": original, 
  "Переобученная v110": v110,
  "Переобученная v144": v144,
  "Переобученная v110 x2": last_4k,
}).addTo(map);


var currentLayer;
window.addEventListener("keypress", function(e) {
  var pressedKey = Number(e.key);

  // If button pressed is not a number, return.
  if (isNaN(pressedKey)) return;
  console.log(pressedKey)
  // If the pressed number is greater than the length of layers, return.
  if (pressedKey - 1 >= layers.length) return;
  // If currentLayer is set, remove it from the map.
  if (currentLayer) map.removeLayer(currentLayer);

  currentLayer = layers[pressedKey - 1];
  console.log(currentLayer)
  map.addLayer(currentLayer);
});

style.css

body, html {with: 100%; height:100%; margin:0;}
#mapid { height: 100%; width:100%;}