polirural-attractiveness-clustering/src/app.js

'use strict';
//import angular from 'angular';
import 'hslayers-ng/components/add-layers/add-layers.module';
import 'hslayers-ng/components/datasource-selector/datasource-selector.module';
import 'hslayers-ng/components/draw/draw.module';
import 'hslayers-ng/components/info/info.module';
import 'hslayers-ng/components/measure/measure.module';
import 'hslayers-ng/components/permalink/permalink.module';
import 'hslayers-ng/components/print/print.module';
import 'hslayers-ng/components/query/query.module';
import 'hslayers-ng/components/search/search.module';
import 'hslayers-ng/components/sidebar/sidebar.module';
import 'hslayers-ng/components/toolbar/toolbar.module';
// hslayers-ng components must be loaded first, otherwise angular will be undefined
// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
import './adjuster/adjuster.module.js';
import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import hsv2rgb from 'hsv2rgb';
import nuts from './nuts.js';
import {Fill, Stroke, Style} from 'ol/style';
import {OSM} from 'ol/source';
import {Tile} from 'ol/layer';

let randomColorPalette = [];

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,
});

/**
 * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
 * @param {number} colorCount Number of colors to randomly generate
 * @returns {Array<Array<Number>>} Array of RGB colors
 */
function generateRandomColorPalette(colorCount) {
  const palette = [];
  const goldenRatioConjugate = 0.618033988749895;
  for (let i = 0; i < colorCount; i++) {
    let h = Math.random();
    h += goldenRatioConjugate;
    h %= 1;
    h *= 360;
    palette.push(hsv2rgb(h, 0.5, 0.95));
  }
  // eslint-disable-next-line no-unused-vars
  // const h = r * 0x10000 + g * 0x100 + b * 0x1;
  return palette;
  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
}

const styles = function (feature) {
  if (isNaN(feature.get('km25.cluster'))) {
    return [
      new Style({
        fill: new Fill({
          color: '#FFF',
        }),
        stroke: stroke,
      }),
    ];
  } else {
    return [
      new Style({
        fill: new Fill({
          color: randomColorPalette[feature.get('km25.cluster')],
        }),
        //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',
});
//TODO: update to new PopUp config & align with new attrs
nuts3Layer.set('hoveredKeys', [
  'NUTS_NAME',
  'totalForHumans',
  'Social & Human',
  'Anthropic',
  'Institutional',
  'Economical',
  'Natural',
  'Cultural',
]);
nuts3Layer.set('hoveredKeysTranslations', {
  NUTS_NAME: 'Name',
  totalForHumans: 'Calculated score',
});

angular
  .module('hs', [
    'hs.sidebar',
    'hs.draw',
    'hs.info',
    'hs.toolbar',
    'hs.layermanager',
    'hs.query',
    'hs.search',
    'hs.print',
    'hs.permalink',
    'hs.geolocation',
    'hs.datasource_selector',
    'hs.save-map',
    'hs.measure',
    'hs.addLayers',
    'pra.adjuster',
  ])
  .directive('hs', function (HsConfig, HsCore) {
    'ngInject';
    return {
      template: HsCore.hslayersNgTemplate,
      /* link: function (scope, element) {
        HsCore.fullScreenMap(element);
      } */
    };
  })
  .value('HsConfig', {
    proxyPrefix: '../8085/',
    default_layers: [
      new Tile({
        source: new OSM(),
        title: 'OpenStreetMap',
        base: true,
        removable: false,
      }),
      nuts2Layer,
      nuts3Layer,
    ],
    popUpDisplay: 'hover',
    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: {},
    // allowAddExternalDatasets: false,
    panelsEnabled: {
      composition_browser: false,
      draw: false,
      //info: false,
      saveMap: false,
      language: false,
    },
    /*searchProvider: (q) => {
      return `/app/jupyter-test/8085/search/?q=${q}`;
    },*/
    sizeMode: 'fullscreen',
  })
  .controller('MainController', function (
    $scope,
    HsCore,
    $compile,
    HsLayoutService,
    PraAdjusterService
  ) {
    'ngInject';
    const vm = this;
    vm.exists = HsCore.exists;
    vm.panelVisible = HsLayoutService.panelVisible;
    HsLayoutService.sidebarRight = false;
    // HsLayoutService.sidebarToggleable = false;
    // HsCore.singleDatasources = true;
    HsLayoutService.sidebarButtons = true;
    HsLayoutService.setDefaultPanel('adjuster');
    $scope.$on('scope_loaded', function (event, args) {
      if (args === 'Sidebar') {
        const el = angular.element(
          '<pra.adjuster hs.draggable ng-if="vm.exists(\'pra.adjuster\')" ng-show="vm.panelVisible(\'adjuster\', this)"></pra.adjuster>'
        )[0];
        HsLayoutService.panelListElement.appendChild(el);
        $compile(el)($scope);

        const toolbarButton = angular.element(
          '<div pra-adjuster-sidebar-btn></div>'
        )[0];
        HsLayoutService.sidebarListElement.appendChild(toolbarButton);
        $compile(toolbarButton)(event.targetScope);
      }
    });
    $scope.$on('clusters_loaded', function (event, args) {
      randomColorPalette = generateRandomColorPalette(
        PraAdjusterService.clusters.length
      );
    });
  });