July 12th, 2013, 12:05 PM
Brainstorming Help: Timeline slider that changes dots on a map
Hi guys, just popping in to seek your help in pointing me in the right direction on this so I can start developing the scope for this project.
We want to create a timeline feature on our website that essentially animates the static map we have there presently. It is a US map, and shows dots for all of our business locations. By it's nature, this is a flat snapshot of our organization for 2013.
We want to add a slider bar to the bottom of that map that allows visitors to drag some kind of handle back through previous years, which results in the dots on the map changing.
There will be 3 colors for the dots, representing various points in the life of each business location. A yellow dot should appear on the map when a location begins construction. As the user is sliding the handle forward, this dot will turn red in the year that the business location opened. As they continue dragging, the dot will turn blue when this business location was renovated. If an entity was closed or sold, it's dot will be removed from the map entirely.
These 4 dates (construction begins, opening, renovated, closed) will be stored in a database, along with the name of the location and a brief description that appears when hovering over one of the dots on the map.
The earliest point on the timeline slider will be based on the earliest date stored in the database.
That's the gist of it... thoughts?
July 12th, 2013, 12:59 PM
I made something like this using ImageFlow. However, I can't figure out how to get the slider bar to reset to the proper position after the window is resized. If someone could help me, i would very much appreciate it.
You can see it at doublejackauctions (dot) com/pheno
Click the play button at the top to see it animate automatically.