rural-attractiveness-cz/src/app.config.ts

import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import {Fill, Stroke, Style} from 'ol/style';
import {OSM} from 'ol/source';
import {Tile} from 'ol/layer';

import nuts from './nuts';

function getHostname() {
  const url = window.location.href;
  const urlArr = url.split('/');
  const domain = urlArr[2];
  return urlArr[0] + '//' + domain;
}

const stroke = new Stroke({
  color: '#3399CC',
  width: 0.25,
});

function perc2color(perc) {
  perc = perc * 100;
  let r;
  let g;
  const b = 0;
  if (perc < 50) {
    r = 255;
    g = Math.round(5.1 * perc);
  } else {
    g = 255;
    r = Math.round(510 - 5.1 * perc);
  }
  // eslint-disable-next-line no-unused-vars
  const h = r * 0x10000 + g * 0x100 + b * 0x1;
  return `rgba(${r}, ${g}, ${b}, 0.7)`;
}

const styles = function (feature) {
  if (isNaN(feature.get('total'))) {
    return [
      new Style({
        fill: new Fill({
          color: '#FFF',
        }),
        stroke: stroke,
      }),
    ];
  } else {
    return [
      new Style({
        fill: new Fill({
          color: perc2color(feature.get('total')),
        }),
        stroke: stroke,
      }),
    ];
  }
};

const nuts2Layer = new VectorLayer({
  source: nuts.nuts2Source,
  visible: false,
  style: styles,
  title: 'NUTS2 regions',
});

const nuts3Layer = new VectorLayer({
  source: nuts.nuts3Source,
  visible: true,
  style: styles,
  title: 'NUTS3 regions',
});
nuts3Layer.set('hoveredKeys', [
  'NUTS_NAME',
  'totalForHumans',
  'Social & Human',
  'Anthropic',
  'Institutional',
  'Economical',
  'Natural',
  'Cultural',
]);
nuts3Layer.set('hoveredKeysTranslations', {
  NUTS_NAME: 'Name',
  totalForHumans: 'Calculated score',
});

export const AppConfig = {
  proxyPrefix: '../8085/',
  default_layers: [
    new Tile({
      source: new OSM(),
      title: 'Open street map',
      base: true,
      editor: {editable: false},
      removable: false,
    }),
    nuts2Layer,
    nuts3Layer,
  ],
  project_name: 'erra/map',
  default_view: new View({
    center: [2433348.3022471312, 7744501.813885343],
    zoom: 3.6,
    units: 'm',
  }),
  advanced_form: true,
  datasources: [],
  hostname: {
    default: {
      title: 'Default',
      type: 'default',
      editable: false,
      url: getHostname(),
    },
  },
  panelWidths: {},
  panelsEnabled: {
    language: false,
    composition_browser: false,
    legend: false,
    ows: false,
    info: false,
    saveMap: false,
    draw: false,
  },
  searchProvider: (q) => {
    return `/app/jupyter-test/8085/search/?q=${q}`;
  },
};