Added position offset, changed color

Birdmap.API/ClientApp/src/components/heatmap/DeviceMarker.jsx

@@ -1,7 +1,8 @@
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
 import { shadows } from '@material-ui/system';
-import { Box, Popover, Typography, Tooltip } from '@material-ui/core';
-import { green, red, yellow } from '@material-ui/core/colors';
+import { Box, Popover, Typography, Tooltip, Grid } from '@material-ui/core';
+import { blue, red, yellow } from '@material-ui/core/colors';
 import React, { Component } from 'react';
 import { useHistory, withRouter  } from 'react-router-dom';
 import { makeStyles } from '@material-ui/styles';
@@ -18,25 +19,22 @@ class DeviceMarker extends Component {
     getColor() {
         const { device } = this.props;
         if (device.status == "Online") {
-            return { color: green[500] };
+            return { color: blue[800] };
         } else if (device.status == "Offline") {
-            return { color: red[500] };
+            return { color: yellow[800] };
         } else /* if (device.status == "unknown") */ {
-            return { color: yellow[500] };
+            return { color: red[800] };
         }
     }
 
     useStyles() {
         return makeStyles(theme => ({
             root: {
+                display: 'grid'
             },
-            popover: {
-                pointerEvents: 'none',
-                zIndex: 1000000
-            },
-            paper: {
-                padding: theme.spacing(1),
-            },
+            icon: {
+
+            }
         }));
     }
 
@@ -51,7 +49,7 @@ class DeviceMarker extends Component {
         const open = Boolean(this.state.AnchorEl);
 
         return (
-            <Box>
+            <Box className={classes.root} boxShadow={5}>
                 <Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
                     <RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
                         onClick={onClick}>

Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx

@@ -9,6 +9,9 @@ const hub_url = '/hubs/devices';
 const probability_method_name = 'NotifyDeviceAsync';
 const update_method_name = 'NotifyDeviceUpdatedAsync';
 const update_all_method_name = 'NotifyAllUpdatedAsync';
+const lat_offset = 0.000038;
+const lng_offset = -0.000058;
+const heatmapPoints_session_name = 'heatmapPoints';
 
 export default class MapContainer extends Component {
     constructor(props) {
@@ -88,6 +91,7 @@ export default class MapContainer extends Component {
             this.state.connection.off(probability_method_name);
             this.state.connection.off(update_all_method_name);
             this.state.connection.off(update_method_name);
+            console.log('Hub Disconnected!');
         }
     }
 
@@ -113,8 +117,8 @@ export default class MapContainer extends Component {
         const Markers = this.state.devices.map((device, index) => (
             <DeviceMarker
                 key={device.id}
-                lat={device.coordinates.latitude}
-                lng={device.coordinates.longitude}
+                lat={device.coordinates.latitude + lat_offset}
+                lng={device.coordinates.longitude + lng_offset}
                 device={device}
             />
         ));