Explore

map

Setup

The Epic-Map setup consists of the systems behind-the-scenes, the elements on the page, and each element’s options.

Systems

Create a Mapbox account

Create an account:

https://account.mapbox.com/auth/signup/⁠

⁠

Create an Access Token:

https://account.mapbox.com/access-tokens/⁠

⁠

In the ‘URLs’ section, add the urls for your staging site(s) (yoursite.webflow.io), your production domain(s) (yoursite.com), and ‘api.mapbox.com’. Using this access token instead of the ‘Default public token’ means that only the urls you’ve specified will be able to connect to your account.

Add the system scripts to your site

Copy and paste the scripts below into the </body> custom code section of your page.

Replace [YOUR_ACCESS_TOKEN] with the token generated in the previous step.

Elements

*required

map*

Attribute: epic-map-element = map

Add this attribute to the empty div that will contain the map.

Options

epic-map-options

See

Mapbox Options⁠

⁠

epic-map-nav

Default is ‘true’. Set to ‘false’ to remove map controls such as zoom in and zoom out buttons.

epic-map-usergeo

Default is ‘false’. Set to ‘true’ to add the user geolocation button to the controls. Clicking this will reveal the user’s current location on the map.

epic-map-boundsoptions

See

Mapbox Options⁠

⁠

list*

Attribute: epic-map-element = list

Add this attribute to the collection list or static container that contains the items to be added to the map as markers.

Options

epic-map-[action]

See

Actions⁠

⁠

epic-map-marker

Can either be set to a color hex value (#000000) or a CSS class name. Colors will be applied to the default Mapbox marker and class names will create a new element with that class. This option will be overridden by any epic-map-marker options set on individual items and by any marker elements set within each item.

epic-map-markeroptions

See

Mapbox Options⁠

⁠

epic-map-marker[action]

See

Actions⁠

⁠

epic-map-popupoptions

See

Mapbox Options⁠

⁠

item*

No attribute needed. Items are the children elements of a list.

Requires either the ‘address’ option or both ‘lng’ and ‘lat’ options to be added to the map.

Options

epic-map-address

The street address for this item. Will be overridden by longitude and latitude coordinates if also added.

epic-map-lng / epic-map-lat

Longitude and latitude coordinates for this item. Will override the address option if also added. If using a CMS number field as the attribute value, click the settings button within the value field and set the decimal number to 6.

All list options

All list options can also be set as options on individual items and will override the same option set on the list. All other options will be inherited from the list.

marker

Attribute: epic-map-element = marker

Add this attribute to an element within an item to be used as that item’s marker on the map. Overrides the map’s default marker and the epic-map-marker option set on both the item and the item’s list.

Options

epic-map-options

See

Mapbox Options⁠

⁠

epic-map-[action]

See

Actions⁠

⁠

popup

Attribute: epic-map-element = popup

Add this attribute to an element within an item to be used as the contents of a popup attached to that item’s map marker. Best practice is to place this element within a container with the style ‘display’ set to ‘none’.

Options

epic-map-options

See

Mapbox Options⁠

⁠

Actions

Epic-Map has a built-in action system which allows pre-defined actions to be attached to either items or markers and those actions activated based on the type of event, i.e. on hover or on click.

epic-map-on[event] = [action]

Event Attributes

epic-map-onhover

epic-map-onclick

Actions

Popup

Opens the popup associated with this item or marker

More actions coming soon

Mapbox Options

When creating Mapbox elements such as maps, markers, popups, and map bounds, there is the option to customise these elements or their behaviour by providing JSON options objects. Epic-Map has a default set of options for each but these can be overridden by setting new options in the page’s custom code.

Map:

https://docs.mapbox.com/mapbox-gl-js/api/map/⁠

⁠

Markers:

https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker⁠

⁠

Popups:

https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup⁠

⁠

Bounds:

https://docs.mapbox.com/mapbox-gl-js/api/map/#map%23fitbounds⁠

⁠

To set custom Mapbox options, copy and paste the epicMapOptions object code below into the <head> custom code section of the page and add or remove options as needed.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.