For midterm 1, I made an interactive map, demonstrating coffee production and trading all over the world.
I broke the project down to several steps. The first step was to create a world map and show it on the P5 canvas. After researching and learning about the mapbox api, I successfully used the mapbox api to draw a world map.
The next step was to show the country location on the map. I watched a tutorial by coding train and learned how to convert longitude and latitude into the x and y coordinate on the P5 canvas. Then I gathered all the country location information and put them in the json file I created. By using the fetch function, I was able to extract all the longitude and latitude of each country and show them on the map. As for the circles showing the country, I used an object to represent all the circles. The sizes of the circles were determined by the coffee production number. The greater amount of coffee bean a country produce per year, the larger the circle would be.
After showing all the circles on the map, the next step was to make all the circles interactive. I added a hover effect and a clicl function to the circles. By clicking a circle, the name of the country and a picture showing local coffee plantation will show on the bottom of the page.
I also want users to input their current city and make connections with other countries in the world. I added a text input box for users to type in the city they are interested in. To show that city on the map, I used the geocoding function of the mapbox api. It gives you information for the city name you input, including longitude and latitude number. With these numbers, I would be able to show that city on the map.
Then I add more interactions to the map. After a user types in a city name and shows it on the map, the user can keep click on other circles on the map, and the clicked circle will connect with the city. A number indicating coffee export information will also shown on the line.
