# Newbie- Trying to create a basic point and click map

**URL:** <https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 5, 2019, 11:50am UTC](https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963 "2019-03-05T11:50:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sad-ghosts](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sad-ghosts/32/3664_2.png) [@sad-ghosts](https://discourse.processing.org/u/sad-ghosts)\
**Post date:** [March 5, 2019, 11:50am UTC](https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963/1 "2019-03-05T11:50:00Z")

</div>

Hey guys, new to the game and I’m working on a project. It’s a UFO data map

 ![map](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/ca3f7440f13a0eccae501169c7b4b883827f08db.png)  
Ideally, you point and click on each ufo picture representing a different county, and a mass of circles representing the amount of reported ufo citings in the area shows up, and disappears when you click the mouse again. I’m having trouble figuring out where to even begin.

1. I have trouble with the concept of mouse placement, and where to get the coordinates for each ufo and it’s placement on the page. My teacher suggested using a grid system but I can’t find a lot of information on how to go about doing that
2. I’m not sure how to make multiple dots appear at once without creating hundreds of individual ellipses, but I know that would take too long. Is there a simpler way?  
Any help would be appreciated, thank you!

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [March 5, 2019, 12:57pm UTC](https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963/2 "2019-03-05T12:57:04Z")

</div>

i would follow the lead your teacher gave you as it appears you only have a single static image in which the ufos which will be the buttons. as the ufos are not separate or given placement information i would map some hotspots with some preprocessing of the information in the image.

the image below in broken into 48x48 cells of 14x14 pixels each. it would be a bit of work but you can calculate the column and row of each ufos top-left cell and how many cells the ufo occupies on each axis. using that information you can build an array of hotspots (which can included the amount of sightings to be shown when clicked) and simply divide the mouse position by the cell size to discover the ufo which has been selected. well that’s how i would approach it given the restrictions.

 ![griddedResizedMap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7018f78d48bf6e902ebc2d3b2e3ad6c1d6a277fc.png)

this is a versions of the above gridded out map with the new size

 ![plainResizedMap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f43bb782bebc99de19151d606512684d4c3ac4ec.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 7, 2019, 9:26pm UTC](https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963/3 "2019-03-07T21:26:51Z")

</div>

If you want to write down the coordinates of a bunch of location on an image, why not use Processing to do it? Click on your image, and the console will record the mouseX, mouseY.

```auto
PImage img;
void setup() {
  size(672, 672);
  img = loadImage("plainResizedMap.png");
  fill(255,128);
}
void draw() {
  background(0);
  image(img, 0, 0);
  ellipse(mouseX, mouseY, 38, 20);
}
void mouseClicked() {
  println(mouseX, mouseY);
}

```

Now you can either record these directly in an array in your code, or record them in a text file and load it as data.

So, your data file might look like this:

> 82, 114, Clatsop  
> 131, 140, Columbia  
> 125, 170, Washington  
> …

…and then, when there is a click, you want to loop over your data file and check if each row to see if the mouse fall in a region centered on that point, e.g. with point-circle or point-rectangle collision detection:

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/point-circle.php)**
>
> An online book about collision detection using Processing.

---

<div class="post-metadata">

**Author:** ![sad-ghosts](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sad-ghosts/32/3664_2.png) [@sad-ghosts](https://discourse.processing.org/u/sad-ghosts)\
**Post date:** [March 8, 2019, 12:03am UTC](https://discourse.processing.org/t/newbie-trying-to-create-a-basic-point-and-click-map/8963/4 "2019-03-08T00:03:26Z")

</div>

Oh wow, thank you guys! You’ve given me so much to work with and I am definitely on the right track right now! I really appreciate it