Interactive Map

oscarb

Hey guys, searching for a helping hand. I'm trying to make a set of data visualisation code. The idea is to make an interactive world map that has pop ups (showing data) appear as you hover over a country. Is anyone be able to shed some insight? Much appreciated, cheers.

koogs

what do you have?

you need an image of the world and a set of coordinates telling you where each country is.

image() to display the map

mouseX(), mouseY(), dist() to work out if the mouse is near a data point

text() to draw the text.

oscarb

Nothing yet, very new to coding world, but thanks for the tip. How would you recommend finding the corresponding coordinates of each country on the image?

jeremydouglass

Will the map be 2D or a 3D globe?

Where will the nation location data come from?

One approach:

1. Draw a 2D map with each nation colored in a unique solid color
2. Check the color of the pixel under the current mouse location
3. Look that color up in an array of nations
4. The answer is the current nation.
5. Pop up something by the mouse with nation info from that list entry -- eg from a Table

These approach will work even if you are keeping your solid-color identifying map in an offscreen PGraphics or PImage buffer and displaying a different map on the screen -- like a contour map or a satellite image -- as long as the two line up.

Or:

• have a rough grid of points, each of which lists the nearest country
• lookup the nearest point
• etc.

Also, check out the unfoldingmaps library.

oscarb

Hey, so I changed my concept slightly to simplify things - now just focusing on Australia rather than the world. My idea is too have large circles (with info inside) appear as the cursor hovers over each state. I added circles behind the image at each states coordinates in hope that they could be the trigger for the pop ups, but some of them will need to be bigger (as a pop up) to able to fit text inside. What code should I add to make this happen? Cheers, really appreciate any help!

    size(1241, 1024);
    smooth();

    background(#87CEFA); 

    noStroke(); 
    ellipse(278, 485, 330, 330);

    ellipse(627, 340, 272, 272);

    ellipse(675, 580, 150, 150);

    ellipse(970, 410, 250, 250);

    ellipse(995, 680, 200, 200);

    ellipse(920, 820, 95, 95);

    ellipse(1028, 980, 60, 60); 

    PImage aus; 
    String url = "https:" + "//upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Australia_Color_Map.svg/1241px-Australia_Color_Map.svg.png";
    aus = loadImage(url);
    image(aus, 0, 0);

    fill(0, 0, 0);
    String s="WA"; 
    textAlign(CENTER);
    textSize(64);
    text(s, 278, 500); 

    fill(0, 0, 0);
    String d="NT"; 
    textAlign(CENTER);
    textSize(64);
    text(d, 627, 345); 

    fill(0, 0, 0);
    String o="SA"; 
    textAlign(CENTER);
    textSize(64);
    text(o, 675, 594); 

    fill(0, 0, 0);
    String f="QLD"; 
    textAlign(CENTER);
    textSize(64);
    text(f, 970, 445); 

    fill(0, 0, 0); 
    String h="NSW";
    textAlign(CENTER);
    textSize(64);
    text(h, 995, 700);

    fill(0, 0, 0); 
    String j="VIC";
    textAlign(CENTER);
    textSize(50);
    text(j, 940, 840);

    fill(0, 0, 0); 
    String m="TAS";
    textAlign(CENTER);
    textSize(40);
    text(m, 1028, 988);

ps. how should I post code? I used 'crtl+o' and 'pre lang="javascript"before and '/pre' after but it doesn't seem to be working just right. thanks again

koogs

(you only need ctrl-o)

the classic structure of a processing sketch includes setup() which is run only once and a draw() which is automatically called every 60th of a second or so. initialise things in setup, like loading the images. and do the interactive / animation things, like testing the mouse position and popping up the text, in draw.

read this:

https://forum.processing.org/two/discussion/8087/what-are-setup-and-draw

and this

https://forum.processing.org/two/discussion/8082/from-several-variables-to-arrays

(because having variables called a, b, c, d, e, f etc is terrible)

oscarb

Good advice, thanks. Do you know what code is best to use to make the interactive component?

kfrajer

You can explore http://unfoldingmaps.org/

In the Processing IDE, go to the library manager and install the unfolding library. Then you can check the examples under File>>Examples** and then under *Contrubuted libraries>>Unfolding

For the coordinates of the countries, you will need to know them beforehand. You can google something like "countries latitude and longitude list"

However, first run the examples provided. You might have issues installing the library. If you do, let us know and I will be able to assist you sometime this weekend.

You can also check prev posts here in the forum. Try the keyword "unfolding".

Kf