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)

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



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



Mapbox provides some default map styles to use here. 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 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.



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


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



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



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:

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.



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:


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.

Updated on: 21/11/2024