From b0fe16847e7a5a331edd826cd43f63af38ef4c71 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Thu, 1 Dec 2022 17:31:46 +0800
Subject: [PATCH] inspector: default to map view with tile boundaries [#49]

---
 app/src/Loader.tsx      | 8 ++++----
 app/src/MaplibreMap.tsx | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx
index 0ab63af8..63f90fb7 100644
--- a/app/src/Loader.tsx
+++ b/app/src/Loader.tsx
@@ -110,7 +110,7 @@ const ToolbarToggleGroup = StyledToggleGroup;
 const ToolbarToggleItem = StyledToggleItem;
 
 function Loader(props: { file: PMTiles }) {
-  let [tab, setTab] = useState("inspector");
+  let [tab, setTab] = useState("maplibre");
   let [metadata, setMetadata] = useState<[string, string][]>([]);
   let [modalOpen, setModalOpen] = useState<boolean>(false);
 
@@ -156,12 +156,12 @@ function Loader(props: { file: PMTiles }) {
           value={tab}
           onValueChange={setTab}
         >
-          <ToolbarToggleItem value="inspector" aria-label="Left aligned">
-            <MagnifyingGlassIcon /> Tile Inspector
-          </ToolbarToggleItem>
           <ToolbarToggleItem value="maplibre" aria-label="Right aligned">
             Map View
           </ToolbarToggleItem>
+          <ToolbarToggleItem value="inspector" aria-label="Left aligned">
+            <MagnifyingGlassIcon /> Tile Inspector
+          </ToolbarToggleItem>
         </ToolbarToggleGroup>
         <ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>
           {props.file.source.getKey()}
diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
index d0856cc6..6214b4c4 100644
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -114,6 +114,7 @@ function MaplibreMap(props: { file: PMTiles }) {
         layers: [],
       },
     });
+    map.showTileBoundaries = true;
     map.addControl(new maplibregl.NavigationControl({}));
     map.on("load", map.resize);