Map

The Map element lets you add customizable maps to your designs. Shoppers can enter a location to generate a map and adjust its position and zoom level to select the area they want to display.

You can customize the map's size, shape, and style to match your design, and offer multiple styles for shoppers to choose from.

How it works

When you add a Map element to your design:

• Shoppers enter an address or location to generate a map.

• They can move and zoom the map to adjust the area displayed.

• You control the map's size, shape, and appearance.

• If you add multiple map styles, shoppers can choose between them.

How to add a map

1. Open your Design or Template in the Design Studio.

2. Click Map to add a new element.

Each map has a name you can edit and a unique ID to help you identify it.

How to move, resize and transform the map

You can move, resize, and rotate a map directly on the canvas.

When you select a map, a quick-action toolbar appears below it, with shortcuts to duplicate, delete, align, and distribute elements.

For more precise adjustments, expand the Transform toolbox. Use these controls to adjust the map's position, rotation, size, flip, and layer order.

Change the map style and behavior

The Map Behavior toolbox lets you control how the map appears in your design and how shoppers can customize it during personalization.

You can set the map's initial location, apply a mask to define its shape, and choose different map styles for shoppers to select from.

Set the initial location

Changing the initial location will affect what the map displays when loading. The location is an option that customers always need to fill in, so whatever you choose here will only apply to the initial loading of the map.

To set the initial location:

1. Select the map

2. Expand the Map Behavior toolbox

3. Click Select Initial Location

4. Type a desired location. You can type a specific address, a city, or a country

5. Zoom in or out and move around to get the exact view you want to load

6. Click select

Add a mask to the map

Masks let you display the map inside a specific shape, such as a circle, heart, or custom outline.

To add a mask:

1. Select the map

2. Expand the Map Behavior toolbox

3. Click Upload mask

4. Select the JPG file you want to use as a mask. 

For masks to work, the file needs to be a black-and-white image of the mask, where the shape you want the placeholder to have is black and the background of the image is white, in good quality (we recommend at least 1000x1000 px), since the better the quality the smoother the mask. Here are some examples of masks: 

Choose Map Style

You can choose one or multiple styles for your map. By default, the street style comes selected, but you can choose as many styles as you want. When choosing more than one style, they will be available for shoppers to pick while personalizing.

To choose a map style:

1. Select the map

2. Expand the Map Behavior toolbox

3. Click Add Map Style

4. Choose the style you want to add

5. Repeat to add as many styles as you want

Adding your own Map Styles

Customily comes with several pre-defined map styles, but you can also upload your own. Our maps run on Mapbox, so you can use any custom style created there.

Mapbox styles control the visual appearance of the map—such as colors, labels, and visible features—and are created in Mapbox Studio.

To add your own Map Styles:

1. Create your style on Mapbox Studio

2. Copy the style URL to use in Customily

3. Go to Customily, select your map element and click Add Map Style

4. Choose Custom Style

   

5. Paste yout Mapbox Style URL here and press save.

Your added style will appear on the Map Styles list.