All files / lib/components/Game/Screen/GPSMap/LocationMarker index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
const MARKER_DEFAULT_COLOR = '#4A89F3';
 
type Options = {
  /**
   * Use a custom style for the marker
   */
  markerStyle?: {
    clickable?: boolean;
    cursor?: string;
    draggable?: boolean;
    fillColor?: string;
    scale?: number;
    strokeWeight?: number;
    strokeColor?: string;
    optimized?: boolean;
  };
  /**
   * If true, a shape that grows with position accuracy is showed
   */
  showAccuracyRadius?: boolean;
};
 
export default class LocationMarker {
  map: google.maps.Map;
 
  options: Options;
 
  innerCircle: google.maps.Marker;
 
  outerCircle: google.maps.Circle;
 
  constructor(map: google.maps.Map, options: Options = {}) {
    this.map = map;
    this.options = options;
 
    const { markerStyle } = options;
 
    this.innerCircle = new google.maps.Marker({
      map,
      clickable: markerStyle?.clickable ?? false,
      cursor: markerStyle?.cursor ?? 'pointer',
      draggable: markerStyle?.draggable ?? false,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: markerStyle?.fillColor ?? MARKER_DEFAULT_COLOR,
        fillOpacity: 1,
        scale: markerStyle?.scale ?? 6,
        strokeWeight: markerStyle?.strokeWeight ?? 2,
        strokeColor: markerStyle?.strokeColor ?? 'white'
      },
      optimized: false,
      zIndex: 999
    });
 
    this.outerCircle = new google.maps.Circle({
      map,
      fillColor: options.markerStyle?.fillColor ?? MARKER_DEFAULT_COLOR,
      fillOpacity: 0.1,
      strokeWeight: 0
    });
    this.outerCircle.bindTo('center', this.innerCircle, 'position');
  }
 
  /**
   * Updates marker position in the map.
   * @param pos Marker position
   * @param moveToCenter If true, the map is centered on the marker positions
   */
  update(pos: GeolocationPosition, moveToCenter = false): void {
    const latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
 
    this.innerCircle.setPosition(latLng);
    if (!this.options.showAccuracyRadius) {
      this.outerCircle.setCenter(latLng);
      this.outerCircle.setRadius(pos.coords.accuracy);
    }
 
    if (moveToCenter) {
      this.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    }
  }
 
  /**
   * Centers map on current marker position
   */
  center(): void {
    const pos = this.innerCircle.getPosition();
    if (pos) {
      this.map.setCenter(pos);
    }
  }
}