Created
July 21, 2018 10:36
-
-
Save chrisbay/675f0c99b66b60f5c42c3b667bed041c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Largest Cities In the US</title> | |
| <script type="text/javascript" src="cities.json"></script> | |
| <script> | |
| function getData() { | |
| return JSON.parse(data); | |
| } | |
| function renderTable() { | |
| var cityCollection = getData(); | |
| var cities = cityCollection.features; | |
| var container = document.getElementById("dataContainer"); | |
| var tableStr = "<table>"+ | |
| "<tr>"+ | |
| "<th>City</th>"+ | |
| "<th>Population</th>"+ | |
| "<th>Lat/Lon</th>"+ | |
| "</tr>"; | |
| for (var i=0; i<cities.length; i++) { | |
| var city = cities[i]; | |
| tableStr += "<tr>"+ | |
| "<td>"+city.properties.name+"</td>"+ | |
| "<td>"+city.properties.population+"</td>"+ | |
| "<td>("+city.geometry.coordinates[0]+", "+city.geometry.coordinates[1]+")</td>"+ | |
| "</tr>"; | |
| } | |
| tableStr += "</table>"; | |
| container.innerHTML = tableStr; | |
| } | |
| </script> | |
| </head> | |
| <body onload="renderTable()"> | |
| <h1>Largest Cities in the United States</h1> | |
| <div id="dataContainer"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment