# Map

> Learn how to use the Map component in PandaSuite to display maps, create markers, and routes using providers like Google Maps, OpenStreetMap, and Mapbox. Understand how to add markers, customize their appearance, and trigger actions.

https://docs.pandasuite.com/essentials/components/map/

**The Map component allows displaying a map in your application, creating markers (points of interest, areas) or displaying a route. This component relies on a map provider: Google Maps, OpenStreetMap, and Mapbox.**

[Image: Mobile app “Près de moi” showing an OpenStreetMap map of Montreuil with two markers and a circular area]

Google Maps, OpenStreetMap, and Mapbox are online mapping tools:

- [Google Maps](https://www.google.com/maps) is the standard in this area.
- [OpenStreetMap](https://www.openstreetmap.fr/) is a map of the world published for free under an open content license. Built by volunteer contributors, it is editable by anyone and constantly evolving.
- [Mapbox](https://www.mapbox.com/) is more advanced and offers numerous customizations of the map background. However, its use requires a subscription.

## Displaying a map

Click on **Components** and insert the **Map** component.

In the **Properties**, choose the provider: **Google Maps**, **OpenStreetMap**, or **Mapbox**.

Double-click on the component within your workspace (or click the arrow of its row in the objects list) to display the map.

[Image: Map of Paris opened with its drawing tools; its properties, framed: center, Zoom 13, Zoom min. and max., OpenStreetMap and Repeat world]

Enter the coordinates (Latitude and Longitude) of your map's central point. Set the default zoom level.

Use **Zoom min.** and **Zoom max.** to define how far users can zoom out or in. These limits also constrain user interactions via the mouse, trackpad, or zoom controls.

Use **Repeat world** to control horizontal panning. When enabled, users can pan across repeated copies of the world, while map layers and markers remain available as the map wraps horizontally. When disabled, users stay within a single world map and cannot zoom out beyond the full world view.

> **Info**
>
> If you choose Google Maps, it is necessary to insert your **API key**. For
> Mapbox, you must create an account beforehand and retrieve your **Access
> Token** to display the map. [Learn
> more](https://docs.mapbox.com/help/getting-started/access-tokens/)

With the **User location** option, you can refresh the map based on the user's position. When it is enabled, use **Map control** to choose how the map follows the user: **None**, **Just once**, **Always**, **Until pan**, or **Until pan or zoom**. You can also choose whether to display the center pin with **Show center pin**.

## Adding markers and a route

You can create [markers](https://docs.pandasuite.com/essentials/interactions/markers/), points of interest located at a specific position on the map.

To create a marker, use the editing buttons that appear on the left of the map. Select the type of marker (point of interest, rectangular or circular area) and click directly on the map to position it. You can also create paths to represent a route.

> **Tip**
>
> You do not need a database to add clickable markers. Place markers manually on
> the map and attach actions to each one (for example **Open a pop-up**, **Go
> to a screen**, or **Open a URL**).

When you create a marker, it appears in the left list.

[Image: Marker tool framed on the map; Jardin du Luxembourg, selected in the left list, shows its Visible property and position, framed]

You can edit the properties of these markers:

- Choose whether the marker is **Visible**. This property supports data binding, so you can show or hide markers from a collection field or another component.
- Set its exact position (latitude and longitude).
- Customize the appearance of the icon: specify the URL of an icon, its size, and position.
- Choose whether you want to display a pop-up when clicking on the marker. You can customize the text.

> **Info**
>
> For the appearance of markers, we use the
> [Geopify](https://apidocs.geoapify.com/playground/icon) service: you can
> customize the appearance and generate a new URL. You can also use any other
> service.

[Image: Marker Jardin des Plantes: Show popup on Yes with its Message, framed, and the pop-up shown above the marker on the map]

It is also possible to create markers dynamically [from a data source](https://docs.pandasuite.com/essentials/data/connect-your-app-to-a-data-source/).

This video explains how to create dynamic markers on an interactive map:

[Video: Dynamic markers tutorial: creating markers on an interactive map from a data source](https://www.youtube.com/embed/1Mj5DuQ2L5k)

### Create dynamic markers from a collection

Use this approach when you want to generate markers from structured data (for example a "Locations" list) and keep them easy to update.

1. Prepare your data

   - Create a [Collection](https://docs.pandasuite.com/essentials/data/collection/) in the [Datastore](https://docs.pandasuite.com/essentials/data/datastore/).
   - Add fields such as: Title (Text), Position (Coordinate), Icon URL (Text/Image), Description (Text).

2. Add one marker to the Map

   - Insert the **Map** component and create a single marker.
   - Select this marker and enable **Dynamic Source**, then link it to your collection.

3. Bind marker properties
   - Add a data binding on the marker **Center** and bind it to your Position field (Coordinate type).
   - Optionally bind other properties, such as **Visible**, the popup text (Title/Description), and the marker icon (Icon URL), to fields from your collection.

## Associating actions with markers

Once your markers are created, you can use them to trigger an action.

Open the **Actions** window and select a marker from the list. Associate the action of your choice (for example, **Go to a screen** or **Open a pop-up**).

[Image: Map component triggers: one Single tap/click per marker (L'Allée Verte, La Grosse Rochette) and Map Position Changed]

You can also use the marker action **Focus** to center the map on a specific marker.

## Controlling the map with actions

Use the Map component actions when another interaction should move the map:

- **Change map position** changes the map center and zoom level.
- **Fit bounds** adjusts the view to include all visible markers. Use **Vertical padding** and **Horizontal padding** to keep markers away from the edges of the component.

Hidden markers are ignored by **Fit bounds** because they are not displayed on the map.

## Exposed properties

The Map component exposes the following data for [data binding](https://docs.pandasuite.com/essentials/data/data-binding/):

- **Center**: current map center coordinates.
- **Zoom**: current zoom level.

Use the **Map Position Changed** trigger when you need to react after the user pans or zooms the map. The trigger exposes the new **Center** and **Zoom** values for the action flow.

## Learn more

- [Markers](https://docs.pandasuite.com/essentials/interactions/markers/)
- [Connect a data source](https://docs.pandasuite.com/essentials/data/connect-your-app-to-a-data-source/)
- [Collection](https://docs.pandasuite.com/essentials/data/collection/)
- [Data binding](https://docs.pandasuite.com/essentials/data/data-binding/)
- [Interactive actions](https://docs.pandasuite.com/essentials/interactions/interactive-actions/)
- [GPS / Geofencing](https://docs.pandasuite.com/essentials/components/gps-geo-fencing/)