Parallaxing Map in Brine-family templates
Often you need to build an impressive homepage with a map location section. If you are using a Brine-based template and want to make a full-width parallaxing Map section on the Index page - there is an easy way to do this.
So the idea is simply to add a Map Block on your page inside the Index page. What we need here is to remember the URL Slug of the page to add into config. In this case, we need to remember: map-section.
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).
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>
Home with Map Section — Injection and Config
Now you may enjoy with Parallaxing Map and share this article.
