Add MVT debug toggle

src/components/tiles/tiles.spec.tsx

@@ -376,7 +376,7 @@ describe('TilesControl', () => {
       render(<TilesControl />);
 
       const groupSwitches = screen.getAllByRole('switch');
-      const roadsGroupSwitch = groupSwitches[2]!;
+      const roadsGroupSwitch = groupSwitches[3]!;
 
       await user.click(roadsGroupSwitch);
 
@@ -402,7 +402,7 @@ describe('TilesControl', () => {
       render(<TilesControl />);
 
       const groupSwitches = screen.getAllByRole('switch');
-      const waterGroupSwitch = groupSwitches[1]!;
+      const waterGroupSwitch = groupSwitches[2]!;
 
       await user.click(waterGroupSwitch);
       await user.click(waterGroupSwitch);

src/components/tiles/tiles.tsx

@@ -34,6 +34,7 @@ export const TilesControl = () => {
     Record<string, boolean>
   >({});
   const [styleVersion, setStyleVersion] = useState(0);
+  const [showTileBoundaries, setShowTileBoundaries] = useState(false);
 
   useEffect(() => {
     if (!mainMap) return;
@@ -53,6 +54,13 @@ export const TilesControl = () => {
     };
   }, [mainMap]);
 
+  useEffect(() => {
+    if (!mainMap) return;
+
+    const map = mainMap.getMap();
+    setShowTileBoundaries(map.showTileBoundaries || false);
+  }, [mainMap]);
+
   const layers = useMemo(() => {
     if (!mapReady || !mainMap) return [];
 
@@ -143,6 +151,14 @@ export const TilesControl = () => {
     setVisibilityOverrides((prev) => ({ ...prev, ...updates }));
   };
 
+  const handleToggleTileBoundaries = (checked: boolean) => {
+    if (!mainMap) return;
+
+    const map = mainMap.getMap();
+    map.showTileBoundaries = checked;
+    setShowTileBoundaries(checked);
+  };
+
   const toggleExpanded = (sourceLayer: string) => {
     setExpandedGroups((prev) => {
       const next = new Set(prev);
@@ -177,6 +193,20 @@ export const TilesControl = () => {
     <div className="flex flex-col gap-3 flex-1 overflow-hidden min-h-0">
       <ValhallaLayersToggle />
 
+      <div className="flex items-center justify-between gap-3 p-3 bg-muted/50 rounded-md">
+        <Label
+          htmlFor="mvt-debug-toggle"
+          className="text-sm font-medium cursor-pointer"
+        >
+          MVT Debug
+        </Label>
+        <Switch
+          id="mvt-debug-toggle"
+          checked={showTileBoundaries}
+          onCheckedChange={handleToggleTileBoundaries}
+        />
+      </div>
+
       <Input
         type="text"
         placeholder="Search layers..."

src/components/tiles/valhalla-layers-toggle.spec.tsx

@@ -77,26 +77,6 @@ describe('ValhallaLayersToggle', () => {
       expect(screen.getByText('Append Valhalla layers')).toBeInTheDocument();
     });
 
-    it('should render description text', () => {
-      render(<ValhallaLayersToggle />);
-
-      expect(
-        screen.getByText(/Overlay Valhalla routing graph tiles/)
-      ).toBeInTheDocument();
-    });
-
-    it('should render Tile API link', () => {
-      render(<ValhallaLayersToggle />);
-
-      const link = screen.getByRole('link', { name: 'Tile API' });
-      expect(link).toHaveAttribute(
-        'href',
-        'https://valhalla.github.io/valhalla/api/tile/api-reference/'
-      );
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
     it('should render switch in unchecked state by default', () => {
       render(<ValhallaLayersToggle />);
 

src/components/tiles/valhalla-layers-toggle.tsx

@@ -64,33 +64,19 @@ export const ValhallaLayersToggle = () => {
   }
 
   return (
-    <div className="flex flex-col gap-2 p-3 bg-muted/50 rounded-md">
-      <div className="flex items-center justify-between gap-3">
-        <Label
-          htmlFor="valhalla-layers-toggle"
-          className="text-sm font-medium cursor-pointer"
-        >
-          Append Valhalla layers
-        </Label>
-        <Switch
-          id="valhalla-layers-toggle"
-          checked={enabled}
-          onCheckedChange={handleToggle}
-          className="data-[state=checked]:bg-green-600"
-        />
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Overlay Valhalla routing graph tiles showing edges and nodes. Uses the{' '}
-        <a
-          href="https://valhalla.github.io/valhalla/api/tile/api-reference/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary underline hover:no-underline"
-        >
-          Tile API
-        </a>{' '}
-        to visualize the routing network with color-coded tile levels.
-      </p>
+    <div className="flex items-center justify-between gap-3 p-3 bg-muted/50 rounded-md">
+      <Label
+        htmlFor="valhalla-layers-toggle"
+        className="text-sm font-medium cursor-pointer"
+      >
+        Append Valhalla layers
+      </Label>
+      <Switch
+        id="valhalla-layers-toggle"
+        checked={enabled}
+        onCheckedChange={handleToggle}
+        className="data-[state=checked]:bg-green-600"
+      />
     </div>
   );
 };