Add a satellite view to the map

Summary: Add a street and satellite icon button to the map view,  enabling the user to switch between satellite/street view on the Inventory Map page.

Reviewed By: noamsch

Differential Revision: D16603358

fbshipit-source-id: f623ec74964e3a4015992da8cc2dab0a5640b47a

nms/fbcnms-packages/fbcnms-ui/components/map/MapButton.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+import React from 'react';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  button: {
+    background: theme.palette.background.default,
+    color: 'black',
+    borderRight: '1px solid #ddd',
+    borderRadius: '4px',
+    width: '30px',
+    height: '30px',
+    border: 0,
+  },
+}));
+
+type Props = {
+  onClick: () => void,
+  children: any,
+};
+
+const MapButton = (props: Props) => {
+  const {onClick} = props;
+  const classes = useStyles();
+
+  return (
+    <ToggleButton value={1} className={classes.button} onClick={onClick}>
+      {props.children}
+    </ToggleButton>
+  );
+};
+
+export default MapButton;

nms/fbcnms-packages/fbcnms-ui/components/map/MapToggleButtonGroup.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react';
+import ToggleButtonGroup from '@material-ui/core/Typography';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  toggleGroup: {
+    boxShadow: '0px 0px 0.5px 0.5px grey',
+    borderRadius: '4px',
+  },
+});
+
+type Props = {children: any};
+
+const MapToggleButtonGroup = (props: Props) => {
+  const classes = useStyles();
+
+  return (
+    <ToggleButtonGroup className={classes.toggleGroup}>
+      {props.children}
+    </ToggleButtonGroup>
+  );
+};
+
+export default MapToggleButtonGroup;

nms/fbcnms-packages/fbcnms-ui/components/map/MapToggleContainer.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react';
+import {makeStyles} from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  toggleContainer: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    justifyContent: 'flex-start',
+    background: theme.palette.background.default,
+    padding: 0,
+    border: 0,
+    margin: '10px',
+    position: 'absolute',
+    bottom: '0',
+    left: 0,
+    borderStyle: 'solid',
+    borderRadius: '4px',
+  },
+}));
+
+type Props = {children: any};
+
+const MapToggleContainer = (props: Props) => {
+  const classes = useStyles();
+  return <div className={classes.toggleContainer}>{props.children}</div>;
+};
+
+export default MapToggleContainer;