dyomedea/src/components/gpx/styles.ts

import { Circle, Fill, Text, Icon, Stroke, Style } from 'ol/style';
import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg';
import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg';
import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg';
import { Feature } from 'ol';

const trackStrokeStyle = new Stroke({
  color: 'blue',
  width: 2,
});

const trtksegStartImageStyle = new Icon({
  src: startIcon,
  scale: 0.2,
  opacity: 0.6,
  anchor: [0.5, 1],
});

const trtksegFinishImageStyle = new Icon({
  src: finishIcon,
  scale: 0.2,
  opacity: 0.6,
  anchor: [0.5, 1],
});

const wptImageStyle = new Icon({
  src: wptIcon,
  scale: 0.1,
  opacity: 0.8,
  anchor: [0.5, 1],
});

const textStroke = new Stroke({
  color: '#fff',
  width: 3,
});
const textFill = new Fill({
  color: '#000',
});

const wptTextStyle = (feature: Feature) =>
  new Text({
    font: '16px Calibri,sans-serif',
    text: feature.get('name'),
    fill: textFill,
    stroke: textStroke,
    offsetY: -40,
  });

const trtksegStyle = new Style({ stroke: trackStrokeStyle });
const trtksegStartStyle = new Style({ image: trtksegStartImageStyle });
const trtksegFinishStyle = new Style({ image: trtksegFinishImageStyle });

const wptStyle = (feature: Feature) =>
  new Style({ image: wptImageStyle, text: wptTextStyle(feature) });

export const style = (feature: Feature, resolution: number) => {
  const type = feature.get('type');
  if (type === 'trkseg') {
    return trtksegStyle;
  }
  if (type === 'trkseg-start') {
    return trtksegStartStyle;
  }
  if (type === 'trkseg-finish') {
    return trtksegFinishStyle;
  }
  if (type === 'wpt') {
    return wptStyle(feature);
  }
};

export default style;