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

p5.js Libraries
1

p5.js Web Editor

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:

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

needs to be

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?

// 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;
}
2

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

1 Like