# Map

The **Map** component is an interactive component supporting multiple layer types. It defaults to Open Street Map as the bottom layer if nothing else is defined.

{% hint style="info" %}
A full example setup on **Map** is available in our [Showroom](https://showroom.appfarm.app/ui-components/map). You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on [Showroom Signup](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Properties

### Initial Latitude, Longitude and Zoom

You may bind the settings **Initial Latitude** and **Initial Longitude** to properties in your data holding the GPS coordinates for the position you want to map to open as default centered.

This setting is optional. Without this setting, the map will try to center the map based on the markers (as defined by the Layers, see further down).

You may also override the Initial Zoom if you want a more focused initial zoom for your map.

### Current Latitude, Longitude and Zoom

The current latitude, longitude and zoom level can be bound to properties in your data model. These properties are two-way data bound.

Upon panning and zooming, the center coordinates of the map and current zoom level will be written to these properties. If any of these properties are updated outside of the map, for example using a separate UI component, the map will update accordingly.

### Write Click Coordinates

If this setting is selected, you may bind the **Clicked Latitude** and **Clicked Longitude** to properties in your data. Each click will write the coordinates back to those properties.

### Use Default Map

Default checked, meaning Open Streep Map will be the map provider. If unchecked, you may add another map source (such as Mapbox) as a map provider. This is done by adding a new *Layer* of type *Map*.

### Zoom Control

Default checked. Buttons for zooming in and out will be visible in the map when this option is enabled.

### Prevent Touch Default

When panning a map on a mobile device: If the map is placed inside a UI component that is reacting to the same touch movements, you may get some undesired behaviour. For example, when a map is placed inside a bottom drawer, the drawer may close while panning the map vertically. You may prevent these defaults by enabling Prevent Touch Default, and the map will own these events when panning inside the map.

### Layers

You may add different layers to your map by adding **Layers**. You may have multiple layers.

#### Layer Type: Markers

Add Markers to your map.

**Data Source**

You will need a data source holding longitude and latitude for the objects you want to add to the map. Select this data source in the **Data Source** setting, and more settings will appear.

**Latitude and Longitude**

Select the properties of your Data Source holding the latitude and longitude for the marker to be displayed.

**Selection and Limit**

Filter or limit the number of objects to display from your data source.

**Popup text**

When the marker is clicked, display a popup. You may also enable markdown for this text.

**Tooltip**

Displayed when hovering a marker.

**Permanent**

Only available when Tooltip is selected. Sets the tooltip as always visible. 

**Item Icon and Color**

Select an icon to be displayed as a marker (instead of the default pin), as well as the color for this.

**Cluster Color**

Assign a theme color to clusters. Defaults to Primary.

**Disable Clustering**

By default, if many markers are to be displayed, nearby markers will be clustered together. You may disable this feature.

**Property Conditions**

You may display different icons or icon colors, based on different conditions.

**On Click**

Select an action to be executed when a marker is Clicked

#### Layer Type: Data GeoJSON

You may add polygons for defining sections, or lines for defining borders or lines/paths.

Select a **Data Source** holding the polygon(s) or line to be displayed, and select the property holding the polygon in the **Data** setting.

A polygon data property may be of the following format (example with 1 polygon). The polygon GPS coordinates should be replaced with the long/lat variables:

```
{
"type": "FeatureCollection",
"features": [
{
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [long1,lat1],[long2,lat2],[long3,lat3]
          ]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": { "this": "that" }
      }
    }
]
}
```

The data property for defining a Line may be of the following format. The line GPS coordinates should be replaced with the long/lat variables:

```
{
"type": "FeatureCollection",
"features": [
{
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [long1,lat1],[long2,lat2],[long3,lat3]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": { "this": "that" }
      }
    }
]
}
```

#### Layer Type: Static GeoJSON

Add a URL to an external resource holding the GeoJSON to be displayed.

#### Layer Type: Map

Add a URL to an external map provider.

Example for Mapbox (you will need to set up your own Mapbox account):\
`https://api.mapbox.com/styles/v1/<YOUR_USER_NAME>/ckkybknqd1cvu17odf1s3ji59/tiles/256/{z}/{x}/{y}@2x?access_token=<YOUR_ACCESS_TOKEN>`