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.

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 for detailed instructions.

Create Map styles categories (optional)

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

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 > 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

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

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.

2. Add Personalize options

• Create a new artwork

• Upload a layer (you prepared in step 1)

• In Personalize Options, select Maps. A map will show up on the layer with default location.
  

• "Enter location" label & Search location placeholder: type to change the display text
  

• 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 > Right click on the marker > copy the "latitude, longitude" number OR copy it on the url.

• 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) or use some default styles from Mapbox here.

• 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) and its options will show up on personalization form.

• 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.

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).

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

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

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

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

• 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!

• 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

• Check your results on the Storefront:

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.

Updated on: 21/11/2024