main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {XYZ} from 'ol/source.js';
import {WebGLTile as TileLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

const variables = {};

// The method used to extract elevations from the DEM.
// In this case the format used is Terrarium
// red * 256 + green + blue / 256 - 32768
//
// Other frequently used methods include the Mapbox format
// (red * 256 * 256 + green * 256 + blue) * 0.1 - 10000
//
function elevation(xOffset, yOffset) {
  const red = ['band', 1, xOffset, yOffset];
  const green = ['band', 2, xOffset, yOffset];
  const blue = ['band', 3, xOffset, yOffset];

  // band math operates on normalized values from 0-1
  // so we scale by 255
  /*return [
    '+',
    ['*', 255 * 256, red],
    ['*', 255, green],
    ['*', 255 / 256, blue],
    -32768,
  ];
  */
 return [
  '+',
  ['*', 255*6553.6, red],
  ['*', 25.6, green],
  ['*', 255/0.1, blue],
  -10000
 ];
}

// Generates a shaded relief image given elevation data.  Uses a 3x3
// neighborhood for determining slope and aspect.
const dp = ['*', 2, ['resolution']];
const z0x = ['*', ['var', 'vert'], elevation(-1, 0)];
const z1x = ['*', ['var', 'vert'], elevation(1, 0)];
const dzdx = ['/', ['-', z1x, z0x], dp];
const z0y = ['*', ['var', 'vert'], elevation(0, -1)];
const z1y = ['*', ['var', 'vert'], elevation(0, 1)];
const dzdy = ['/', ['-', z1y, z0y], dp];
const slope = ['atan', ['sqrt', ['+', ['^', dzdx, 2], ['^', dzdy, 2]]]];
const aspect = ['clamp', ['atan', ['-', 0, dzdx], dzdy], -Math.PI, Math.PI];
const sunEl = ['*', Math.PI / 180, ['var', 'sunEl']];
const sunAz = ['*', Math.PI / 180, ['var', 'sunAz']];

const cosIncidence = [
  '+',
  ['*', ['sin', sunEl], ['cos', slope]],
  ['*', ['cos', sunEl], ['sin', slope], ['cos', ['-', sunAz, aspect]]],
];
const scaled = ['*', 255, cosIncidence];

const API_TOKEN = '<INSERT-YOUR-API-KEY>';

const shadedRelief = new TileLayer({
  opacity: 0.7,
  source: new XYZ({
    url: `TBA/default/v2/WGS84_Pseudo-Mercator/{z}/{y}/{x}.png?api-key=${API_TOKEN}`,
    maxZoom: 16
  }),
  style: {
    variables: variables,
    color: ['color', scaled, scaled, scaled],
  },
});

const mapLayer = new TileLayer({
  opacity: 0.5,
  source: new XYZ({
    url: `https://avoin-karttakuva.maanmittauslaitos.fi/avoin/wmts/1.0.0/maastokartta/default/WGS84_Pseudo-Mercator/{z}/{y}/{x}.png?api-key=${API_TOKEN}`,
    maxZoom: 18
  })

});

const controlIds = ['vert', 'sunEl', 'sunAz'];
controlIds.forEach(function (id) {
  const control = document.getElementById(id);
  const output = document.getElementById(id + 'Out');
  function updateValues() {
    output.innerText = control.value;
    variables[id] = Number(control.value);
  }
  updateValues();
  control.addEventListener('input', function () {
    updateValues();
    shadedRelief.updateStyleVariables(variables);
  });
});

const centerLonLat = [27.24535,67.09973],
  centerWebMercator = fromLonLat(centerLonLat);

const map = new Map({
  target: 'map',
  layers: [
    shadedRelief,
    mapLayer
  ],
  view: new View({
    center: centerWebMercator,
    zoom: 14
  }),
});