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 CircleStyle({
//     radius: 5,
//     fill: null,
//     stroke: new Stroke({color: 'blue', width: 1}),
//   })
// })

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

// export const EMPLOYEE_FEATURES_STYLE = new Style({
//   image: new IconOl({
//     anchor: [0.5, 1],
//     src: salesPin,
//     // src: "https://oslog.id/geohr-api/assets/images/employee/d7c6259c-9a78-4530-b2ec-1d1be9411c46-0.png",
//     scale: 0.03
//   })
// });

export const EMPLOYEE_FEATURES_STYLE = (feature) => {
  const anchor = [0.5, 1];
  const scale = 0.1;
  // console.log('feature.get', feature.get("profile_pictures"));
  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,
      // src: "https://oslog.id/geohr-api/assets/images/employee/d7c6259c-9a78-4530-b2ec-1d1be9411c46-0.png",
      scale: scale,
      // graphicHeight: 32,
      // graphicWidth: 32,
      // size: [50, 50],
      // imgSize: [50, 50],
      // offset: [50, 50]
      // anchor: [0.5, 46],
      // anchorXUnits: 'fraction',
      // anchorYUnits: 'pixels',
      // crossOrigin: 'anonymous'
    })
  });

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

    // console.log('canvas', canvas);
    // return style;
  }

  return style; 
}

// export const CUSTOMER_FEATURES_STYLE = new Style({
//   image: new CircleStyle({
//     radius: 5,
//     fill: null,
//     // fill: new Fill({
//     //   color: '#db1414',
//     //   opacity: 0.5
//     // }),
//     stroke: new Stroke({color: 'green', width: 1}),
//   })
// })

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 OFFICE_FEATURES_STYLE = new Style({
//   image: new CircleStyle({
//     radius: 5,
//     fill: null,
//     // fill: new Fill({
//     //   color: '#db1414',
//     //   opacity: 0.5
//     // }),
//     stroke: new Stroke({color: 'red', width: 1}),
//   })
// })

// export const ROUTE_MAP_STYLES = {
//   'route': new Style({
//     stroke: new Stroke({
//       width: 6,
//       color: getRandomColor()
//     }),
//     text: new Text({
//       textAlign: "center",
//       textBaseline: "middle",
//       font: "bold 12px / 1.2 Courier New",
//       text: "Route Sales 1",
//       // fill: new Fill({color: "#000000"}),
//       stroke: new Stroke({color: "ffffff", width: 0.5}),
//       offsetX: 0,
//       offsetY: 0,
//       placement: "point",
//       maxAngle: 0.7853981633974483, // 45 degree 
//       overflow: false,
//       rotation: 0,
//     })
//   }),
//   'pinRouteStart': new Style({
//     image: new IconOl({
//       anchor: [0.5, 1],
//       src: pinRouteStart,
//       scale: 0.075
//     }),
//   }),
//   'pinRouteEnd': new Style({
//     image: new IconOl({
//       anchor: [0.5, 1],
//       src: pinRouteEnd,
//       scale: 0.075
//     }),
//   }),
//   'geoMarker': new Style({
//     image: new CircleStyle({
//       radius: 7,
//       fill: new Fill({color: 'black'}),
//       stroke: new Stroke({
//         color: 'white',
//         width: 2,
//       }),
//     }),
//   }),
// };

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

  // console.log('ROUTE_MAP_STYLES feature', feature, resolution);
  // console.log('ROUTE_MAP_STYLES get type', feature.get('type'));
  // console.log('ROUTE_MAP_STYLES resolution', resolution);
  // let label = feature.get('properties') && feature.get('properties').name ? feature.get('properties').name : '';
  let label = feature.getProperties() && feature.getProperties().properties && feature.getProperties().properties.name ? feature.getProperties().properties.name : '';
  // let label = feature.getProperties();
  // console.log('label', label);

  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: resolution > MAX_RESOLUTION ? '' : stringDivider(label, 16, '\n'),
          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: '#188FFD',
      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: '#188FFD',
      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
  })
});