ui: use <Marker> instead of <Circlr>

Author: micooz

ui/src/containers/Services/Log/GoogleMap/GoogleMap.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { compose, withProps, withStateHandlers } from 'recompose';
-import { withScriptjs, withGoogleMap, GoogleMap, Circle, Polyline, InfoWindow } from 'react-google-maps';
+import { withScriptjs, withGoogleMap, GoogleMap, Marker, Polyline, InfoWindow } from 'react-google-maps';
 
 import styles from './GoogleMap.module.scss';
 import { GOOGLE_MAP_API_KEY } from '../../../../constants';
@@ -34,7 +34,7 @@ const Map = compose(
   withProps({
     googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
     loadingElement: <div style={{ height: '100%' }}/>,
-    containerElement: <div style={{ height: '500px' }}/>,
+    containerElement: <div style={{ height: '650px' }}/>,
     mapElement: <div style={{ height: '100%' }}/>,
   }),
   withStateHandlers(() => ({
@@ -64,17 +64,16 @@ const Map = compose(
     defaultCenter={defaultCenter}
   >
     {ips.map((item, index) =>
-      <Circle
+      <Marker
         key={index}
         onClick={() => onToggleInfoWindow(infoWindow.display, item)}
         options={{
-          center: { lat: item.lat, lng: item.lng },
-          radius: 30000,
-          fillColor: item.self ? '#ff0000' : '#0000ff',
-          fillOpacity: 0.6,
-          strokeWeight: 1,
-          strokeOpacity: 0.8,
-          strokeColor: item.self ? '#ff0000' : '#0000ff',
+          position: { lat: item.lat, lng: item.lng },
+          icon: item.self ? '' : {
+            url: require('./destination.png'),
+            scaledSize: { width: 16, height: 16 },
+            anchor: { x: 8, y: 8 },
+          },
         }}
       />
     )}
@@ -84,8 +83,7 @@ const Map = compose(
         options={{
           path: [defaultCenter, { lat: item.lat, lng: item.lng }],
           strokeWeight: 1,
-          strokeOpacity: 0.8,
-          strokeColor: item.inbound ? '#FFC940' : '#669EFF',
+          strokeColor: item.inbound ? '#ff8d1f' : '#6b6d70',
         }}
       />
     )}
@@ -125,7 +123,7 @@ export default class _GoogleMap extends React.Component {
 
   render() {
     const { ips } = this.state;
-    const self = ips.filter(({ self }) => self)[0] || { lat: 0, lng: 0 };
+    const self = ips.filter(({ self }) => self)[0] || { lat: 21.289, lng: -175.253 };
     return (
       <div className={styles.container}>
         <Map

ui/src/containers/Services/Log/GoogleMap/GoogleMap.module.scss

@@ -1,12 +1,5 @@
 .container {
 
-  .circle {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: red;
-  }
-
   .infoWindow {
     list-style: none;
     margin: 0;