Add toggle control showing tile boundaries to demo

carbonplan · May 23, 2022 · 449f4d9 · 449f4d9
1 parent 62ed06e
commit 449f4d9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/demo/components/parameter-controls.js b/demo/components/parameter-controls.js
@@ -1,4 +1,4 @@
-import { Box } from 'theme-ui'
+import { Box, Flex } from 'theme-ui'
 import { useCallback } from 'react'
 import { Slider, Badge, Toggle, Select, Link } from '@carbonplan/components'
 import { colormaps } from '@carbonplan/colormaps'
@@ -24,9 +24,10 @@ const DEFAULT_COLORMAPS = {
 }
 
 const ParameterControls = ({ getters, setters }) => {
-  const { display, opacity, clim, month, band, colormapName } = getters
+  const { display, debug, opacity, clim, month, band, colormapName } = getters
   const {
     setDisplay,
+    setDebug,
     setOpacity,
     setClim,
     setMonth,
@@ -44,12 +45,31 @@ const ParameterControls = ({ getters, setters }) => {
   return (
     <>
       <Box sx={{ position: 'absolute', top: 20, right: 20 }}>
-        <Box sx={{ ...sx.label, mt: [0] }}>Display</Box>
-        <Toggle
-          sx={{ float: 'right', mt: [2] }}
-          value={display}
-          onClick={() => setDisplay((prev) => !prev)}
-        />
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            gap: 4,
+          }}
+        >
+          <Box>
+            <Box sx={{ ...sx.label, mt: [0] }}>Tile boundaries</Box>
+            <Toggle
+              sx={{ float: 'right', mt: [2] }}
+              value={debug}
+              onClick={() => setDebug((prev) => !prev)}
+            />
+          </Box>
+
+          <Box>
+            <Box sx={{ ...sx.label, mt: [0] }}>Display</Box>
+            <Toggle
+              sx={{ display: 'block', float: 'right', mt: [2] }}
+              value={display}
+              onClick={() => setDisplay((prev) => !prev)}
+            />
+          </Box>
+        </Flex>
       </Box>
       <Box sx={{ position: 'absolute', top: 20, left: 20 }}>
         <Box sx={{ ...sx.label, mt: [0] }}>Opacity</Box>

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -15,7 +15,7 @@
     "@carbonplan/colormaps": "^2.0.0",
     "@carbonplan/components": "^10.0.0",
     "@carbonplan/icons": "^1.0.0",
-    "@carbonplan/maps": "^2.1.1",
+    "@carbonplan/maps": "^2.1.2",
     "@carbonplan/theme": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",

diff --git a/demo/pages/index.js b/demo/pages/index.js
@@ -11,6 +11,7 @@ const bucket = 'https://storage.googleapis.com/carbonplan-maps/'
 const Index = () => {
   const { theme } = useThemeUI()
   const [display, setDisplay] = useState(true)
+  const [debug, setDebug] = useState(false)
   const [opacity, setOpacity] = useState(1)
   const [clim, setClim] = useState([-20, 30])
   const [month, setMonth] = useState(1)
@@ -20,9 +21,10 @@ const Index = () => {
   const [showRegionPicker, setShowRegionPicker] = useState(false)
   const [regionData, setRegionData] = useState({ loading: true })
 
-  const getters = { display, opacity, clim, month, band, colormapName }
+  const getters = { display, debug, opacity, clim, month, band, colormapName }
   const setters = {
     setDisplay,
+    setDebug,
     setOpacity,
     setClim,
     setMonth,
@@ -40,7 +42,7 @@ const Index = () => {
         title={'@carbonplan/maps'}
       />
       <Box sx={{ position: 'absolute', top: 0, bottom: 0, width: '100%' }}>
-        <Map zoom={2} center={[0, 0]} debug={false}>
+        <Map zoom={2} center={[0, 0]} debug={debug}>
           <Line
             color={theme.rawColors.primary}
             source={bucket + 'basemaps/land'}