groundwater stylees

groundwaterStyles.js

import { Circle, Stroke, Style, Fill } from "ol/style";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";

const percentileOpacity = 0.3;

export const percentileConfigs = [
  {
    value: "p99",
    color: "#083092",
    rgba: `rgba(8, 47, 145, ${percentileOpacity})`,
    stroke: "#000",
    title: "Ekstrem høj"
  },
  {
    value: "p95",
    color: "#4848FF",
    rgba: `rgba(72, 72, 255, ${percentileOpacity})`,
    stroke: "#000",
    title: "Meget høj"
  },
  {
    value: "p90",
    color: "#10B1BF",
    rgba: `rgba(16, 177, 191, ${percentileOpacity})`,
    rgba: "",
    stroke: "#000",
    title: "Langt over normalt"
  },
  {
    value: "p75",
    color: "#00EAFF",
    rgba: `rgba(0, 234, 255, ${percentileOpacity})`,
    stroke: "#000",
    title: "Over normalt"
  },
  {
    value: "p50",
    color: "#DFDFDF",
    rgba: `rgba(223, 223, 223, ${percentileOpacity})`,
    stroke: "#000",
    title: "Normalt"
  },
  {
    value: "p25",
    color: "#F8EE67",
    rgba: `rgba(248, 238, 103, ${percentileOpacity})`,
    stroke: "#000",
    title: "Under normalt"
  },
  {
    value: "p10",
    color: "#F8AD00",
    rgba: `rgba(248, 173, 0, ${percentileOpacity})`,
    stroke: "#000",
    title: "Langt under normalt"
  },
  {
    value: "p5",
    color: "#F80000",
    rgba: `rgba(248, 0, 0, ${percentileOpacity})`,
    stroke: "#000",
    title: "Meget lav"
  },
  {
    value: "p1",
    color: "#A11113",
    rgba: `rgba(161, 17, 19, ${percentileOpacity})`,
    stroke: "#7F0507",
    title: "Dybere end 10 m"
  },
  {
    value: "p0",
    color: "#878787",
    rgba: `rgba(135, 135, 135 ${percentileOpacity})`,
    stroke: "#878787",
    title: "Manglende værdi"
  }
];

export const absoluteScaleConfigs = [
  {
    value: 0.5,
    color: "#4848FF",
    stroke: "#000",
    title: "0 - 0,5 m"
  },
  {
    value: 1,
    color: "#00EAFF",
    stroke: "#000",
    title: "0,5 - 1 m"
  },
  {
    value: 2,
    color: "#DFDFDF",
    stroke: "#000",
    title: "1 - 2 m"
  },
  {
    value: 5,
    color: "#F8AD00",
    stroke: "#000",
    title: "2 - 5 m"
  },
  {
    value: 10,
    color: "#F80000",
    stroke: "#000",
    title: "5 - 10 m"
  },
  {
    value: Number.MAX_SAFE_INTEGER,
    color: "#A11113",
    stroke: "#7F0507",
    title: "> 10 m"
  },
  {
    value: Number.MIN_SAFE_INTEGER,
    color: "#878787",
    stroke: "#616161",
    title: "Manglende værdi"
  }
];

export const statisticalLevelConfigs = [
  {
    value: 1,
    color: "#083092",
    stroke: "#041E5F",
    title: "< 1 m.o.h"
  },
  {
    value: 3,
    color: "#4848FF",
    stroke: "#1E1EC9",
    title: "1 til 3 m.o.h"
  },
  {
    value: 5,
    color: "#10B1BF",
    stroke: "#14939E",
    title: "3 til 5 m.o.h"
  },
  {
    value: 7,
    color: "#00EAFF",
    stroke: "#00C9DB",
    title: "5 til 7 m.o.h"
  },
  {
    value: 9,
    color: "#DFDFDF",
    stroke: "#CACACA",
    title: "7 til 9 m.o.h"
  },
  {
    value: 11,
    color: "#F8EE67",
    stroke: "#DCD24C",
    title: "9 til 11 m.o.h"
  },
  {
    value: 13,
    color: "#F8AD00",
    stroke: "#DE9B00",
    title: "11 til 13 m.o.h"
  },
  {
    value: 15,
    color: "#F80000",
    stroke: "#D50000",
    title: "13 til 15 m.o.h"
  },
  {
    value: Number.MAX_SAFE_INTEGER,
    color: "#A11113",
    stroke: "#7F0507",
    title: "> 15 m.o.h"
  }
];

