Map panel
Display geographic data on a world map.
Supported messages
To use this panel, your data must provide messages conforming to one of the following supported schemas.
LocationFix
For geographic point data, with optional display of heading and velocity. If the message includes a metadata field (an array of key-value pairs), those values are displayed in the point's tooltip on hover.
| framework | schema |
|---|---|
| ROS 1 | sensor_msgs/NavSatFix |
| ROS 2 | sensor_msgs/msg/NavSatFix |
| Custom | foxglove.LocationFix |
GeoJSON
For displaying arbitrary shapes or points.
| framework | schema |
|---|---|
| Custom | foxglove.GeoJSON |
The following fields in each feature's properties object are displayed in the tooltip on hover:
name– Displayed as a "Name" row.metadata– Additional key-value information. Supported formats:- A string, displayed as a single "Metadata" row
- An array of
{ "key": "Zone", "value": "north" }objects, each displayed as a labeled row - A plain object (e.g.
{ "Zone": "north", "Priority": "high" }), where each entry becomes a labeled row
Use the style field within each feature's properties to style objects on the map:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Name of map entity",
"metadata": [
{ "key": "Zone", "value": "north-sector" },
{ "key": "Status", "value": "active" }
],
"style": {
"color": "#ff0000",
"dashArray": "4 4",
"lineCap": "butt",
"opacity": "1",
"weight": 4
}
},
"geometry": "..."
}
]
}
See the Leaflet documentation for additional supported style attributes.
Settings
General
| field | description |
|---|---|
| Base layer |
|
| Custom map tile URL | Displayed when the Custom type is selected. URL to your custom map tiles following the Tile Map Service specs, for example https://my.custom.url/{x}/{y}/{z}.png |
| Max tile level | Displayed when the Custom type is selected. Highest zoom supported by the custom map source. See leaflet documentation for more information. |
| Follow topic | Topic to follow in the panel viewport |
| Follow frame | The frame_id of the location fix to follow. Only present when there are multiple frame IDs in the selected follow topic (e.g. from foxglove.LocationFixes). |
Layers
Add additional layers on top of the base map to display more information, such as nautical charts, topography, or custom tile layers.
| field | description |
|---|---|
| Type |
|
| Custom map tile URL | Displayed when the Custom type is selected. URL to your custom map tiles following the Tile Map Service specs, for example https://my.custom.url/{x}/{y}/{z}.png. See Leaflet's TileLayer documentation for more information. Most OpenStreetMap based services also work for this. |
| Opacity | Adjust layer visibility from fully transparent (0) to fully opaque (1) |
Use the layer actions to:
- Toggle visibility for each layer
- Reorder layers (move up/down) to control stacking
- Delete layers
Topics
The Topics section allows you to toggle visibility and settings for individual topics.
| field | description |
|---|---|
| Point style | Shape for location points:
|
| Show heading | Display heading visuals for the topic. This setting is available when the LocationFix topic includes heading data. Enabled by default. |
| Show velocity | Display velocity vectors for the topic. This setting is available when the LocationFix topic includes velocity data. Enabled by default. |
| Point size | Diameter of points in pixels. |
| Coloring | Color mode for features:
|
| Time range | Control which messages are displayed:
|
| Seconds | Displayed when Last N seconds is selected. Number of seconds of data to show relative to the current playback time (default: 30). |
Heading and velocity
The heading field (radians, clockwise from north) controls how markers indicate direction:
- Arrowhead – The marker rotates to point in the heading direction, including historical trail markers. This point style is only available when heading data is present; without heading data the panel falls back to Dot.
- Dot, Diamond, Square, Plus, Cross – A directional arrow annotation appears beside the latest marker
- Pin – Does not display heading or velocity information
The velocity field (x/y/z in m/s, East-North-Up frame) adds a course and speed vector to the latest marker, with length proportional to speed.
Use Show heading and Show velocity in each topic's settings to toggle these visuals.
Using custom maps
Load custom map layers by pointing to a URL that serves rasterized slippy tiles following the Tile Map Service specification with Web Mercator projection. See Leaflet's TileLayer documentation for more information on URL template construction. Most OpenStreetMap based services will work for this. See Switch2OSM for more information on serving your own tiles.
Controls and shortcuts
- Hover over the playback bar to highlight map points corresponding to that time
- Hover over a point on the map to highlight its corresponding time in the playback bar
- Click a map point to seek playback to that time
- Scroll over the map to zoom; drag the map to pan (zoom and pan levels will be persisted to the layout)
