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