surveyor_indonesia_frontend/src/const/GeohrMapStyles.js

import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon as IconOl} from 'ol/style';
import pinRouteStart from '../assets/img/map/pin_route_green.png';
import pinRouteEnd from '../assets/img/map/pin_route_red.png';
import salesPin from '../assets/img/map/customer.png';
import customerPin from '../assets/img/map/store.png';
import officePin from '../assets/img/map/office.png';
import { getRandomColor } from './GeoserverFunc.js';
import { BASE_IMAGE_EMPLOYEE } from './ApiConst';

const MAX_RESOLUTION = 25;


export const SALES_FEATURES_STYLE = new Style({
  image: new IconOl({
    anchor: [0.5, 1],
    src: salesPin,
    scale: 0.03
  })
});


export const EMPLOYEE_FEATURES_STYLE = (feature) => {
  const anchor = [0.5, 1];
  const scale = 0.1;
  let iconImg = feature.get("profile_pictures") && feature.get("profile_pictures").length > 0 ? BASE_IMAGE_EMPLOYEE+feature.get("profile_pictures")[0].image : salesPin;
  var style = new Style({
    image: new IconOl({
      anchor: anchor,
      src: iconImg,
      scale: scale,
    })
  });

  var image = style.getImage().getImage();

  image.onload = () => {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, image.width, image.height);
    context.beginPath();
    var radius = Math.min(image.width, image.height)/2;
    context.arc(
      image.width/2,
      image.height/2,
      radius,
      0,
      2 * Math.PI
    );
    context.globalCompositeOperation = 'destination-in';
    context.fill();
    style.setImage(
      new IconOl({
        img: canvas,
        imgSize: [canvas.width, canvas.height],
        anchor: [
          ((anchor[0] - 0.5 ) * 2 * radius / canvas.width) + 0.5,
          ((anchor[1] - 0.5 ) * 2 * radius / canvas.height) + 0.5
        ],
        scale: scale,
      })     
    )

  }

  return style; 
}


export const CUSTOMER_FEATURES_STYLE = new Style({
  image: new IconOl({
    anchor: [0.5, 1],
    src: customerPin,
    scale: 0.03
  })
});

export const OFFICE_FEATURES_STYLE = new Style({
  image: new IconOl({
    anchor: [0.5, 1],
    src: officePin,
    scale: 0.03
  })
});



export const ROUTE_MAP_STYLES = (feature, resolution) => {
  let outputStyle = null;

  let label = feature.getProperties() && feature.getProperties().properties && feature.getProperties().properties.name ? feature.getProperties().properties.name : '';

  switch (feature.get('type')) {
    case 'route': 
      outputStyle = new Style({
        stroke: new Stroke({
          width: 6,
          color: feature.getProperties() && feature.getProperties().routeColor ? feature.getProperties().routeColor : '#000000'
        }),
        text: new Text({
          textAlign: "center",
          textBaseline: "middle",
          font: "bold 12px / 1.2 Courier New",
          text: stringDivider(label, 16, '\n'),
          fill: new Fill({color: 'green'}),
          stroke: new Stroke({color: "#ffffff", width: 3}),
          offsetX: 0,
          offsetY: 0,
          placement: "point",
          maxAngle: 0.7853981633974483, // 45 degree 
          overflow: false,
          rotation: 0,
        })
      });
    break;
    case 'pinRouteStart': 
      outputStyle = new Style({
        image: new IconOl({
          anchor: [0.5, 1],
          src: pinRouteStart,
          scale: 0.075
        }),
      });
    break;
    case 'pinRouteEnd':
      outputStyle = new Style({
        image: new IconOl({
          anchor: [0.5, 1],
          src: pinRouteEnd,
          scale: 0.075
        }),
      });
    break;
    case 'geoMarker':
      outputStyle = new Style({
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({color: 'black'}),
          stroke: new Stroke({
            color: 'white',
            width: 2,
          }),
        }),
      });
  }

  return outputStyle;
}


export const stringDivider = (str, width, spaceReplacer) => {
  if (str.length > width) {
    var p = width;
    while (p > 0 && str[p] != ' ' && str[p] != '-') {
      p--;
    }
    if (p > 0) {
      var left;
      if (str.substring(p, p + 1) == '-') {
        left = str.substring(0, p + 1);
      } else {
        left = str.substring(0, p);
      }
      var right = str.substring(p + 1);
      return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
    }
  }
  return str;
}

export const PROJECT_FEATURES_STYLE = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: '#4de800',
      opacity: 0.5
    }),
    stroke: new Stroke({color: 'blue', width: 1}),
  })
})

export const WASPANG_FEATURES_STYLE = new Style({
  image: new IconOl({
    anchor: [0.5, 1],
    src: salesPin,
    scale: 0.03
  })
});

export const LAPORAN_FEATURES_STYLE = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: '#4de800',
      opacity: 0.5
    }),
    stroke: new Stroke({color: 'blue', width: 1}),
  })
})

export const PRESENSI_FEATURES_STYLE = new Style({
  image: new IconOl({
    anchor: [0.5, 1],
    src: salesPin,
    scale: 0.03
  })
});