# Mapbox

{% hint style="success" %}
**Who can use this feature?**

All Squirrel365 plans include the Mapbox component. 

For more details, see our [**pricing comparison matrix**](https://squirrel365.io/pricing/).
{% endhint %}

The **Mapbox** component is a visualization component that displays a dynamic and interactive map.

## Mapbox Properties

The **Mapbox component** properties consist of **LAYOUT & POSITIONING, MAP SETTINGS, LOCATION DATA,** and **DYNAMIC VISIBILITY** sections. 

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components/layout-and-positioning) and [**Dynamic Visiblity**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/) article for more information on using the different methods.

***

### MAP SETTINGS

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FrC86xwAhs3kSmmhURX0L%2FMapSettings.png?alt=media&#x26;token=03697cfd-3ed0-425d-a89e-19e361e2aad5" alt="" width="281"><figcaption></figcaption></figure>

* **Access token** - an input field for the map access token. This can be acquired from your account on the Mapbox website.

{% hint style="info" %}
For information on acquiring a Mapbox API token, see [this article](https://learn.squirrel365.io/how-tos/getting-a-mapbox-api-access-token).
{% endhint %}

* **Map style** - a dropdown to select the style of the Map layers
  * Satellite Streets
  * Light
  * Dark
  * Streets
  * Outdoors
  * Navigation Day
  * Navigation Night
* **Show zoom and pan controls** - Checked by default, this option adds the zoom and pan controls to the map. Uncheck to hide these controls.
* **Show terrain** - Unchecked by default, use this option to add terrain to the map.&#x20;
* **Show 3D buildings** - Checked by default, displays 3D buildings on the map.
* **Allow cooperative gestures** - Checked by default, use this option to enable or disable cooperative gestures. Read here to learn more about [cooperative gestures](https://docs.mapbox.com/mapbox-gl-js/example/cooperative-gestures/).

### MAP DEFAULTS

* **Center map on...**
  * Latitude - Input a location latitude (anywhere between -90 and 90). This property can be bound to the spreadsheet.
  * Longitude - Input a location longitude (anywhere between -180 and 180). This property can be bound to the spreadsheet.
  * Zoom level - an input to control the default map zoom level. This property can be bound to the spreadsheet.
  * Pitch - a slider to control the pitch and angle of the map view. The input value can be bound to the spreadsheet.

### LOCATION DATA

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F1MRssfCwJ1leHbE4syPO%2FLocationData.png?alt=media&#x26;token=2902fa4f-2aab-4ea9-a952-d6aec2728e02" alt="" width="281"><figcaption></figcaption></figure>

* **Marker Series** - a series list to place markers on the map based on either an address, lat/long, or long/lat value in the spreadsheet.

{% hint style="info" %}
Data in address format uses the MapBox Geocoding API

**Examples of address data:**

123 Squirrel Lane, Town, City Zip/Postcode

Swindon, UK

AZ 85658
{% endhint %}

* **Name** - Set the name of the series of location markers.
* **Location Type** - Choose the type of location data you have to plot on the map.
  * Address
  * Lat/Long
  * Long/Lat
* **Locations** - Bind to the range in the spreadsheet containing the location data.
  * ***Lat,long*** and ***Long,Lat*** data can be supplied as either 2 columns or a single column with a comma separating the values.<br>

    <div align="left"><figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FjWbtXhuXoDm48q2uLUrW%2Flocation%20type%20example.png?alt=media&#x26;token=46d1bd21-8330-4281-bc45-7c1845d9cb97" alt="" width="347"><figcaption></figcaption></figure></div>
  * ***Address*** data should be supplied in a single column.<br>

    <div align="left"><figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FRB5TepMvqoVr6DlHaQlZ%2Flocation%20type%20example%20-%20address.png?alt=media&#x26;token=0cb6acff-eba8-4dc1-89ee-d67b812016a1" alt="" width="249"><figcaption></figcaption></figure></div>
* **Marker Color** - Select the color for the markers by clicking the color swatch, to open the color picker, or entering a hex value. This property can be bound to the spreadsheet.
* **Data Insertion** - Configure data insertion to insert values when a marker is clicked. This is unchecked and disabled by default.
  * **Data Insertion Type**
    * Position
    * Series Name
    * Row
  * **Source** - Bind the source values for data insertion. This is only enabled for Row insertion types
  * **Destination** - Bind the destination cell(s) for the data.