Added markers with device openers

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

@@ -0,0 +1,65 @@
+import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
+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 React, { Component } from 'react';
+import { useHistory, withRouter  } from 'react-router-dom';
+import { makeStyles } from '@material-ui/styles';
+
+class DeviceMarker extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            AnchorEl: null
+        }
+    }
+
+    getColor() {
+        const { device } = this.props;
+        if (device.status == "Online") {
+            return { color: green[500] };
+        } else if (device.status == "Offline") {
+            return { color: red[500] };
+        } else /* if (device.status == "unknown") */ {
+            return { color: yellow[500] };
+        }
+    }
+
+    useStyles() {
+        return makeStyles(theme => ({
+            root: {
+            },
+            popover: {
+                pointerEvents: 'none',
+                zIndex: 1000000
+            },
+            paper: {
+                padding: theme.spacing(1),
+            },
+        }));
+    }
+
+    render() {
+        const classes = this.useStyles(this.props);
+        const { device } = this.props;
+
+        const onClick = () => {
+            this.props.history.push('/devices/' + device.id)
+        };
+
+        const open = Boolean(this.state.AnchorEl);
+
+        return (
+            <Box>
+                <Tooltip title={<div>ID: {device.id}<br />Status: {device.status}</div>} placement="top" leaveDelay={200} arrow>
+                    <RadioButtonCheckedIcon fontSize="small" style={this.getColor()}
+                        onClick={onClick}>
+                    </RadioButtonCheckedIcon>
+                </Tooltip>
+            </Box>
+        );
+    }
+}
+
+export default withRouter(DeviceMarker);

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

@@ -2,6 +2,7 @@
 import GoogleMapReact from 'google-map-react';
 import React, { Component } from 'react';
 import DevicesService, { DeviceService } from '../devices/DeviceService'
+import DeviceMarker from './DeviceMarker'
 import { HubConnectionBuilder } from '@microsoft/signalr';
 
 const hub_url = '/hubs/devices';
@@ -100,12 +101,26 @@ export default class MapContainer extends Component {
         }
 
         const mapOptions = {
+            disableDefaultUI: true,
+            zoomControl: true,
+            mapTypeControl: true,
             overviewMapControl: true,
-            mapTypeId: 'terrain'
+            streetViewControl: false,
+            scaleControl: true,
+            mapTypeId: 'satellite'
         }
 
+        const Markers = this.state.devices.map((device, index) => (
+            <DeviceMarker
+                key={device.id}
+                lat={device.coordinates.latitude}
+                lng={device.coordinates.longitude}
+                device={device}
+            />
+        ));
+
         return (
-            <div style={{ height: '91vh', width: '100%' }}>
+            <div style={{ height: '93.5vh', width: '100%' }}>
                 <GoogleMapReact
                     bootstrapURLKeys={{
                         key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
@@ -117,6 +132,7 @@ export default class MapContainer extends Component {
                     heatmapLibrary={true}
                     heatmap={heatMapData}
                     defaultCenter={this.state.center}>
+                    {Markers}
                 </GoogleMapReact>
             </div>
         );

Birdmap.BLL/Services/DummyDeviceAndInputService.cs

@@ -10,7 +10,7 @@ namespace Birdmap.BLL.Services
 {
     public class DummyDeviceAndInputService : DeviceAndInputServiceBase
     {
-        private const int numberOfDevices = 50;
+        private const int numberOfDevices = 10;
 
         private const double centerLong = 21.469640;
         private const double centerLat = 48.275939;