Setup
Step #1
Grab your Mapbox access token
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.
1. Go to the access tokens page within your Mapbox account.
2. Click the Create a token button.
3. Give your token a name.
4. Leave the Token scopes as they are.
5. 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.
6. Click the Create token button
7. Once created, you'll need to copy your new access token and add it to epic-maps <script> below.
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.
1. Go to the access tokens page within your Mapbox account.
2. Click the Create a token button.
3. Give your token a name.
4. Leave the Token scopes as they are.
5. 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.
6. Click the Create token button
7. Once created, you'll need to copy your new access token and add it to epic-maps <script> below.
Copy the epic-maps <script> and paste it into the <head> custom code of your page
Replace {{YOUR_ACCESS_TOKEN}} with your Mapbox access token.
<!-- EPIC CMS MAPS by theWrk.Shop -->
<script src="https://cdn.epicnoco.de/epic-maps.js?token={{YOUR_ACCESS_TOKEN}}" ></script>
<!-- EPIC CMS MAPS by theWrk.Shop -->
<script src="https://cdn.epicnoco.de/epic-maps.js?token={{YOUR_ACCESS_TOKEN}}" ></script>
Step #2
Required for minimum setup
MAP
epic-map-element="map"
Add this attribute to the empty DIV that will contain the MAP.
LIST
epic-map-element="list"
Add this attribute to the COLLECTION LIST for the items that will be added to the MAP.
ADDRESS
epic-map-address="{{ITEM'S ADDRESS}}"
Add this attribute to each ITEM (children of the LIST element).
epic-maps 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.
epic-maps 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.
Or
LONGITUDE & LATITUDE
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.
These coordinates are used to position an ITEM's MARKER on the MAP.
Optional
MARKER
epic-map-marker="{{#COLOR / CLASSNAME}}"
Add this attribute to an ITEM or LIST element to specify a color or class name to be applied to that ITEM's MARKER. If added to a LIST element, the color or class name will be applied to all ITEMs within that LIST. If added to an ITEM, the ITEM's attribute will override the parent LIST's attribute, if added.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
Or
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.
If added, a MARKER element will override any epic-map-marker color or classname attributes added to the ITEM or it's parent LIST.
POPUP
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.
Additional Attributes
Actions
Actions
Action attributes are split into TRIGGERs and ACTIONs, with these two options being combined into one attribute:
epic-map-{{TRIGGER}}="{{ACTION}}"
Add these attributes to an ITEM or LIST element. Actions added to a LIST element are applied to all ITEMs within that LIST but are overridden on any individual ITEM by an action with the same trigger added to that ITEM.
Examples:
epic-map-onclick="goto"
Add this attribute to an ITEM or LIST element for the MAP to center on an ITEM's MARKER when the user hovers over that ITEM.
epic-map-markeronhover="popup"
Add this attribute to an ITEM or LIST element for an ITEM's POPUP to open when the user hovers over that ITEM's MARKER.
epic-map-{{TRIGGER}}="{{ACTION}}"
Add these attributes to an ITEM or LIST element. Actions added to a LIST element are applied to all ITEMs within that LIST but are overridden on any individual ITEM by an action with the same trigger added to that ITEM.
Examples:
epic-map-onclick="goto"
Add this attribute to an ITEM or LIST element for the MAP to center on an ITEM's MARKER when the user hovers over that ITEM.
epic-map-markeronhover="popup"
Add this attribute to an ITEM or LIST element for an ITEM's POPUP to open when the user hovers over that ITEM's MARKER.
TRIGGER ONHOVER
epic-map-onhover="{{ACTION}}"
Add this attribute to an ITEM or LIST element to trigger an ACTION when the user hovers over this ITEM.
Replace {{ACTION}} with one of the ACTION options listed in this section.
TRIGGER ONCLICK
epic-map-onclick="{{ACTION}}"
Add this attribute to an ITEM or LIST element to trigger an ACTION when the user clicks on this ITEM.
Replace {{ACTION}} with one of the ACTION options listed in this section.
TRIGGER MARKERONHOVER
epic-map-markeronhover="{{ACTION}}"
Add this attribute to an ITEM or LIST element to trigger an ACTION when the user hovers over this ITEM's MARKER.
Replace {{ACTION}} with one of the ACTION options listed in this section.
TRIGGER MARKERONCLICK
epic-map-markeronclick="{{ACTION}}"
Add this attribute to an ITEM or LIST element to trigger an ACTION when the user clicks on this ITEM's MARKER.
Replace {{ACTION}} with one of the ACTION options listed in this section.
ACTION POPUP
epic-map-{{TRIGGER}}="popup"
This action opens the POPUP for this ITEM's MARKER
Replace {{TRIGGER}} with one of the TRIGGER options listed in this section.
ACTION GOTO
epic-map-{{TRIGGER}}="goto"
This action moves the MAP to center on this ITEM's MARKER
Replace {{TRIGGER}} with one of the TRIGGER options listed in this section.
Options
Map
epic-map-element="map"
STYLE
epic-map-style="{{MAPBOX MAP STYLE}}"
LONGITUDE & LATITUDE
epic-map-lng="{{MAP CENTRE LONGITUDE}}"
epic-map-lat="{{MAP CENTRE LATITUDE}}"
Add this attribute to a MAP element to set that MAP's initial center point.
ZOOM
epic-map-zoom="{{NUMBER FROM 0 - 22}}"
Add this attribute to a MAP element to set that MAP's initial zoom level. ZOOM can be a number ranging from 0 to 22 with 0 being max zoomed out and 22 being max zoomed in.
NAV
epic-map-nav="false"
Add this attribute to a MAP element to remove that MAP's nav elements such as the zoom in and zoom out buttons.
USERGEO
epic-map-usergeo="true"
Add this attribute to a MAP element to add the User Geolocation button to that MAP.
OPTIONS
epic-map-options
List
epic-map-element="list"
MARKER
epic-map-marker="{{#COLOR / CLASSNAME}}"
Add this attribute to specify a color or class name to be applied to all ITEM's MARKERS within this LIST.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
Add this attribute to specify a color or class name to be applied to all ITEM's MARKERS within this LIST.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
MARKER OPTIONS
epic-map-markeroptions=""
POPUP OPTIONS
epic-map-popupoptions=""
Item
Children of epic-map-element="list"
ADDRESS
epic-map-address="{{ITEM'S ADDRESS}}"
Add this attribute to position this ITEM's MARKER on the MAP.
epic-maps 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.
epic-maps 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.
LONGITUDE & LATITUDE
epic-map-lng="{{ITEM'S LONGITUDE}}"
epic-map-lat="{{ITEM'S LATITUDE}}"
Add both attributes to position this ITEM'S MARKER on the MAP.
MARKER
epic-map-marker="{{#COLOR / CLASSNAME}}"
Add this attribute to specify a color or class name to be applied to this ITEM's MARKER. This attribute will override the parent LIST's MARKER attribute, if added.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
Add this attribute to specify a color or class name to be applied to this ITEM's MARKER. This attribute will override the parent LIST's MARKER attribute, if added.
When setting a color, start with the # symbol followed by the color's hex code. Without the # symbol, the hex code will be treated as a class name.
MARKER OPTIONS
epic-map-markeroptions=""
POPUP OPTIONS
epic-map-popupoptions=""
Marker
epic-map-element="marker"
OPTIONS
epic-map-options=""
Popup
epic-map-element="popup"
CLOSE BUTTON
epic-map-closebutton="true / false"
Add this attribute to add or remove this POPUP's close button.
Default value = "false"
Add this attribute to add or remove this POPUP's close button.
Default value = "false"
OPTIONS
epic-map-options=""
Pricing
Free until you're ready to go live!
Free on Staging
Build, test and refine your maps on any Webflow site's staging domain without restrictions. You'll only need to grab a license once you're ready to go live!
Live Site License
One license per domain to cover all of the maps on your site.
$10/mo USD
$12/mo USD
billed yearly
billed monthly
Custom Setup
Want something unique? Or just want us to take care of everything? Let us know what you need and we'll build something epic together!
$750 USD
Get in Touch