Live Globe

• 

  Live Globe Image

Inspiration

When I was young, I imagined a globe covered with LED display that showing live weather for the whole earth.

This time I tried to mimic it using Google Map Platform and OpenWeather API.

What it does

It shows live weather for current center of the map in 2D animations and art overlapping the mapView.

Available weather animations are sunny, moon, foggy, cloudy, raining, thunder, and snow.

User can search the place using search bar, and the center of the map will be moved to the place user searched.

How we built it

Using Google Map Platform it allow users to search place they want to see, and set longitude and latitude of center of the map as searched location's latitude and longitude.

Then pass those latitude and longitude to openWeatherAPI, get weather for current location and show it as animation overlapping the mapView.

Challenges we ran into

Making a openWeather API call request using JavaScript and phrasing the response.

Accomplishments that we're proud of

Thunder animation!. it's a combination of raining animation and lightning animations. Rain keeps falling and lighting happens sporadically here and there in the app.

What we learned

Fundamental knowledge of Google Map Platform APIs and javaScript. (This was almost first time for me working with JS).

What's next for Live Globe

Create photo realistic style of weather art/animations for when user selected satellite mode.

Show map in dark mode if current time zone is night

In cloudy weather make the umber of clouds, moving speed and its moving direction is determined by current weather. (As now by default 3 clouds move from left to right in 5s linear animation.)

In clear weather, location of sun/moon is determined by current longitude and latitude. (As default it’s at top left corner)

Built With

• css
• html
• javascript