Style

Styling maps, markers and modals.

Atlist is designed to be highly customizable. Our philosophy is, if you can see it you should be able to customize it.

Marker Styles: Understanding Hierarchy

There are 3 levels of marker styles in Atlist:

  • Global — Affects all markers.
  • Group — Affects markers in a group.
  • Individual — Affects an individual marker.

Style priority cascades downward:

  • Individual styles overrule Group styles
  • Group styles overrule Global styles

Marker Styles: Global

Global marker style is set under Style -> Markers.

Global marker styles.

Marker Styles: Group

Group marker styles can be set by clicking a group and selecting the Style tab.

Group marker styles.

Marker Styles: Individual

To set a style on an individual marker, click the marker and choose the Style tab.

Setting an individual style.

Custom Markers

PNG and SVG are the best image types for custom markers. They should have a transparent background and a 1:1 aspect ratio (square).

The center point for custom markers should be the center of the image. So if your custom marker is a triangle, you would want it to look like this:

Map Styles

You can customize how many roads, landmarks, labels and icons show on your map with these sliders:

These sliders control how many roads, landmarks, labels and icons will show.

You can also change the color and shade of your map by choosing a Map Theme:

Change your map theme.

Import Snazzy Maps Themes

Watch this short video to see how to import one of the thousands of Snazzy Map themes. 

Modal Styles

Modals are highly customizable in Atlist.

Modals are highly customizable in Atlist.

There are many parts of a modal that you can customize:

  • Position — Where the modal pops out from (top, left, right, anchored)
  • Card — The shape of the card (roundness, padding, triangle etc.)
  • Title - The font and visibility of the title.
  • Address - The font and visibility of the address and whether you want it to link to Google Maps.
  • Note - The font and visibility of the note.

You can also add a Directions button to modals. This option is found under the Publish tab:

Adding a Get Directions button to modals.