1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Rep Power

    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?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Rep Power
    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.


IMN logo majestic logo threadwatch logo seochat tools logo