# JavaScript w/ p5.js Editor: Figuring out how to modify my code for mouse over hover box and API display

**URL:** <https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566>\
**Category:** Libraries\
**Created:** [November 17, 2021, 4:39am UTC](https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566 "2021-11-17T04:39:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cartopher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cartopher/32/14691_2.png) [@cartopher](https://discourse.processing.org/u/cartopher)\
**Post date:** [November 17, 2021, 4:39am UTC](https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566/1 "2021-11-17T04:39:57Z")

</div>

**[p5.js Web Editor](https://editor.p5js.org/ccharleshhi/sketches/NpBxtSnAM)**

I’m having difficulty figuring out how to modify my code so that when you hover over a point on the map, a box appears displaying the location’s name, in addition to displaying weather data from the weather API either in the same hover box or in the right-hand corner of the map.

Moreover, the current API URL displayed under:

```auto
let gaUrl =
    "(https://)api.openweathermap.org/data/2.5/weather?q=New%20York&units=imperial&APPID=e812164ca05ed9e0344b89ebe273c141";

```

**needs to be**

```auto
let gaUrl =
"(https://)api.openweathermap.org/data/2.5/box/city bbox=-85.605165,30.357851,-80.839729,35.000659,10&appid=f7e1bf3a627a1b8861aa5c001a1a4f1a&units=imperial",

```

However, when I replace the API URL, I receive an error in the console indicating:

**TypeError: Cannot read properties of undefined (reading ‘temp’)**

Can anyone assist?

```auto
// Store Temperature
let temperature;
// Store Weather
let weather = "";
let points;
let json;
let longitude;
let latitude;

let myMap;
let canvas;
const mappa = new Mappa("Leaflet");
let zoom = false;
let options = {
  lat: 32.8407, //canvas center
  lng: -82.6324,
  zoom: 7.4,
  style:
    "	https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
};

function preload() {
  let api = "https://api.openweathermap.org/data/2.5/weather?";
  let apiKey = "&appid=f7e1bf3a627a1b8861aa5c001a1a4f1a";
  let units = "&units=imperial";
  let gaUrl =
    "https://api.openweathermap.org/data/2.5/weather?q=New%20York&units=imperial&APPID=e812164ca05ed9e0344b89ebe273c141";
  
  // let gaUrl = "https://api.openweathermap.org/data/2.5/box/city?bbox=-85.605165,30.357851,-80.839729,35.000659,10&appid=f7e1bf3a627a1b8861aa5c001a1a4f1a&units=imperial";
  
  json = loadJSON(gaUrl);
  data = loadJSON("/data/gaStations.json");
}

function setup() {
  canvas = createCanvas(800, 600);

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);
  fill(200, 100, 100);
  points = myMap.geoJSON(data, "Point");

  // Get Temperature (error when switching API url)
  temperature = json.main.temp_max;
  
  // Switch the API from weather data from New York to Georgia causes an error in the console displaying "TypeError: Cannot read properties of undefined (reading 'temp')"
  // Reference: View parameters under @ https://openweathermap.org/current

  weather = json.weather[0].description;
}

function draw() {
  clear();
  fill(0);

  for (var i = 0; i < points.length; i++) {
    pos = myMap.latLngToPixel(points[i][1], points[i][0]);
    rad = myMap.zoom() *1.2;
    if (pointCircle(mouseX,mouseY, pos.x, pos.y, rad)){
      textSize(24);
      text("hi",pos.x+5,pos.y-5);
      // Needs to display the name of the location when hovering over
    }
    circle(pos.x, pos.y, rad);
  }

  // Needs to display weather data for Georgia in the bottom-right corner, or in the hoverbox below the name of the locations

  text("Location: Georgia", width / 2 + 195, height / 2 + 220, 190, 150);

  text(
    "Current Temperature: " + temperature + " °F",
    width / 2 + 195,
    height / 2 + 235,
    190,
    150
  );

  text("Forecast: " + weather, width / 2 + 195, height / 2 + 250, 190, 150);
}

function zoomIn(lat, lng) {
  options.zoom = 5;
  options.lat = lat;
  options.lng = lng;
}

// POINT/CIRCLE
function pointCircle(px, py, cx, cy, r) {
  // get distance between the point and circle's center
  // using the Pythagorean Theorem
  distX = px - cx;
  distY = py - cy;
  distance = sqrt(distX * distX + distY * distY);

  // if the distance is less than the circle's
  // radius the point is inside!
  if (distance <= r) {
    return true;
  }
  return false;
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 18, 2021, 12:07am UTC](https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566/2 "2021-11-18T00:07:53Z")

</div>

Crossposted: [JavaScript w/ p5.js Editor: Figuring out how to modify my code for mouse over hover box and API display - Stack Overflow](https://stackoverflow.com/questions/69998969/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-ho)