MapEscape helping you navigate out of a map

We've all been there. You build an interactive map as part of your web solution. Your map looks and interacts like a charm in portrait mode on your smartphone and tablet. Now you rotate your device for a closer look at the map. Suddenly, you're stuck in the map and all swiping just interacts directly with the map. You can't scroll to any other content.

Introducing MapEscape, a small plugin that detects if your map is obscuring the entire screen and introduces a scrollable area so you can scroll your way through your webpage without interacting with the map.

MapEscape is written to work with both jQuery and Zepto, whatever your preference. At less than 1k minified, the plugin is lightweight and completely customisable.

Usage

HTML

<div class="map">your map code here</div>

Javascript

<!-- The same code is valid for both jQuery and Zepto -->

<script type="text/javascript">

    $('.map').mapescape();

</script>

Options

Options are kept to a minimum as it has little functionality; however, a lot can be achieved via styling through CSS

Option Type Default Description
alwaysOn Boolean false if false map height is measured against window height - true always shows scoll area
hiddenClass String scroll-inactive CSS class to hide the control
scrollText String null text in scroll indicator - leave blank for none
threshhold Integer 100 Amount of viewable scroll area below the map before control is shown
tabCenter Boolean true Position the scroll indicator with JS - false to position with CSS
scrollFollow Boolean true set to false for static scroll tab