Upvote 1

Putting a map image and navigate on it doing zooms

Answered Jorge Guevara ● ago

Hi,

I need to create a Prototype showing a map of a state, i.e. Florida, US.
In that screen should appear and user must be able to do zooms in and outs.

Will be displayed globe icons showing where were sales concreted.

If a make a mouse hover should display specific sales data like a grid or listbox previously loaded.

If I make a zoom in should load another map showing that county and the sales maded to certain company at the moment of doing a mouse hover.

Any suggestions?

Thanks in advance.

Jorge Guevara

Replies (3)

Sonia Durán ●

Hi Jorge,

My suggestion is using an image with some labels on it that contain some information. Then mark all of them as hidden and associate an event that will show when "on mouse over" (for example).

Another idea, in case you want to simulate the "zoom in", is dragging some dynamic panels at any area of the "image map" with some screenshots inside in order to simulate the zoom in with some set active panels events.

I hope it helps.

Best,

Sonia Durán

stphn ●

This is a really interesting scenario! I've quickly thrown this prototype together which allows you to hover over select countries (USA, Greenland, and Russia in this proto) to show a Data Grid then click to zoom on a country (Greenland in this proto) then hover over select companies from this country to show a Data Grid. Once zoomed I've added a `Zoom Out` button on the top left of the screen.

https://dl.dropboxusercontent.com/u/628429/justinmind/map-hover-zoom/index.html

Jorge Guevara ●

Hi,

I need to allow movement on the Map Area, I mean, the map image should be some like a container, if so, the container should allow movement to see more of that map.

stphn ●

You can add a drag event to the map and set it's position to the cursor. You'd end up changing my example a bit to not show the national businesses until you zoom then click on a country. I can see something like:

standard zoom (zoomed out) and hover over country names to get X data
click to zoom (zoomed in) and have the larger version of the map draggable
when zoomed in, click country name to toggle markers of businesses
hover over businesses markers to get X data
zoom out button to reset the map

Since you want the map draggable you'll need to find a way to account for the hotspot positioning as the hotspots don't lock to the image, they lock to a set Top/Left positioning. It's doable but could be tricky if you have a lot of hotspots.

I haven't updated my prototype linked above for the entire scenario I just mentioned but if you go back to the prototype URL and you click on Greenland you'll now be able to drag the map around.

Jorge Guevara ●

Hi Sonia,

Thanks for the advice. You said: "in case you want to simulate the "zoom in", is dragging some dynamic panels at any area of the "image map" ...dynamic panels?

Best

Jorge Guevara

Sonia Durán ●

Hi Jorge, I mean creating a dynamic panel with some screens. Each screen should contain a piece of the same image map zoomed. So when clicking at the button (Zoom In ) will activate (set active panel) each screen of the dynamic panel.

Best,

Sonia Durán