This week’s assignment was particularly stressful. The concept of loading JSON data through an API was simple, though I really struggled to load a JSON file that I wanted. In most cases, it seemed because of the security issue between the servers of the API and the P5 library because the JSONs I found were perfectly visible when I directly accessed them on the browser with their URLs!
My initial plan was showing the information of the place which a user clicks on a map. It could have included its geological name, a picture, a description about that place, nearby spots, etc.
Converting the x, y positions of the clicked spot on the map to the latitude and longitude wasn’t that difficult. Watched Dan’s youtube video, Coding Challenge #57: Mapping Earthquake Data, I already knew the opposite formula, which converts the latitude and longitude to x and y. The following is its reverse formula that I used, and succeded to convert the values of mouseX and mouseY into the latitude and the longitude on the map:
I was going to use the APIs of mapbox for the map image, Google maps for reverse geocoding, Geonames for the location information, and Flickr for the pictures. However, I failed to load all of the JSONs from their APIs except the map image. Google maps JSON was loaded in the preload function, but couldn’t be loaded in all other functions. Also tried to put ‘jsonp’ keyword as the last parameter of the loadJSON function, but there was no use.
For this reason, I gave up the original idea and changed the application to a weather map. The Open Weather Map API also provides the search method based on geological codes and I knew that its API and JSON works on the web editor as it was one of the examples of Daniel Shiffman’s JSON tutorials. Using this, users got to see the names of the city and the country instead of its latitude and longitude whenever they click a point on the map. In the case that the hit spot’s name isn’t defined by the API, I made it show the text ‘Unknown’. At first, the Open Weather Map JSON wasn’t loaded either in other functions except for the preload function, but it luckily worked with ‘jsonp’ parameter. It was weird because, in Shiffman’s example, the same JSON was successfully loaded without ‘jsonp’ even in another function than the preload(). There, he put the loadJSON() into the callback function of button.mousePressed(), which is in the P5.DOM library. In my case, I put it into the mouseClick() that is in the P5 basic library. There might be a problem to load JSON in the functions of P5 basic library, or at least in that one function.
Anyway, for the weather information, I wanted to show it with an image rather than text. It would have been better if I had been able to access the Flickr API and loaded their photos, but it was impossible so I, instead, decided to use weather icon images.
First, I tried to load Open Weather Map’s icons but failed again. There was no problem at all to see the icon images on the browser with their URLs, but the loadImage() didn’t work when it was called in other functions than preload() or setup() function.
Therefore, I had no option but to upload all the weather icon files that I was going to use to my project folder and load them in advance. Then the images were successfully shown on the canvas.
Finally, I also added the ‘Clear’ button on the bottom right corner, so that users can clear all the information that’s been displayed on the map so far.
The following is the screenshot of the result:
The yellow icons are located on the points I clicked on.
I don’t directly embed the final result in this posting as it cannot load JSONs when it is displayed in full screen or in an embedded form.
The result and Its code are both available here:
- Clear.png: Sun by Anastasia Latysheva, https://thenounproject.com/search/?q=Sunny&i=901709
- Clouds.png: Cloud by Lero Keller, https://thenounproject.com/search/?q=cloudy&i=1118714
- Rain.png: Rain by Adrien Coquet, https://thenounproject.com/search/?q=Rain&i=1174162
- Snow.png: Snow by Adrien Coquet, https://thenounproject.com/search/?q=snow&i=1174158
- Fog.png: Fog by Ilsur Aptukov, https://thenounproject.com/search/?q=fog&i=19882
- Thunder.png: Lightening by il Capitano, https://thenounproject.com/search/?q=thunder&i=894559
- Hurricane.png: Tornado By RULI, https://thenounproject.com/search/?q=hurricane&i=1155936