export const createStyle = ({ color, stroke, radius }) => {
  return function(feature, resolution) {
    const scale = (1 / Math.pow(resolution, 1 / 2)) * 10;
    const radiusScaled = scale > 1 && scale < 3 ? radius * scale : radius;

    return new Style({
      image: new Circle({
        radius: radiusScaled,
        fill: new Fill({
          color
        }),
        stroke: new Stroke({
          color: stroke,
          width: 1
        })
      })
    });
  };
};

export const percentileStyles = percentileConfigs.map(config => {
  const { color, stroke } = config;

  return createStyle({
    color,
    stroke,
    radius: 4
  });
});

export const percentileHighlightStyles = percentileConfigs.map(config => {
  const { color, stroke } = config;

  return createStyle({
    color,
    stroke,
    radius: 8
  });
});

export const absoluteScaleStyles = absoluteScaleConfigs.map(config => {
  const { color, stroke } = config;

  return createStyle({
    color,
    stroke,
    radius: 4
  });
});

export const absoluteScaleHighlightStyles = absoluteScaleConfigs.map(config => {
  const { color, stroke } = config;

  return createStyle({
    color,
    stroke,
    radius: 8
  });
});

export const statisticalLevelStyles = statisticalLevelConfigs.map(config => {
  const { color, stroke } = config;

  return createStyle({
    color,
    stroke,
    radius: 4
  });
});

export const statisticalLevelHighlightStyles = statisticalLevelConfigs.map(
  config => {
    const { color, stroke } = config;

    return createStyle({
      color,
      stroke,
      radius: 4
    });
  }
);

export const getStyle = (array, index) => {
  const style = array[index];

  if (!style) {
    return createStyle({
      color: "#000",
      stroke: "#000",
      radius: 4
    });
  }

  return style;
};

export const createHighlightStyle = ({ color, stroke }) => {
  return new Style({
    image: new Circle({
      radius: 8,
      fill: new Fill({
        color
      }),
      stroke: new Stroke({
        color: stroke,
        width: 2
      })
    })
  });
};

export const createPoint = ({ x, y, id, title }) => {
  const point = new Point([x, y]);

  return new Feature({
    geometry: point,
    id,
    title
  });
};

export const createStyledPoint = ({ x, y, id, title, color, stroke }) => {
  const point = new Point([x, y]);
  const defaultStyle = createStyle({ color, stroke });
  const highlightStyle = createHighlightStyle({ color, stroke });

  const feature = new Feature({
    geometry: point,
    id,
    title,
    defaultStyle,
    highlightStyle
  });

  feature.setStyle(defaultStyle);

  return feature;
};

export const createStyledPointFromPercentile = ({
  x,
  y,
  id,
  layerName,
  title,
  configItemIndex
}) => {
  const point = new Point([x, y]);
  const defaultStyle = getStyle(percentileStyles, configItemIndex);
  const highlightStyle = getStyle(percentileHighlightStyles, configItemIndex);

  const feature = new Feature({
    geometry: point,
    id,
    layerName,
    title,
    defaultStyle,
    highlightStyle
  });

  feature.setStyle(defaultStyle);

  return feature;
};

export const createStyledPointFromAbsolutScale = ({
  x,
  y,
  id,
  layerName,
  title,
  configItemIndex
}) => {
  const point = new Point([x, y]);
  const defaultStyle = getStyle(absoluteScaleStyles, configItemIndex);
  const highlightStyle = getStyle(
    absoluteScaleHighlightStyles,
    configItemIndex
  );

  const feature = new Feature({
    geometry: point,
    id,
    layerName,
    title,
    defaultStyle,
    highlightStyle
  });

  feature.setStyle(defaultStyle);

  return feature;
};

export const createStyledPointFromStatisticalLevel = ({
  x,
  y,
  id,
  title,
  configItemIndex
}) => {
  const point = new Point([x, y]);
  const defaultStyle = getStyle(statisticalLevelStyles, configItemIndex);
  const highlightStyle = getStyle(
    statisticalLevelHighlightStyles,
    configItemIndex
  );

  const feature = new Feature({
    geometry: point,
    id,
    title,
    defaultStyle,
    highlightStyle
  });

  feature.setStyle(defaultStyle);

  return feature;
};