Adds a new javascript file named map-tool.js that adds the functionality to the map.html and map.css files that Yusuke created.
Starting with svg files from amcharts.com's free map svg files for the continents, I updated the sizing of each by opening it in Adobe Illustrator, then exporting just the map itself to remove the extra space that was showing around the continents in the original files. It also added size metadata so css had information to work with to show them at appropriate sizes. I also added a green fill color to each country where dinosaurs were found.
To get the mouseover eventListener to work, the actual text of the svg file needed to be embedded in the html instead of just adding the file to an \ tag. In the \ tag case, the deepest html element was \. To get down to the country level, the actual svg paths needed to be embedded. I created a variable allMaps to hold the text of each continent svg file.
Each country path within a continent svg has an id of its two-character ISO-3166 country code. I needed a table of these codes and their country names to convert from the two-character code to the name of the continent. The variable countryCodes includes the codes of each country where dinosaurs are found.
The timeline of the code
Set eventListeners on the continent buttons and the map container
When a continent button is clicked, the name of the country is used to embed the svg text for that country.
The dinosaurs are fetched from the api.
A function counts the number of dinosaurs in each country
As countries are hovered over, their country code is checked against the countryCodes variable.
If the country is one where a dinosaur is found, the country information is updated with
a. the number of dinosaurs
b. the name of the country
The fetched array of dinosaurs is filtered by the country
A list of dinosaurs is created from the filtered array and displayed
On first loading the page, the Africa map is shown and the country information for Egypt is shown. This is hard coded into map.html. Other small changes to map.html and map.css were made as needed.
This pull request closes issues #107, #108, and #109
Adds a new javascript file named map-tool.js that adds the functionality to the map.html and map.css files that Yusuke created.
Starting with svg files from amcharts.com's free map svg files for the continents, I updated the sizing of each by opening it in Adobe Illustrator, then exporting just the map itself to remove the extra space that was showing around the continents in the original files. It also added size metadata so css had information to work with to show them at appropriate sizes. I also added a green fill color to each country where dinosaurs were found.
To get the mouseover eventListener to work, the actual text of the svg file needed to be embedded in the html instead of just adding the file to an \![]()
tag. In the \![]()
tag case, the deepest html element was \![]()
. To get down to the country level, the actual svg paths needed to be embedded. I created a variable allMaps to hold the text of each continent svg file.
Each country path within a continent svg has an id of its two-character ISO-3166 country code. I needed a table of these codes and their country names to convert from the two-character code to the name of the continent. The variable countryCodes includes the codes of each country where dinosaurs are found.
The timeline of the code
On first loading the page, the Africa map is shown and the country information for Egypt is shown. This is hard coded into map.html. Other small changes to map.html and map.css were made as needed.
This pull request closes issues #107, #108, and #109