Need help with mouse over text box display on US map

Programming Questions

abstractg..

Need help with mouse over text box display on US map

in Programming Questions • 3 months ago

Hello,

I am very new to processing and I am just getting started in making sketches. I am trying to make an interactive map of the United States. I want to be able to click on a state and have a text box or text table appear with the details about the states voting patterns in previous elections. I have found the following code online and I know change the color of each state however, I do not know how to make a text box or text table appear when clicking on each state. Can any of you offer any advice, direct me to a website or provide any code that may help?

Thanks in advance!

Current code:

PShape usa;
PShape state;
String [] Obama = { "HI", "RI", "CT", "MA", "ME", "NH", "VT", "NY", "NJ",
"FL", "NC", "OH", "IN", "IA", "CO", "NV", "PA", "DE", "MD", "MI",
"WA", "CA", "OR", "IL", "MN", "WI", "DC", "NM", "VA" };
String [] McCain = { "AK", "GA", "AL", "TN", "WV", "KY", "SC", "WY", "MT",
"ID", "TX", "AZ", "UT", "ND", "SD", "NE", "MS", "MO", "AR", "OK",
"KS", "LA" };
void setup() {
size(950, 600);
// The file Blank_US_Map.svg can be found at Wikimedia Commons
usa = loadShape("http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg");
smooth(); // Improves the drawing quality of the SVG
noLoop();
}
void draw() {
background(255);
// Draw the full map
shape(usa, 0, 0);
// Blue denotes states won by Obama
statesColoring(Obama , color(0, 0, 255));
// Red denotes states won by McCain
statesColoring(McCain, color(255, 0, 0));
// Save the map as image
saveFrame("map output.png");
}
void statesColoring(String[] states, int c){
for (int i = 0; i < states.length; ++i) {
PShape state = usa.getChild(states[i]);
// Disable the colors found in the SVG file
state.disableStyle();
// Set our own coloring
fill(c);
noStroke();
// Draw a single state
shape(state, 0, 0);
}
}

Replies(2)

Chrisir

Re: Need help with mouse over text box display on US map

3 months ago

hello,

the map looks great!

Although I had to download it by hand and copy it into the sketch.

Afaik you can use PGraphics to paint the map identical (identical positions) to your map but with a different color to each state.

You don't show the resulting PGraphics. But when the mouse is clicked you check the color of the state under the mouse with get() in PGraphics.

That's basically the trick: An invisible, identical map as a layer above your map. The invisible map serves with its colors to determine where the mouse has been clicked.

I can give you only a rough draft, not tested.

So it's

before setup()

PGraphics pg; // hiddenMap


in setup()

pg = createGraphics(950, 600); // same as your size command

pg.beginDraw();
pg.background(100);
pg.stroke(255);

for (int i = 0; i < states.length; ++i) {
PShape state = usa.getChild(states[i]);
// Disable the colors found in the SVG file
state.disableStyle();
// Set our own coloring
pg.fill(i); // !!!!!!!!!!!!!!!!!!!!!!!!!
pg.noStroke();
// Draw a single state
```
  pg.shape(state, 0, 0);
```
}

pg.endDraw();



And in mousePressed() use something like

numberOfState = pg.get(mouseX,mouseY); // gives the color

the color is == # of state.

Have an array with the texts for all states and use numberOfState as index for it.

Have a boolean mouseShowText and
and have

void mouseReleased() {
mouseShowText=!mouseShowText;
}

and when mouseShowText is == true paint (see below in draw()) a box with the current text.
Similar to this:

void showMouseOver() {
// yellow mouse over help text
String textMouseOver="Hi there!" ;
if (!textMouseOver.equals("")) {
float posX=mouseX;
float posY=mouseY;
// right screen border?
if (posX+textWidth(textMouseOver)+10 > width) {
posX=width-textWidth(textMouseOver)-12;
}
fill(255, 255, 44);
rect(posX, posY+14, textWidth(textMouseOver)+5, 20);
fill(0);
text ( textMouseOver, posX+2, posY+10+16 );
}
//
//
} //

in draw

if (mouseShowText)
showMouseOver();

don't have noLoop() in setup

Greetings Chrisir

Chrisir

Re: Need help with mouse over text box display on US map

3 months ago

Hello,

