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!

Mapbox ID

Documentation to be updated.

  • 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!

Google Map API Key

The Map Editor relies on Google Map API to allow you to enter and edit locations. Google Map API allows you to type in the name of the cities and places and have Google pull up the locations for your map. While using the default key provided by Aesop should be fine for most of the time, it is recommended that you get your own API key for your website/project. You can get your ID free from Google.

You can also opt for their paid premium plan if you wish.

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.