Tengo dificultades para descubrir cómo modificar mi código para que, cuando pasa el cursor sobre un punto en el mapa, aparezca un cuadro que muestre el nombre de la ubicación, además de mostrar los datos meteorológicos de la API meteorológica en el mismo cuadro flotante o en la esquina derecha del mapa.
// 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; }No sé si tiene que ser con js, pero te daré un buen css animado para ti.
.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> no incluía ningún javascript. para que pueda usar cualquier lógica que desee. se encargará de las imágenes. simplemente haga una .bubble en un .trigger , proporcione la id que desee y manipúlela como desee.
Si desea colocar los disparadores, puede reposicionarlos como desee: relative , absolute o fixed . la posición de la burbuja será relativa a la posición del activador, por lo que su ventana emergente siempre estará encima del punto.
hacer disparadores con x e y dados se puede hacer con una secuencia de comandos que crea un elemento y modifica su left y right .