Added tabs to display different maps

Author: Vamshi Maddur

src/App.jsx

@@ -8,6 +8,7 @@ import {
  CssBaseline,
  useMediaQuery,
 } from "@material-ui/core";
+import TabContext from "@material-ui/lab/TabContext";
 import Layout from "./components/Layout";
 import Landing from "./pages/Landing";
 
@@ -18,29 +19,32 @@ function App() {
  ]);
 
  const [currentTheme, setCurrentTheme] = useState("light");
- const [currentMap, setCurrentMap] = useState("google");
+ const [currentTab, setCurrentTab] = React.useState(1);
+
+ const handleTabChange = (event, newValue) => {
+ setCurrentTab(newValue);
+ };
 
  const handleThemeChange = () => {
  if (currentTheme === "light") setCurrentTheme("dark");
  else setCurrentTheme("light");
  };
 
- const handleMapsRendererChange = () => {
- setCurrentMap(currentMap === "google" ? "mapbox" : "google");
- };
-
  theme = React.useMemo(() => myTheme(currentTheme), [currentTheme]);
  return (
  <ThemeProvider theme={theme}>
  <StylesProvider injectFirst>
  <MuiThemeProvider theme={theme}>
  <CssBaseline />
- <Layout
- handleThemeChange={handleThemeChange}
- handleMapsRendererChange={handleMapsRendererChange}
- >
- <Landing currentTheme={currentTheme} currentMap={currentMap} />
- </Layout>
+ <TabContext value={currentTab}>
+ <Layout
+ currentTab={currentTab}
+ handleThemeChange={handleThemeChange}
+ handleTabChange={handleTabChange}
+ >
+ <Landing currentTheme={currentTheme} />
+ </Layout>
+ </TabContext>
  </MuiThemeProvider>
  </StylesProvider>
  </ThemeProvider>

src/components/GoogleMap.jsx

@@ -4,11 +4,15 @@ import styled from "styled-components";
 
 const MapContainer = styled.div`
  position: absolute;
- top: 0;
+ top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Nunito;
+ height: 75%;
+ margin: 12px;
+ border-radius: 8px;
+ border: 2px solid #fff;
 `;
 
 function GoogleMap({ options, onMount, className, onMountProps }) {

src/components/Layout/Header.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { AppBar, Toolbar } from "@material-ui/core";
+import { AppBar, Toolbar, withStyles, Tabs, Tab } from "@material-ui/core";
 import ThemeSwitch from "components/ThemeSwitch";
-import MapSwitch from "components/MapSwitch";
 
 const AppTitle = styled.h3`
  font-weight: 700;
@@ -17,17 +16,55 @@ const ToolbarControls = styled.div`
  align-items: center;
 `;
 
+const StyledTabs = withStyles({
+ indicator: {
+ display: "flex",
+ justifyContent: "center",
+ backgroundColor: "transparent",
+ height: 4,
+ "& > span": {
+ maxWidth: 40,
+ width: "100%",
+ backgroundColor: "#fff",
+ borderRadius: 8,
+ },
+ },
+})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);
+
+const StyledTab = withStyles((theme) => ({
+ root: {
+ textTransform: "none",
+ color: "#fff",
+ fontWeight: theme.typography.fontWeightRegular,
+ fontSize: theme.typography.pxToRem(12),
+ marginRight: theme.spacing(1),
+ minWidth: 80,
+ "&:focus": {
+ opacity: 1,
+ },
+ },
+}))((props) => <Tab disableRipple {...props} />);
+
 export default function Header({
+ currentTab,
  handleThemeChange,
- handleMapsRendererChange,
+ handleTabChange,
 }) {
  return (
  <AppBar position="fixed">
  <Toolbar>
- <AppTitle>Navigator</AppTitle>
+ <AppTitle>Implement Maps in React</AppTitle>
  <Grow />
  <ToolbarControls>
- <MapSwitch handleMapsRendererChange={handleMapsRendererChange} />
+ <StyledTabs
+ value={currentTab}
+ onChange={handleTabChange}
+ aria-label="styled tabs example"
+ >
+ <StyledTab label="Google Maps API" />
+ <StyledTab label="MapBox GL" />
+ <StyledTab label="@react-google-maps" />
+ </StyledTabs>
  <ThemeSwitch handleThemeChange={handleThemeChange} />
  </ToolbarControls>
  </Toolbar>

src/components/Layout/index.jsx

@@ -11,15 +11,17 @@ const Container = styled.div`
 `;
 
 export default function Layout({
+ currentTab,
  children,
  handleThemeChange,
- handleMapsRendererChange,
+ handleTabChange,
 }) {
  return (
  <Container>
  <Header
+ currentTab={currentTab}
  handleThemeChange={handleThemeChange}
- handleMapsRendererChange={handleMapsRendererChange}
+ handleTabChange={handleTabChange}
  />
  <Content>{children}</Content>
  </Container>

src/components/Map.jsx

@@ -1,14 +1,26 @@
 import React from "react";
-import {
- GoogleMap,
- useLoadScript
-} from "@react-google-maps/api";
+import { GoogleMap, useLoadScript } from "@react-google-maps/api";
+import styled from "styled-components";
 
 const libraries = ["places"];
 
+const MapContainer = styled.div`
+ position: absolute;
+ top: 64px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-family: Nunito;
+ height: 75%;
+ margin: 12px;
+ border-radius: 8px;
+ border: 2px solid #fff;
+`;
+
 const mapContainerStyle = {
- width: "100vw",
- height: "100vh",
+ width: "inherit",
+ height: "100%",
+ borderRadius: 8,
 };
 
 const center = {
@@ -26,10 +38,12 @@ export default function Map() {
  if (!isLoaded) return <div>Loading...</div>;
 
  return (
- <GoogleMap
- mapContainerStyle={mapContainerStyle}
- zoom={15}
- center={center}
- ></GoogleMap>
+ <MapContainer>
+ <GoogleMap
+ mapContainerStyle={mapContainerStyle}
+ zoom={15}
+ center={center}
+ ></GoogleMap>
+ </MapContainer>
  );
 }

src/components/MapBox.jsx

@@ -14,11 +14,15 @@ const defaultLocation = {
 
 const MapContainer = styled.div`
  position: absolute;
- top: 0;
+ top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Nunito;
+ height: 75%;
+ margin: 12px;
+ border-radius: 8px;
+ border: 2px solid #fff;
 `;
 
 export default function MapBox({ currentTheme }) {

src/components/ThemeSwitch/index.jsx

@@ -3,7 +3,7 @@ import "./style.scss";
 
 export default function ThemeSwitch({ handleThemeChange }) {
  return (
- <div style={{ display: "flex", alignItems: "center", marginRight: 12 }}>
+ <div style={{ display: "flex", alignItems: "center", margin: '0 12px 0 24px' }}>
  <input
  className="switch-input"
  id="theme-switch"

src/pages/Landing/index.jsx

@@ -1,16 +1,21 @@
 import React from "react";
+import TabPanel from "@material-ui/lab/TabPanel";
 import Map from "components/Map";
 import MapBox from "components/MapBox";
 import GoogleMap from "components/GoogleMap";
 
-export default function Landing({ currentTheme, currentMap }) {
+export default function Landing({ currentTheme }) {
  return (
  <div>
- {currentMap === "google" ? (
+ <TabPanel value={0}>
  <GoogleMap />
- ) : (
+ </TabPanel>
+ <TabPanel value={1}>
  <MapBox currentTheme={currentTheme} />
- )}
+ </TabPanel>
+ <TabPanel value={2}>
+ <Map />
+ </TabPanel>
  </div>
  );
 }