Button-based layout for lightweight maps to embed

It often happens that a map plays an informational role on your website, helping your customers better understand the website content. Or you are more willing to show locations rather than talk about places themselves. Then button-layout is what you are looking for!

The map above is an example of a button-based layout. As you can see, the map displays places, and information about each place (including name, location, and photos) is displayed through a popup window. In addition, you can filter places in the window with buttons at the top.

Let’s have a look at how to turn on the button-based layout!

Turn on the button-based layout

To activate the button-based layout, disable the side panel by switching it off on the Settings => Layouts & Presence => Layout tab:

The position of the button is up to you: it can be on the left or on the right side.

To make the map without buttons, hide the Map Info and Show All Places buttons on Settings => Layouts & Presence => Presence. You can also add custom buttons that filter the places on the map by tags.

Add Buttons

The Map Info => Buttons tab is the right place where you can customize the Show All Places button and add new map buttons:

Here are button settings that let you design a map button and define what it does when clicked:

• Tags - Enter one or more tags to filter places by specific criteria. You can combine tags with the AND logic or the OR logic. For example, you can choose “Clothes” AND “For Her” to make all shops that sell clothes for women to be shown. Or you can add “Restaurant” OR “Cafe” tags to display all places where one can eat and drink.
• Label - the button text. You can leave it empty if you want to have an icon button.
• Description - a hint about the button will appear on desktop maps.
• Color - button color.
• Icon - button icon. You can choose from the standard icon list or add a custom icon for the map.
• Border radius - allows creating more round or more quadratic buttons.
• Skip number - by default, the button displays the number of places that fit the conditions of this button. You can remove that info by setting this flag.

What’s next

• Create a map with the Mapifator map builder
• Mapifator Demo Maps
• Mapifator Tutorials