Maps: View Modes

[bearded-avenger]

The maps component is pretty lacking in terms of what it can do. Right now it displays a map, with the ability to add markers. I'd like to enhance this components usability, broadening it's scope for wider use case, along with a few internal enhancements.

Horizontal and Vertical Autopan The only view that the map can do is a basic map component. I'd like to introduce two different views; horizontal, and vertical. These would be on the front-end of the site. Horizontal would place a full width map fixed to the top or bottom, maybe 150px heigh. The vertical would fix a map to the left, or right. We'd introduce a new "type" attribute for the component, with "standard", "vertical", and "horizontal" as options. Standard would fallback to current implementation to maintain backwards compatibility.

The map points will change automatically as the user progress' through the story. The behavior is similar to that of http://cartodb.github.io/odyssey.js/

Because we're already using Leaflet for the map portion of the API, we should be able to tie some h2's with data-atts to the markers.

Here's a couple screens of how this would look.

related: https://github.com/bearded-avenger/aesop-core/issues/105

[michaelbeil]

i like that http://cartodb.github.io/odyssey.js/. and this looks legit.

[bearded-avenger]

OK so I've taken a couple passes at this and have a working version in feature/maps-follow.

http://cl.ly/1b1s292n0i3J

Currently, the user has to add some type of HTML element with a unique ID at the point in the story where they want the marker hop to happen. For example, if they add h2 id="aesop-map-marker-2" then when the user scrolls to that point in the story the marker hop happens.

Pros: able to use on any html element Cons: this is "code"

Ideas:

• use something like
• create a new shortcode that's only expose if sticky maps feature is on

Any other thoughts on how to make this easy for the end user?

Note: this feature is decoupled from https://github.com/bearded-avenger/aesop-core/issues/105

[bearded-avenger]

i think https://github.com/bearded-avenger/aesop-core/commit/8c860f2 gets us pretty close

http://cl.ly/3W1u1F2o1P3c

[bearded-avenger]

Theme developers! Here's what you need to know about the new maps and what it does when the user selects "sticky" mode.

1. A body class of aesop-sticky-map is added.
2. The map block is then fixed positioned (and back to static on mobile)
3. A second class aesop-sticky-map-LOCATION is added based on where the decides where it goes; left,top,right,bottom. Default is left.
4. padding-LOCATION is added - 250px to the body

Notes:

• css is auto loaded nothing to do on your part unless you're dequeueing aesop assets

CSS being added is here: https://github.com/bearded-avenger/aesop-core/blob/dev/public/assets/less/components.less#L368

[bearded-avenger]

ready to rock