> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use Maps feature


# What is Maps feature

teeinblue offers a map that can be personalized in an artwork. Your customers can **enter a location** and the map in the artwork will show the location they want.

![Personalized Maps example](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_15jgvwg.png)

# Connect Mapbox (and Google Maps) account

To use this Maps feature, first you need to **create a Mapbox account** (and Google Places API - optional), and link it to teeinblue.
Visit this [article](https://support.teeinblue.com/en/article/connect-mapbox-google-maps-account-hft6y1/?bust=1627917920340) for detailed instructions.

# Create Map styles categories (optional)

|| This step is necessary if you want to offer your customers different map styles of your map artwork.

A map can have different styles to display, such as street maps, satellites, monochrome,...

![Map style example](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_10kait8.png)

You can create some map styles in Mapbox and group them into a "Map style category" in teeinblue to allow your customers to pick from (same as Clipart category).

## 1. Create Map styles in Mapbox

* Go to [Mapbox Design Studio](https://studio.mapbox.com/) > click on **New style** button > choose a style to customize
* In the design editor, you can customize map components, colors, typography...
* After editing, click **Publish** to create your custom style
* After the new style is published, find the **Share** button > copy the **Style URL** under Developer resources

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1bqbns9.png)

## 2. Create Map styles category in teeinblue

* Go to **Assets** > **Map styles** > click **+New category** button
* Enter a name for the category > click **Create**
* In the new category, add **Map style option name** - this name will display on store for customers to select
* Click on the **Enter maps style url** > paste the **Style URL** from the map style you created in step 1
* (optional) Upload thumbnail for each option so your customers can preview the map style

![Map style category example](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_8m1nxk.png)

| Mapbox provides some default map styles to use [here](https://docs.mapbox.com/api/maps/styles/#mapbox-styles). If you don't need to customize the style, you can copy the style URL of those default styles and paste to the option in category.

| We prepared thumbnail images for some default styles [here](https://drive.google.com/drive/folders/1wYuy798i5xGagetOoW-QcRS12y7eqykt?usp=sharing) for you to use.

# Create Maps option in Artwork
## 1. Prepare Layer for Maps

You need to prepare an image to be an original layer for the maps. The maps will show on the visible part of the image, not display on the transparent part.
Therefore, you can **define the map shape with this original layer**.

![Example of layer for maps](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1c02wo6.png)

||| We highly recommend using a solid black (#000000) shape for the image.

## 2. Add Personalize options

* Create a new artwork

|| Maximum size of the maps that Mapbox can render in order design is 2560px ( [example maps after rendered](https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/0,10,3,20/1280x1280@2x?access_token=pk.eyJ1IjoibWlobnNlbiIsImEiOiJja3FodGU4eGYyNnN2MzRwaXV4amUyb2JiIn0.a1i5ndGljZl7FU33SLVVUA) ). Please remind this limit when setting artwork size.

* **Upload a layer** (you prepared in step 1)

* In **Personalize Options**, select **Maps**. A map will show up on the layer with default location.
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1iom9d4.png)

* **"Enter location" label** & **Search location** placeholder: type to change the display text
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_6qhi5z.png)

* **Default location**: the location that maps will show when customers haven't selected a location yet.
You can change it by entering a latitude & longitude of a location.

To get the latitude & longitude of a location: Search a location on [Google maps](https://www.google.com/maps?authuser=0) > Right click on the marker > copy the "latitude, longitude" number OR copy it on the url.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_upzcjw.png)

* **Default zoom level**: number of zoom level for default location when customers haven't selected a location yet.
The higher the number, the more zoom in. Recommend to set level from 12 - 17.
After customers search a location, the map will automatically zoom in to fit that location's area. If no area found, it remains the default zoom level.

* **Default Map styles URL**: must input a style to render the map. You can change it to show the map in a different style when customers don't select any map style.
Map styles URL can be created from Mapbox (see instruction in [Create map styles in Mapbox](https://support.teeinblue.com/en/article/how-to-use-maps-feature-12xvhzm/?bust=1627917111946#2-1-create-map-styles-in-mapbox)) or use some default styles from Mapbox [here](https://docs.mapbox.com/api/maps/styles/#mapbox-styles).

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_8t3vmb.png)

* **Allow customers to change map styles**: enable if you want to show an option of map styles for customers to change.
Select a Map style category that you created (see [Create Map styles category](https://support.teeinblue.com/en/article/how-to-use-maps-feature-12xvhzm/?bust=1627917111946#2-2-create-map-styles-category-in-teeinblue)) and its options will show up on personalization form.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1qe1r12.png)

* **Enable overlay on Maps editor**: on Maps editor (the popup editor where customers select location), an overlay will show up on the **transparent or bright part** of the original layer. It doesn't cover the dark or black part, so it'll leave the map in the black part be highlighted.

![Overlay on the transparent part](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_17b2njy.png)

The brighter a part is, the darker the overlay is. The overlay will be darkest on transparent part, and will be completely hidden on the darkest color (#000000).

![Overlay on bright color](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_16prjvi.png)

| Therefore, we recommend only using this overlay feature when you have a solid black (#000000) original layer.

|| The overlay only shows on the Maps editor for preview purpose. It doesn't affect how maps render (maps still show up on any visible part of the layer).

![Overlay does NOT affect how map renders](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1pk34g4.png)

* **Show Marker/Pin**: show a pin icon on the maps. The pin will locate to the correct address, and will be draggable.

| You can upload your custom pin. But remember to input the correct size & ratio for the Marker width & height. Or else the pin will be stretched.
|| Watch our full detailed tutorial video:
${youtube}[](ZNiJiorbxkg)

# Auto populate custom data to a custom text field based on the Map selection

| You can now add a custom text field to automatically populate new information such as location name, date, time, longitude, latitude, and more.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1grnsw6.png)

In this example, if the Map Location is set to **Berlin, Germany**, both the text field and the Live Preview will automatically set to **Berlin, Germany** as well.

To do so, please follow these steps:

* Create a text layer like you usually do
* Select **Populate values from other options**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1r35rpz.png)

* Continue to select the Layer you want to get value from. In this case, it would be the **Street Map** layer

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_uk06q4.png)

* Select the type of value you want to get. You can click on the **Lookup values ** button for more details. At the moment, we support these values. We will be continuing to update more in the future!

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_17nu5ri.png)

* Since you want to get the place name value, then you can copy and paste the `{{place_name}}` value there.
 | Tips: You can also enter a custom text there along with the custom value

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1a8zbsp.png)
* Check your results on the Storefront:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_b6sqwl.png)
| Please keep in mind that you can also combine different custom values if you want as well!

**NOTES:**
* Customers can still edit the text field anytime, even after it's been filled.
* If the Customers change the map location again, the text field will update with the new values, which could replace any custom info they added before.