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

import proj4 from 'proj4';
import {Fill, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile, Vector as VectorLayer} from 'ol/layer';
import {TopoJSON} from 'ol/format';
import {View} from 'ol';
import {get as getProjection, transform} from 'ol/proj';
import {register} from 'ol/proj/proj4';

import i18n from './translations.json';

proj4.defs(
  'EPSG:3045',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
);
proj4.defs(
  'EPSG:5514',
  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
);
register(proj4);
const sjtskProjection = getProjection('EPSG:5514');
//const utm33nProjection = getProjection('EPSG:3045');

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

export const osmLayer = new Tile({
  source: new OSM(),
  title: 'OpenStreetMap',
  base: true,
  editor: {editable: false},
  removable: false,
});

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 @typescript-eslint/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('aggregate'))) {
    return [
      new Style({
        fill: new Fill({
          color: '#FFF',
        }),
        stroke: stroke,
      }),
    ];
  } else {
    return [
      new Style({
        fill: new Fill({
          color: perc2color(feature.get('aggregate')),
        }),
        stroke: stroke,
      }),
    ];
  }
};

export const obce = new VectorSource({
  format: new TopoJSON({dataProjection: 'EPSG:5514'}),
  url: require('./data/obce_cr_20210310_5p_5514.topojson').default,
  overlaps: false,
});

export const obceLayer = new VectorLayer({
  source: obce,
  editor: {editable: false},
  visible: true,
  style: styles,
  title: 'Obce ČR',
  attributions: ['CC-BY ČÚZK, 2021'],
});
obceLayer.set('popUp', {
  attributes: [
    {attribute: 'text', label: 'Název'},
    {
      attribute: 'aggregate',
      label: 'index',
      displayFunction: (x) => {
        return `${(x * 100).toFixed(2)}&nbsp;%`;
      },
    },
    'Social & Human', //TODO: factors?
  ],
});
obceLayer.set('editable', false);
//obceLayer.set('queryable', false);

export const AppConfig = {
  //proxyPrefix: '../8085/',
  default_layers: [osmLayer, obceLayer],
  popUpDisplay: 'hover',
  project_name: 'erra/map',
  default_view: new View({
    projection: sjtskProjection,
    center: transform([15.628, 49.864249], 'EPSG:4326', 'EPSG:5514'),
    zoom: 7.6,
    units: 'm',
  }),
  advanced_form: true,
  datasources: [],
  hostname: {
    default: {
      title: 'Default',
      type: 'default',
      editable: false,
      url: getHostname(),
    },
  },
  panelWidths: {},
  panelsEnabled: {
    composition_browser: false,
    feature_crossfilter: false,
    info: false,
    saveMap: false,
    sensors: false,
    tracking: false,
    routing: false,
    permalink: false,
    legend: false,
    feature_table: false,
    draw: false,
  },
  sizeMode: 'fullscreen',
  translationOverrides: i18n,
};

export default AppConfig;