inspector: default to map view with tile boundaries [#49]

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()}

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);