Displaying a constant sized overlay over a map

Question

I'm displaying a map on my site. The map image is set as the background for the main division. I have a grid overlay (tranparent png) over this map.

I'm using zoomooz (http://janne.aukia.com/zoomooz/) to zoom in to different areas of interest on the map.

Currently, when I zoom both the map and the overlay zoom in. I'm looking to have only the map zoom, and keep the grid at a constant size.

I've set the positioning on the overlay to be fixed but everything still seems to zoom together.

If you look at the [Documentation](http://janne.aukia.com/zoomooz/) it gives an example titled **Zooming inside a container** of setting up a zoom container which won't effect the rest of the document. — Seain Malkin, Mar 22 '13 at 04:15

score 1 · Accepted Answer · answered Mar 22 '13 at 04:21

Over lay must not be part of root document there,

see the setting code in documentation you have sent,

// root element to zoom relative to
// (this element needs to be positioned)
root: $(document.body), // here enter the parent div you want to zoom. with respect to his it will zoom(like wrapper)

I have not done practical as you have not provided code but of zoom applied to whole document. then everything will zoom, its simple.

You need to identify the area(div) and specify its id as root. "Overlay must not be inside that (div)" else will be zooming again.

I hope this will do :)

for more help create fiddle and/or post all supporting code.

thank you

Displaying a constant sized overlay over a map

1 Answers1