From 449f4d93e660b82f08fcc08aab604e6e36f7b825 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Mon, 23 May 2022 16:21:04 -0700
Subject: [PATCH] Add toggle control showing tile boundaries to demo

---
 demo/components/parameter-controls.js | 36 +++++++++++++++++++++------
 demo/package-lock.json                | 14 +++++------
 demo/package.json                     |  2 +-
 demo/pages/index.js                   |  6 +++--
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/demo/components/parameter-controls.js b/demo/components/parameter-controls.js
index e2b893e..4542f6d 100644
--- 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
index b74854b..5046d32 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -12,7 +12,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",
@@ -481,9 +481,9 @@
       }
     },
     "node_modules/@carbonplan/maps": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@carbonplan/maps/-/maps-2.1.1.tgz",
-      "integrity": "sha512-lnlfP8lzA4Ti9we3uhl2iWiaioQD1sFTLB4acLustnKBTfnBGltE6VojCYpKBdESAc19QGwMUWcWnnaXvzPQUw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@carbonplan/maps/-/maps-2.1.2.tgz",
+      "integrity": "sha512-0NqF8tH0whl7ix83AxjMETlxo3dlaL+y4Kvr00Mxk4llx8n9nEKcLwOyTOPqTyyrU29upDRnOqFGX4hd+dDzkA==",
       "dependencies": {
         "@turf/turf": "^6.5.0",
         "d3-array": "^2.12.1",
@@ -6436,9 +6436,9 @@
       "requires": {}
     },
     "@carbonplan/maps": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@carbonplan/maps/-/maps-2.1.1.tgz",
-      "integrity": "sha512-lnlfP8lzA4Ti9we3uhl2iWiaioQD1sFTLB4acLustnKBTfnBGltE6VojCYpKBdESAc19QGwMUWcWnnaXvzPQUw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@carbonplan/maps/-/maps-2.1.2.tgz",
+      "integrity": "sha512-0NqF8tH0whl7ix83AxjMETlxo3dlaL+y4Kvr00Mxk4llx8n9nEKcLwOyTOPqTyyrU29upDRnOqFGX4hd+dDzkA==",
       "requires": {
         "@turf/turf": "^6.5.0",
         "d3-array": "^2.12.1",
diff --git a/demo/package.json b/demo/package.json
index 8d66277..f1d800c 100644
--- 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
index 9ad17d1..1642e43 100644
--- 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'}