My Weather App: Draggable map to get weather report at new location

Code Feedback
1

Here’s my version of the Weather App. It starts with your ‘home’ location and displays weather at your home location. But you can drag the map anywhere, and it will display the weather at the new location you just dragged into.

PS: Rate limiting may take effect, if calls to Weathermap happens too fast and by too many users.

https://weather-owel.surge.sh/

3 Likes
2

This is really amazing, but a few things can be added to improve the user experience.

1] A search bar, so you don’t have to click 10+ times if you wanna go from Windsor, Canada to Paris, France for example.

2] Reduce the page load time somehow

Overall, being able to implement google maps into your weather app is really cool :smiley:

3

Very good job! I am trying to build a similar weather app, but my weather API isn’t pulling in. Any suggestions?

4

You may need to use a proxy server calling the weather API (due to the mixed https/http problem).

I’m using cors-anywhere. Here’s a snippet

    function getWeather(myLat, myLng){
      // myLng = translateLongitude(myLng);   // if you're not using draggable maps, don't need this
      $.ajax({
            method: "GET",
            url: "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather",
            // API key is required, assign to appid
            data: { lat: myLat, lon: myLng, appid: '0ba5350ff17a90b6f0b3bb63cf06f3a9' } 
          })
          .done(function( msg ) {
            // after successful call, we can now display values back to html page
            var weather = msg;
       

            // blah blah blah ... 
            // lots of stuff goes here, replacing html with the actual weather data 


          }); // end of ajax call 
    }

For some reason, the above URL doesn’t work from my end anymore…
but here’s my updated projects, all-in-one. (quote/weather/tribute/wiki)

https://randomquote-owel.surge.sh/

5

Thanks for the quick reply, it’s still not working. I will keep messing with it. Thanks again!!