Parallaxing Map in Brine-family templates

Often you need to build impressive homepage with map location section. If you are using Brine-based template and want to make full-width parallaxing Map section on Index page - there is an easy way to do this.

So the idea is simple add a Map Block on your page inside Index page. What we need here is remember URL Slug of the page to add into config. In this case we need to remember: map-section.

View fullsize

Index Collection and Map Page inside it

Also you need to add main image as you usually do to get image parallax background. You may even add map preview screenshot here or whatever. This is needed to make Map placed in the right place (exactly inside the container where image sits).

View fullsize

Home with Map Section — Parallax Map - Add Image

The last thing you need to get this work - go to Injections Tab, configure sections urls in window.mapParallaxingSections array and add the main script. So your injections will look like:

<script>
    window.mapParallaxingSections = ['map-section', 'another-map-section'];
</script>
<script src="//www.squarewebsites.org/assets/parallaxing-map/init.min.js"></script>

View fullsize

Home with Map Section — Injection and Config

Now you may enjoy with Parallaxing Map and share this article.

LET ME SEE THE DEMO