Help » Map Component

The Map component creates a full-width map with custom location markers, including the option for the map to follow you as you scroll down the post. Only one map is allowed per story.

Options Overview

Height – The height of the map component. By default this is set to 500. Avoid using percentages here.
Sticky – Enabling this option will enable the map to be “fixed” to a position on your screen that you determine here (left, right, top, or bottom). When you choose a sticky position, a new Map Marker component will be revealed. The map will stop at the locations where you put these in your story.

MAP MARKER OPTIONS

Title – When you put a Map Marker component into the post, it will display an H2 heading. This is the text that should be displayed for the title.
Hidden – Don’t need a heading but still want the map to stop in a part in your story, just set this to hidden and the H2 heading will be invisible.

map-marker-component
The new Map Marker component shows if a Map is in Sticky mode.

Adding Maps & Map Markers

The Map component is pretty versatile when it comes to adding markers and even custom map tiles using filters. The location markers are added by clicking on the Map in your post edit screen. Clicking on a map will add a marker. Clicking the marker, will allow you to add a tile to that marker. Clicking the “update” button will update the marker text, and clicking “delete” will delete the marker. You can additionally click and drag the markers to more fine-tune the location.

Additionally, you can set the zoom level, and general map position. Be sure to update the post when ready, and all of this information will be saved and reflected onto the map on the front of your site (and within admin in that post).

When ready, use the component generator and add a map to your post! Oh also, if you’re using sticky mode, then the location of the map in the post won’t matter until the screen gets small. So on mobile and tablets, the map will go back to a “normal” map shown wherever you place the component in the story. Easy peasy!

add-markers
Adding map markers in admin is a snap!

Map Tiles (1.0.3)

The Map component utilizes Open Maps. These maps work with “map tiles” that come together like a puzzle to provide the image of the roads, lakes, etc. We provide a free map tile account, however, it’s important to know that this account is limited to 10k views a month.

For this reason, we highly recommend creating your own free account with Mapbox to provide your own map id. It’s super simple and here’s how you do it:

  • Head to mapbox.com and create a free account. Should you exceed their 50k map tile view limit, you can upgrade for a nominal fee.

  • Once you have created an account, locate the default map that has been created for you, and click the clipboard icon to copy to your clipboard.

  • Next, go to your WordPress admin and visit Appearance → Customize. Paste the ID in the Mapbox Map ID found within the Aesop Story Engine tab. Your map should now be using your tiles.

  • Now you can add a map marker to the map located below the post editor, then set the zoom level and general map position.

  • Go ahead and insert a map component!

Change Map Tiles

1.3 introduces a new filter to allow you to change the map provider per post. More information including a sample piece of code can be found here.