Setup
The Epic-Map setup consists of the systems behind-the-scenes, the elements on the page, and each element’s options.
Systems
Create an Access Token: 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. <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' /><script>mapboxgl.accessToken = '[YOUR_ACCESS_TOKEN]'</script><script src='https://d3k3uitrrbmk0b.cloudfront.net/map.js'></script>Elements
*required
Attribute: epic-map-element = map Add this attribute to the empty div that will contain the map. Default is ‘true’. Set to ‘false’ to remove map controls such as zoom in and zoom out buttons. 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. 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. 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. 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. 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 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. 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. 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’. 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]
Opens the popup associated with this item or marker 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.
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.
<script>const epicMapOptions = { map: { style: "mapbox://styles/mapbox/streets-v11", center: { lng: -2.36, lat: 51.38 }, zoom: 4 }, bounds: { desktop: { padding: 64, maxZoom: 16 }, mobile: { padding: 32, maxZoom: 16 } }, marker: { color: "#ee3c49" }, popup: { focusAfterOpen: false, closeButton: false }
}</script>
map