I made a version here, not sure if all states are correct.
You need to click and release mouse to let text show.
Also you need the svg-map in your sketch directory (I couldn't let the sketch load it from the net).

I had a few errors in my description above. E.g. we are using the red-value (not gray value) in the hidden map plus 10 now as an index for the states array. Plus 10 was necessary to make the oceans etc. a different color than the first state (oceans / Canada / Mexico are black in the hidden map).

Greetings, Chrisir

// https://forum.processing.org/topic/need-help-with-mouse-over-text-box-display-on-us-map
PShape usa;
PShape state;
String [] Obama = {
"HI", "RI", "CT", "MA", "ME", "NH", "VT", "NY", "NJ",
"FL", "NC", "OH", "IN", "IA", "CO", "NV", "PA", "DE", "MD", "MI",
"WA", "CA", "OR", "IL", "MN", "WI", "DC", "NM", "VA"
};
String [] McCain = {
"AK", "GA", "AL", "TN", "WV", "KY", "SC", "WY", "MT",
"ID", "TX", "AZ", "UT", "ND", "SD", "NE", "MS", "MO", "AR", "OK",
"KS", "LA"
};
//
// this array contains the text to be shown by the mouse later
String[] textToShow = new String [Obama.length+McCain.length];
// this boolean denotes whether text is on or off
boolean mouseShowText=false;
// the state that has been clicked
int numberOfState=0;
// the hidden map
PGraphics pg; // hidden Map
// save mouse pos when clicked, so text doesn't move
int textX;
int textY;
//
// two help variables during setup
String winText;
int count=0;
//
// -------------------------------------------------------
void setup() {
size(950, 600);
// The file Blank_US_Map.svg can be found at Wikimedia Commons
// ("http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg");
usa = loadShape("Blank_US_Map.svg");
smooth(); // Improves the drawing quality of the SVG
//
pg = createGraphics(950, 600); // same as your size command
pg.beginDraw();
pg.background(0);
winText=" won by Obama.";
makeHiddenMap(Obama);
winText=" won by McCain.";
makeHiddenMap(McCain);
winText="";
pg.endDraw();
//
} // func
void draw() {
background(255);
stroke(255);
// Draw the full map
shape(usa, 0, 0);
// Blue denotes states won by Obama
statesColoring(Obama, color(0, 0, 255));
// Red denotes states won by McCain
statesColoring(McCain, color(255, 0, 0));
// Save the map as image
saveFrame("map output.png");
if (mouseShowText)
showMouseOver();
// test: show hidden map
// image (pg, 0, 0);
} // func
// -------------------------------------------------------
void makeHiddenMap(String[] states) {
pg.stroke(255);
for (int i = 0; i < states.length; ++i) {
PShape state = usa.getChild(states[i]);
// Disable the colors found in the SVG file
state.disableStyle();
// Set our own coloring
pg.fill(count+10, 0, 0); // !!!!!!!!
pg.noStroke();
// Draw a single state
pg.shape(state, 0, 0);
textToShow[count] = states[i] + winText;
count++;
}
} // func
void statesColoring(String[] states, int c) {
for (int i = 0; i < states.length; ++i) {
PShape state = usa.getChild(states[i]);
// Disable the colors found in the SVG file
state.disableStyle();
// Set our own coloring
fill(c);
// noStroke();
// Draw a single state
shape(state, 0, 0);
}
} // func
void mouseReleased() {
mouseShowText=true; // mouseShowText= !mouseShowText;
textX=mouseX; // save mouse pos
textY=mouseY;
numberOfState = int(red(pg.get(mouseX, mouseY))); // gives the color
numberOfState -= 10; // sub 10
// when clicked in ocean, we don't show mouse text
if (numberOfState<0 || numberOfState>textToShow.length)
{
mouseShowText=false;
println ("undefined");
}
else
{
print (numberOfState);
println (" "+textToShow[numberOfState]);
}
} // func
void showMouseOver() {
// yellow mouse over help text
String textMouseOver=textToShow[numberOfState];
if (!textMouseOver.equals("")) {
// get pos
float posX=textX;
float posY=textY;
// right screen border?
if (posX+textWidth(textMouseOver)+10 > width) {
posX=width-textWidth(textMouseOver)-12;
}
fill(255, 255, 44);
rect(posX+14, posY+4, textWidth(textMouseOver)+5, 20);
fill(0);
text ( textMouseOver, posX+16, posY+4+16 );
}
//
//
} // func
//

Top Reply