Quick Start Guide | Docs

Docs

Quick Start Guide

Install epicmaps
Add The Map
Connect Your CMS Data

1. Install epicmaps

To start you'll need to get a Mapbox Access Token and add the epicmaps script to your project.

Get A Mapbox Access Token

Get your Mapbox Access Token from your Mapbox account.

‍

If you don't already have a Mapbox account, sign up for one here.

Access tokens can be viewed by people visiting your site so we recommend generating a private token so that yours can only be used on the domains that you specify.

Go to the access tokens page within your Mapbox account.
Click the Create a token button.
Give your token a name.
Leave the Token scopes as they are.
In the URLs section add api.mapbox.com (required), your site's Webflow staging domain (e.g. yoursite.webflow.io) and your site's production domain (e.g. yoursite.com). If you plan to use this token for multiple sites, add each of their staging and production domains. These can be added or changed later.
Click the Create token button
Once created, you'll need to copy your new access token and add it to epicmaps <script> below.

Add the epicmaps <script>

Copy the epicmaps <script> and paste it into the <head> custom code of your page.

‍

Copy your Mapbox Access Token from the previous step and paste it into the box below. This will add it to the end of the epicmaps <script> that you can then copy and paste into the <head> custom code of your page.

My Mapbox Access Token

<script src="https://cdn.epicnoco.de/epic-maps.js?token={{YOUR_ACCESS_TOKEN}}"></script>

2. Add The Map

To start you'll need to get a Mapbox Access Token and add the epicmaps script to your project.

The MAP Container

Add element attribute to your MAP container.

‍

‍epic-map-element=”map”

Add this attribute to the empty DIV that will contain the MAP.

3. Connect Your CMS Items

To start you'll need to get a Mapbox Access Token and add the epicmaps script to your project.

The LIST Element

Add element attribute to your LIST element.

‍

epic-map-element=”list”

Add this attribute to the COLLECTION LIST for the items that will be added to the MAP.

ITEM Address or Coordinates

Add address or lng & lat attributes to ITEM elements.

‍

epic-map-address="{{ITEM'S ADDRESS}}"

Add this attribute to each ITEM (children of the LIST element).

epicmaps uses Mapbox's Geocoding API to return longitude and latitude coordinates based on the ADDRESS attribute to position an ITEM's MARKER on the MAP.

Streets, cities and other areas can be used which will position that item's marker at the centre of the area.

= e.g. “108 Webflow Way, San Francisco”

‍

epic-map-lng="{{ITEM'S LONGITUDE}}"

epic-map-lat="{{ITEM'S LATITUDE}}"

Add both attributes to each ITEM (children of the LIST element).

These coordinates are used to position an ITEM's MARKER on the MAP.

= e.g. “-122.419418”

= e.g. “37.774929”

Optional Next Steps

Integrate Finsweet Filters

epicmaps automatically integrates with Finsweet Attributes v2 List as long as the LIST is the same Collection List element, changes to the LIST ITEMs will be reflected on the MAP.

epic-map-element="list"

fs-list-element="list"

Use MARKER elements

Add element attribute to your MARKER element.

‍

epic-map-element=”marker”

Add this attribute to an element or collection of elements within an ITEM that will be that ITEM's MARKER on the MAP.

If added, a MARKER element will override any epic-map-marker color or classname attributes added to the ITEM or it's parent LIST.

Add POPUPs

Add element attribute to your POPUP element.

‍

epic-map-element=”popup”

Add this attribute to an element or collection of elements within an ITEM that will be the POPUP attached to the ITEM's MARKER.