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

Question

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.

Link to Sketch

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

You need to be more specific about your expected result and what is not working. Also it would be really nice if your could reduce this to a minimal example and include it as a [runnable snippet](https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question). Looking at your linked code it looks like you're successfully checking if the mouse is hovering over a given point and displaying the text "hi", so what is stopping you from accomplishing your objective? — Paul Wheeler, Nov 17 '21 at 08:04
Crossposted: 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 — Paul Wheeler, Nov 18 '21 at 00:07

score 0 · Answer 1 · answered Nov 17 '21 at 04:55

Idk if it has to be with js but I will give you a nice animated css for you

.bubble{
    transform: scale(0.0);
    transition-duration: 200ms;
    position: relative;
    z-index: 999;

    background-color: lightcoral;
    padding: 0.6rem;
    border-radius: 0.6rem;
    color: bisque;
    width: 8rem;
}

.trigger{
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: salmon;

    display: inline-block;
}

.trigger:hover .bubble{
    transform: scale(1.0);
}

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="trigger" id="p1">
        <div class="bubble">here you can have info for p1</div>
    </div>

    <div class="trigger" id="p2">
        <div class="bubble">write inner html here from js</div>
    </div>

    <div class="trigger" id="p3">
        <div class="bubble">you can use whatever you want</div>
    </div>
</body>

didn't include any javascript. so you can use any logic you want. it will handle the visuals. just make a .bubble in a .trigger, give any id you want and manipulate as you like.
If you want to position the triggers, you can reposition them as you like - relative, absolute or fixed. the bubble's position will be relative to trigger's position, so your popup will be always on top of the point.
making triggers with the given x and y can be done with a script that makes element and modifies its left and right.

The OP didn't provide enough information to make this clear, but I'm pretty sure the objects that the mouse is hovering over aren't going to be DOM elements where css `:hover` selectors are going to be applicable. They are going to be graphical elements drawn to a canvas with `p5.js`. I'll do a bit more digging and then probably remove the css and html tags because I think they are being misapplied in this case. — Paul Wheeler, Nov 17 '21 at 07:59
that's why I wrote my first line like this. but you can make dom elements on top of the canvas objects, can't you? I dunno if there is enough objects so the performance difference of making this much elements with js on startup matter. another way may be using svgs, as they can work with `:hover`. anyways, I thought this may help, if not sry( — FLAW, Nov 21 '21 at 12:45

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

1 Answers1