> For the complete documentation index, see [llms.txt](https://docs.heisenware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/map.md).

# Map

The map widget displays location markers on an interactive geographical map. It visualizes coordinate strings, location arrays, or asset data objects in your Apps.

<figure><img src="/files/KxnnTfjfGzocLI6kZszd" alt="" width="375"><figcaption></figcaption></figure>

## Data binding

### Function output or modifier to widget

| **Property** | **Description**                                                                                                                   | **Type**                  |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `markers`    | Supplies the geographical coordinate data used to render location markers on the map canvas. Accepts strings, arrays, or objects. | string \| array \| object |

### Marker data formats

The `markers` property accepts multiple flexible input formats depending on your backend data payload.

**Single coordinate string**

A single text string containing comma-separated latitude and longitude coordinates: `"40.7128, -74.0060"`

**Array of coordinate strings**

Multiple location text strings grouped inside an array container: `["40.7128, -74.0060", "34.0522, -118.2437"]`

**Single coordinate array**

A flat numerical array listing latitude and longitude sequentially: `[40.7128, -74.0060]`

**Array of coordinate arrays**

Nested numerical arrays to plot multiple tracking points simultaneously: `[[40.7128, -74.0060], [34.0522, -118.2437]]`

**Coordinate object**

A structured object defining explicit `lat` and `lng` properties:

```json
{
  "lat": 40.7128,
  "lng": -74.0060
}
```

**Array of location objects**

An advanced structure to customize individual markers with unique styles. Properties like `icon`, `iconColor`, and `iconSize` override the default widget configuration thresholds at runtime:

```json
[
  { "lat": 40.7128, "lng": -74.0060, "icon": "fas fa-star", "iconColor": "gold" },
  { "lat": 34.0522, "lng": -118.2437, "icon": "fas fa-map-pin", "iconSize": 32 }
]
```

## Configuration

Set the widget's defaults in the settings panel.

### General settings

| **Property**       | **Label**                | **Description**                                                                                           | **Type** |
| ------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------- | -------- |
| `defaultCenter`    | Default center           | Sets the initial latitude and longitude center coordinate point of the map view.                          | string   |
| `defaultZoom`      | Default zoom             | Sets the initial magnification zoom level of the map canvas.                                              | integer  |
| `defaultIcon`      | Default icon             | Sets the default icon style class applied to all plotted location markers.                                | string   |
| `defaultIconSize`  | Default icon size        | Sets the default display text or icon size dimension for the markers in pixels.                           | integer  |
| `defaultIconColor` | Default icon color       | Sets the default text color hex code used to paint the marker icons.                                      | string   |
| `centerOnMarkers`  | Center on markers        | Dynamically recenters the map grid automatically to fit all active markers when their coordinates update. | boolean  |
| `showMapControls`  | Show map type selectors  | Toggles the layout visibility of the user controls for switching map styles.                              | boolean  |
| `showTrafficLayer` | Show traffic information | Overlays real-time traffic density conditions onto the active map track.                                  | boolean  |
| `showTransitLayer` | Show transit information | Overlays local public transportation routes and station networks onto the map.                            | boolean  |

## Tips and tricks

{% hint style="info" %}

#### Visibility with automatic recentering

When enabling *Center on markers*, the map calculates the geographic midpoint to position the view. This center calculation can push some markers outside the view boundary if the *Default zoom* scale is too restrictive. Adjust the *Default zoom* setting to fit all coordinate points into the visible display area.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/map.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.