Mouse Weather(W7)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I wanted to make a website that noticing weather by mouse position which is mapped with geographic coordinates.

I brought weather API from “https://openweathermap.org/current#geo” and also map from map API from “https://www.mapbox.com/api-documentation/#static”.

After that, I made a variable of mouse position and connect to the API’s latitude and longitude part but

Failed…

I thought maybe this website needs geo coordinates API for the mouse position.

– – – – – – – –
Code

let api = ‘https://api.openweathermap.org/data/2.5/weather?’;
let lat = ‘lat=’; //Latitude
let lon = ‘&lon=’; //Longitude
let apikey = ‘&appid=4a5ae257d9da36562c154a1f934be3f8’;
let metric = ‘&units=metric’
let mapimg;
let data;
let x;
let y;

function preload() {
x=mouseX;
y=mouseY;

let url = api + lat + x + lon + y + apikey + metric;
data = loadJSON(url);
print(data);
}

function setup() {

let country = createP(‘Country – ‘ + data.sys.country);
country.class(‘category’);

let weather = createP(‘Weather – ‘ + data.weather[0].main);
weather.class(‘category’);

let temp = createP(‘Temperature – ‘ + data.main.temp + ‘℃’);
temp.class(‘category’);

let humid = createP(‘Humidity – ‘ + data.main.humidity + ‘%’);
humid.class(‘category’);

let windS = createP(‘Wind Speed – ‘ + data.wind.speed + ‘M/s’);
windS.class(‘category’);

let windD = createP(‘Wind Degree – ‘ + data.wind.deg + ‘º’);
windD.class(‘category’);

createCanvas(600,300);
image(mapimg, 0,0);
}

Leave a Reply

Your email address will not be published. Required fields are marked *