Quick Start Guide | Docs

Docs

Quick Start Guide

Install epicmaps
Add The Map
Connect Your CMS Items
Publish to Staging

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

Next you'll need to designate the DIV on the page that will contain the MAP.

The MAP Container

Add the 'map' element attribute to your MAP container.

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

3. Connect Your CMS Items

Tag your LIST of ITEMs to add to the MAP and give each ITEM either an address or coordinates to position it on the MAP.

The LIST Element

Add the 'list' element attribute to your LIST element.

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

ITEM Address or Coordinates

Add either address or both lng and 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”

4. Publish to Staging

You'll need to publish your site to see your MAP in action.

epicmaps is free on Webflow Staging

Publish your Webflow site to Staging to test your MAP and ITEM MARKERs.

epicmaps will always work on Webflow Staging sites like yoursite.webflow.io, but requires a Domain License for use on Production domains such as yoursite.com. When ready to go live, licenses can be purchased and managed from your epicmaps account.

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 the 'marker' element attribute to your MARKER element.

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 the default MARKER and any epic-map-marker color or classname attributes added to the ITEM or it's parent LIST.

MARKERs can be unique to each ITEM and connect to CMS data to display dynamic visuals or information.

Add POPUPs

Add the 'popup' element attribute to your POPUP element.

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

Place the POPUP element inside of a DIV with the style property 'Display' set to 'None' if you want it to only display on the MAP and not on the LIST ITEM.