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

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

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