A movable map window using jQuery
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
README.md
index.css
index.html
index.js
lens.gif

README.md

Map Lens

Map Lens is a sample JavaScript-based web application that demonstrates lensing or perhaps a better description is "draggable map insets". Lensing offers many benefits over traditional swiping which is commonly used to horizontally transition between two web maps, for example, before and after a hurricane imagery. In comparison, lensing offers the user an unlimited number of rectangular map overlays, for example, one lens per Esri basemap as shown above.

Click here for the live application.

Lensing is achieved with the ArcGIS API for JavaScript and leverages jQuery and jQueryUI, specifically the draggable and resizeable methods. The biggest challenge developing this sample was the handling (or suppressing) of the various mouse and navigation events.

Map lensing is not without its disadvantages. Maps embedded in each lens cannot contain dynamic content, maps ideally should only contain tiled map or image service. This is a performance consideration due to the number of navigation events invoked during lens interaction.