chore: add background maps selector component. Currently with hardcod…

…ed data...
digidem · Aug 14, 2023 · 8494d0e · 8494d0e
1 parent 35472d3
commit 8494d0e
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 2 deletions.
diff --git a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import {
   Box,
   Button,
@@ -9,6 +9,23 @@ import {
 } from '@material-ui/core'
 import { defineMessages, useIntl } from 'react-intl'
 import { Close } from '@material-ui/icons'
+import { MapPreviewCard } from './MapPreviewCard'
+import { useBackgroundMapStore } from '../../../hooks/store'
+
+const STYLES = [
+  {
+    id: '7p2524cknfdg2pqntxv2qs592nd6x6xt',
+    name: 'trails-with-a-name',
+    bytesStored: 969515,
+    url: 'http://127.0.0.1:5300/styles/7p2524cknfdg2pqntxv2qs592nd6x6xt'
+  },
+  {
+    id: 'xhe52hsmq65w15emmr2zehw3d6jjtha0',
+    name: 'other-map-with-another-name',
+    bytesStored: 969515,
+    url: 'mapbox://styles/mapbox/streets-v12'
+  }
+]
 
 const m = defineMessages({
   // Title for background maps overlay
@@ -22,10 +39,15 @@ const m = defineMessages({
 export const BackgroundMapSelector = ({ active, dismiss }) => {
   const classes = useStyles()
   const { formatMessage: t } = useIntl()
+  const [mapStyle, setMapStyle] = useBackgroundMapStore(store => [
+    store.mapStyle,
+    store.setMapStyle
+  ])
 
   return (
     <Slide direction='up' in={active} mountOnEnter unmountOnExit>
       <Paper elevation={2} className={classes.container}>
+        {/* HEADER */}
         <Box className={classes.header}>
           <Typography variant='h1' className={classes.title}>
             {t(m.title)}
@@ -35,6 +57,30 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
             <Close />
           </Button>
         </Box>
+        {/* MAP STYLES ROW */}
+        <Box className={classes.styleRow}>
+          {STYLES.filter(({ isImporting }) => !isImporting).map(
+            ({ id, url, name }) => {
+              const isSelected = mapStyle === id
+              return (
+                <>
+                  <div className={classes.mapCardWrapper} key={id}>
+                    <MapPreviewCard
+                      onClick={() => {
+                        if (isSelected) return
+                        dismiss()
+                        setMapStyle(id)
+                      }}
+                      selected={isSelected}
+                      styleUrl={url}
+                      title={name}
+                    />
+                  </div>
+                </>
+              )
+            }
+          )}
+        </Box>
       </Paper>
     </Slide>
   )
@@ -44,7 +90,7 @@ const useStyles = makeStyles(theme => ({
   container: {
     borderRadius: '10px 10px 0px 0px',
     width: '100%',
-    height: '50vh',
+    minHeight: '40vh',
     position: 'absolute',
     bottom: 0,
     left: 0,
@@ -62,5 +108,12 @@ const useStyles = makeStyles(theme => ({
     fontSize: 22,
     fontWeight: 500,
     marginRight: 5
+  },
+  styleRow: {
+    display: 'flex',
+    padding: 22
+  },
+  mapCardWrapper: {
+    marginRight: 32
   }
 }))
diff --git a/src/renderer/components/MapFilter/MapView/MapPreviewCard.js b/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
@@ -0,0 +1,75 @@
+import { Box, Typography, makeStyles, useTheme } from '@material-ui/core'
+import React from 'react'
+import ReactMapboxGl from 'react-mapbox-gl'
+
+import { MAPBOX_ACCESS_TOKEN } from '../../../../../config'
+
+export const MapboxPreview = ReactMapboxGl({
+  accessToken: MAPBOX_ACCESS_TOKEN,
+  dragRotate: false,
+  pitchWithRotate: false,
+  attributionControl: false,
+  injectCSS: false
+})
+
+export const MapPreviewCard = ({ onClick, selected, styleUrl, title }) => {
+  const classes = useStyles()
+  const theme = useTheme()
+
+  return (
+    <>
+      <button className={classes.container} onClick={onClick}>
+        <div
+          style={{
+            borderColor: selected
+              ? theme.palette.primary.main
+              : theme.palette.common.white
+          }}
+          className={classes.inner}
+        >
+          <MapboxPreview
+            className={classes.thumbnail}
+            containerStyle={{
+              pointerEvents: 'none'
+            }}
+            style={styleUrl}
+            center={[-75, -0]}
+            zoom={[0]}
+          />
+        </div>
+        {title && <Typography className={classes.title}>{title}</Typography>}
+      </button>
+    </>
+  )
+}
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    border: 'none'
+  },
+  inner: {
+    borderRadius: 12,
+    borderStyle: 'solid',
+    marginBottom: 10,
+    borderWidth: 4,
+    overflow: 'hidden'
+  },
+  thumbnail: {
+    height: 80,
+    width: 80,
+    cursor: 'pointer',
+    '& .mapboxgl-control-container': {
+      display: 'none'
+    }
+  },
+  title: {
+    textAlign: 'center',
+    fontSize: 16,
+    maxWidth: 80
+  }
+}))