Skip to content

Add MVT debug toggle #355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nilsnolde merged 5 commits into from
Mar 8, 2026
Merged

Add MVT debug toggle #355

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a49a8f4
feat: add MVT debug toggle
thisisharsh7 Mar 6, 2026
4802582
test: update switch indices for MVT debug toggle
thisisharsh7 Mar 6, 2026
37cf79a
refactor: remove subtext from toggle controls
thisisharsh7 Mar 7, 2026
9950bf8
test: remove description text tests
thisisharsh7 Mar 7, 2026
f4d86aa
Merge branch 'master' into feat/mvt-debug-toggle
nilsnolde Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/tiles/tiles.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);
Expand Down
45 changes: 45 additions & 0 deletions src/components/tiles/tiles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const TilesControl = () => {
Record<string, boolean>
>({});
const [styleVersion, setStyleVersion] = useState(0);
const [showTileBoundaries, setShowTileBoundaries] = useState(false);

useEffect(() => {
if (!mainMap) return;
Expand All @@ -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 [];

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -177,6 +193,35 @@ export const TilesControl = () => {
<div className="flex flex-col gap-3 flex-1 overflow-hidden min-h-0">
<ValhallaLayersToggle />

<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="mvt-debug-toggle"
className="text-sm font-medium cursor-pointer"
>
MVT Debug
</Label>
<Switch
id="mvt-debug-toggle"
checked={showTileBoundaries}
onCheckedChange={handleToggleTileBoundaries}
/>
</div>
<p className="text-xs text-muted-foreground">
Display tile grid overlay with coordinates and file sizes. Uses
MapLibre&apos;s{' '}
<a
href="https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#showtileboundaries"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline hover:no-underline"
>
debug mode
</a>{' '}
for inspecting map tiles.
</p>
Copy link
Member

@nilsnolde nilsnolde Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should remove the subtext from both input controls IMO. it's quite obvious what both do once they're toggled

</div>

<Input
type="text"
placeholder="Search layers..."
Expand Down