Creating an interactive map

[AustinB_NeedsSomeHelp]

Hey all!

I'm working on a concept for a client that does habitat restoration. They have several restoration sites and I want to make an interactive map where website visitors can explore the sites.

I've created a proof of concept at : http://orfmapconcept.businesscatalyst.com/​

Try clicking on California to begin the experience.

But it's pretty shoddily built (based on click events and gotoAndPlay commands, with motion tweens of each event.) But this leads to an less than desirable experience due to accidental clicking of other unintended objects (ie: Clicking California while one of the blue Info boxes is scaled up)

Does anyone have any suggestions/ideas on how to better approach a project like this?

Thanks and happy holidays!!

Austin

[kglad]

use code to control the display.

if i were doing that i'd create a master state class and have each of the 50 states (or 48 in your case) extend the state class.  the state class would control the tweening of a state's initial position to the center of the stage and scale the state.  re-clicking would return a state to its initial position and scale.  info highlights could be passed to the master class and control the info display.

each substate state class would contain (or read) the info positions and text passed to the master class.

[JoãoCésar · Accepted solution]

Hi.

Maybe this approach can help you. It uses a simple state management and a createjs.Tween approach instead of timeline tween.

All you have to do is:

- Convert each state to a Movie Clip or Simple Button;

- Name them from 'state0' to 'state50';

- Put them all inside of a container Movie Clip called 'usa';

- Add three buttons called 'backButton', 'infoButton0', and 'infoButton1' to the main timeline;

- Add this code to the main timeline:

var that = this;
var state;
var clickState = "initial";
var currentInfo;
function start()
{
    that.usa.fade.alpha = 0;
    that.backButton.scaleX = that.backButton.scaleY = 0;
    that.infoButton0.scaleX = that.infoButton0.scaleY = 0;
    that.infoButton1.scaleX = that.infoButton1.scaleY = 0;
    that.backButton.addEventListener('click', backHandler);
    that.infoButton0.addEventListener('click', infoHandler);
    that.infoButton1.addEventListener('click', infoHandler);
    that.usa.addEventListener('click', mapHandler);
    that.stop();
}
function mapHandler(e)
{       
    if (clickState == "initial" && e.target.parent.name.indexOf("state") == 0)
    {
        clickState = "stateSelected";
        state = e.target.parent;
        callState(state);       
    }       
}
function backHandler(e)
{
    if (clickState == "stateSelected")
    {
        clickState = "initial";
        dismissStates();       
    }       
}
function infoHandler(e)
{
    if (clickState == "stateSelected")
    {
        clickState = "info";
        createjs.Tween.get(e.currentTarget).to({scaleX:2, scaleY:2}, 350, createjs.Ease.circOut);       
        currentInfo = e.currentTarget;
    }
    else
    {
        if (e.currentTarget == currentInfo)
        {
            clickState = "stateSelected";
            createjs.Tween.get(e.currentTarget).to({scaleX:1, scaleY:1}, 150, createjs.Ease.circIn);           
        }
    }
}
function callState(state)
{
    that.usa.setChildIndex(that.usa.fade, that.usa.children.length - 1);
    that.usa.setChildIndex(state, that.usa.children.length - 1);
    createjs.Tween.get(that.usa.fade).to({alpha:0.75}, 550, createjs.Ease.sineOut);
    createjs.Tween.get(state).to({scaleX:2, scaleY:2}, 550, createjs.Ease.sineOut);
    createjs.Tween.get(that.backButton).wait(100).to({scaleX:1, scaleY:1}, 350, createjs.Ease.sineOut);
    createjs.Tween.get(that.infoButton0).wait(200).to({scaleX:1, scaleY:1}, 250, createjs.Ease.sineOut);
    createjs.Tween.get(that.infoButton1).wait(300).to({scaleX:1, scaleY:1}, 250, createjs.Ease.sineOut);
    that.infoButton0.x = state.x;
    that.infoButton0.y = state.y - 30;
    that.infoButton1.x = state.x;
    that.infoButton1.y = state.y + 30;
}
function dismissStates()
{
    that.usa.setChildIndex(that.usa.fade, 0);
    createjs.Tween.get(that.usa.fade).to({alpha:0}, 350, createjs.Ease.sineOut);
    createjs.Tween.get(state).to({scaleX:1, scaleY:1}, 350, createjs.Ease.sineOut);
    createjs.Tween.get(that.backButton).to({scaleX:0, scaleY:0}, 350, createjs.Ease.sineOut);
    createjs.Tween.get(that.infoButton0).wait(100).to({scaleX:0, scaleY:0}, 250, createjs.Ease.sineOut);
    createjs.Tween.get(that.infoButton1).wait(200).to({scaleX:0, scaleY:0}, 250, createjs.Ease.sineOut);
}
start();

Here is the project for download: interactive_map_html5.zip.

I hope it can help you and have a nice and happy Christmas!

JC