It's a major improvements update, hooray! Here's a list of new features:

• - weatherCard now has location information when you click on the city's name.


• - musicCard shows the status of the song it displays. Gives more precise information if it's "now playing" or "last played"


• - There is a new weatherCard background! Now it has a specific animation for thunderstorms.


• - Minor bug fixes and quality of life improvements for backend.

Behind the scenes

Developing these features, it was mostly to finesse what I've created on my website before. I wanted to complete everything I created with their details. Let's dive deeper into what APIs I used to achieve these.

• Selecting a maps API according to the city I am in was no easy choice. There were many options, and I went with Maps Static API from Google. Mainly because, it's free for my use case and is visually appealing. To use this API, you can dynamically create a url in your server-side JavaScript file and later pass it to your page, in this case +page.sveltekit. The code for it is as follows.

let mapsURL =  'https://maps.googleapis.com/maps/api/staticmap?center=' +  currentCity + '&zoom=3&size=400x200&markers=color:red|label:O|' +  currentCity +  '&key=' +  MAPS_API_KEY;

Filling in the variable names with your credentials, you can create yourself a static maps image! You can also adjust its settings by changing "zoom", "size", or "markers."



• Besides the maps API, if you want to download the thunderstorm animated background, or the animated "now playing" icon, you can head over to project's Github and find them in the static folder.


• Hope you enjoyed the update, feel free to contact me if you have any questions. Cheers!