Putting a map image and navigate on it doing zooms

Jorge Guevara shared this question 3 years ago
Answered

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

Comments (6)

photo
1

Hi Jorge,

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

photo
1

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

photo
1

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.

photo
1

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.

photo
photo
1

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

photo
1

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

photo