How do I install the Panel Map skill?

Run npx skillmds@latest add lichtblick-suite/panel-map in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Panel Map safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Panel Map?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Panel Map free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Panel Map?

lichtblick-suite (@lichtblick-suite) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Panel Map by lichtblick-suite — Agent Skill

Name: Panel Map
Author: lichtblick-suite

File contents

Panel Map Skill

A geographic visualization tool built on Leaflet for displaying GPS/NavSatFix data.

Structure

panels/Map/
├── MapPanel.tsx          # main panel, Leaflet lifecycle, PanelExtensionContext
├── FilteredPointLayer.ts # performance-critical point deduplication
├── support.ts            # message type detection (NavSatFix, GeoJSON, GPS)
└── config.ts             # settings tree, tile layer config

Leaflet Integration

Map instance created on mount, destroyed on unmount
Tile layers configurable (OpenStreetMap default, custom tile servers)
Markers use FeatureGroup for efficient bulk operations
View can follow the latest GPS point (auto-center)

FilteredPointLayer (Performance Critical)

Pixel-deduplication using a sparse 2D grid.

Problem

GPS at 10 Hz for 1 hour = 36,000 points. Rendering each as a Leaflet marker is prohibitively slow.

Solution

Screen space is divided into a sparse grid of pixel-sized cells.
Each cell holds at most ONE marker.
Points overlapping in screen space → only one is rendered.
On zoom change → the grid is recalculated.

Implementation

Sparse 2D grid indexed by `${Math.floor(pixelX)},${Math.floor(pixelY)}`
A new point mapping to an occupied cell is skipped (deduplicated)
Result: O(visible pixels) markers instead of O(data points)
Zoom in → more cells visible → more points; zoom out → heavy dedup → fast

Supported Message Types

Message Type	Fields Used
`sensor_msgs/NavSatFix`	latitude, longitude, altitude
`sensor_msgs/msg/NavSatFix`	(ROS 2 variant)
`foxglove.LocationFix`	latitude, longitude, altitude
GeoJSON	Feature / FeatureCollection geometry

Performance Notes

FilteredPointLayer is the primary optimization — bounds rendering cost
FeatureGroup enables bulk add/remove (single DOM update)
Only the visible viewport bounds are processed
Leaflet handles tile caching internally
An upper bound on stored points prevents unbounded memory growth

Key Files

packages/suite-base/src/panels/Map/MapPanel.tsx
packages/suite-base/src/panels/Map/FilteredPointLayer.ts
packages/suite-base/src/panels/Map/support.ts
packages/suite-base/src/panels/Map/config.ts

---name: panel-mapdescription: Deep Map panel knowledge: Leaflet lifecycle, NavSatFix/LocationFix/GeoJSON handling, tile layers, and the FilteredPointLayer pixel-deduplication grid that bounds rendering cost.---# Panel Map SkillA geographic visualization tool built on Leaflet for displaying GPS/NavSatFix data.## Structure```panels/Map/├── MapPanel.tsx # main panel, Leaflet lifecycle, PanelExtensionContext├── FilteredPointLayer.ts # performance-critical point deduplication├── support.ts # message type detection (NavSatFix, GeoJSON, GPS)└── config.ts # settings tree, tile layer config```## Leaflet Integration- Map instance created on mount, destroyed on unmount- Tile layers configurable (OpenStreetMap default, custom tile servers)- Markers use `FeatureGroup` for efficient bulk operations- View can follow the latest GPS point (auto-center)## FilteredPointLayer (Performance Critical)**Pixel-deduplication using a sparse 2D grid.**### ProblemGPS at 10 Hz for 1 hour = 36,000 points. Rendering each as a Leaflet marker is prohibitively slow.### Solution```Screen space is divided into a sparse grid of pixel-sized cells.Each cell holds at most ONE marker.Points overlapping in screen space → only one is rendered.On zoom change → the grid is recalculated.```### Implementation- Sparse 2D grid indexed by `` `${Math.floor(pixelX)},${Math.floor(pixelY)}` ``- A new point mapping to an occupied cell is skipped (deduplicated)- Result: `O(visible pixels)` markers instead of `O(data points)`- Zoom in → more cells visible → more points; zoom out → heavy dedup → fast## Supported Message Types| Message Type | Fields Used ||--------------|-------------|| `sensor_msgs/NavSatFix` | latitude, longitude, altitude || `sensor_msgs/msg/NavSatFix` | (ROS 2 variant) || `foxglove.LocationFix` | latitude, longitude, altitude || GeoJSON | Feature / FeatureCollection geometry |## Performance Notes- `FilteredPointLayer` is the primary optimization — bounds rendering cost- `FeatureGroup` enables bulk add/remove (single DOM update)- Only the visible viewport bounds are processed- Leaflet handles tile caching internally- An upper bound on stored points prevents unbounded memory growth## Key Files- `packages/suite-base/src/panels/Map/MapPanel.tsx`- `packages/suite-base/src/panels/Map/FilteredPointLayer.ts`- `packages/suite-base/src/panels/Map/support.ts`- `packages/suite-base/src/panels/Map/config.ts`

Frequently asked questions

Panel Map