coronavirus-tracker | Interactive map plotting the spread of novel | Data Visualization library

You can chain several tee commands and throw away only the last output of tee:

The default Heroku JDK version is 1.8. To install 14, put java.runtime.version=14 into your system.properties file as described here: https://devcenter.heroku.com/articles/java-support#supported-java-versions

The problem is the Java version number. In the error text it says "Fatal error compiling: invalid target release: 12".
For Heroku, you need to create the file "system.properties" in the root of the project, write "java.runtime.version = 12" in it.

The system.properties file indicates which version of Java is being used. Heroku supports many different versions of Java and version "12" is not the default version. Details in the documentation: https://devcenter.heroku.com/articles/getting-started-with-java#declare-app-dependencies https://devcenter.heroku.com/articles/java-support#specifying-a-java-version

It depends actually on which quantity of data you want to store. Generally you prefers to use the localStorage when you need to deals with small amount of data.

Another alternative is also possible, it's the IndexedDB which is more compliant and allow you to store more data.

You can find the API here: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API You can follow also some tutorials about IndexedDB to see actually how it works.

Finally, you can find the localStorage vs. IndexedDB usage response here: https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb

But if you want to steal use the localStorage, then you can check before fetching your data if the key storage "data" is used :

Like this

Use addEventListener on select and change the values to the numbers.

I added a "Please Select"

and changed the ID from cars to window.addEventListener("load",function() { document.getElementById("countrySel").addEventListener("change",getCovidStats); document.getElementById("countrySel").value="169"; getCovidStats() }) function getCovidStats() { const cc = document.getElementById("countrySel").value; if (cc==="") return; fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/'+cc) .then(function(resp) { return resp.json() }) .then(function(data) { let population = data.location.country_population; let update = data.location.last_updated; let confirmedCases = data.location.latest.confirmed; let deaths = data.location.latest.deaths; document.getElementById('population').innerHTML = population.toLocaleString('en'); document.getElementById('update').innerHTML = update.substr(0, 10); document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en'); document.getElementById('deaths').innerHTML = deaths.toLocaleString('en'); document.getElementById('percent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + "%"; }) .catch(function() { console.log("error"); }) setInterval(getCovidStats, 43200000) // update every 12 hours } * { margin: 0; padding: 0; } html { height: 100%; width: 100%; } h1, h2 { font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; padding-bottom: 20px; font-size: 250%; } .title { background: linear-gradient(to right, #feb47b, #ff7e5f); padding: 20px; } .subtitle { padding: 20px; font-size: 150%; } div { padding: 20px; } .stats-container { text-align: center; float: right; display: inline-block; } .location-container { display: inline-block; } .data-container { border: 2px solid #feb47b; margin-right: 30%; margin-left: 30%; } h4 { font-size: 85%; color: gray; font-family: 'Roboto', sans-serif; font-weight: 300; text-align: center; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; } .footer { font-family: 'Roboto', sans-serif; bottom: 0; font-size: 75%; padding: 5px; } Name Coronavirus Stats. Subtitle Tested positive Deaths Death percentage Country Country: Please select Netherlands Germany France Spain Italy Russia South-Korea USA

You're currently doing a v-for on coordinates. It should be on locations.

If locations don't have all the required props a MglMarker needs, transform them in the forEach but that's all you should do in that forEach (if you need it at all). Don't use it to populate this.country, this.cases or this.coordinates. You only want to set those when a marker is clicked (if, and only if, you have any functionality listening to changes on those Vue instance properties).

There might be more details which need to be fixed but, without a minimal reproducible example it's very difficult to spot them. Note: you'll need to create a mapbox public token with readonly permissions for your example to work.

To summarize: Move the functionality from your forEach into a function called showMarker or activateMarker. Call that function whenever a marker is clicked or, if that's what you want, call it on one of the locations to make it the currently active one.
What your code does now is: it makes all markers the currently active one, therefore only the last one iterated will be currently active.

Here's what your MglMarker iterator might look like:

The problem is that the endpoint https://coronavirus-tracker-api.herokuapp.com/v2/latest does not return locations. This is the response I get by calling it: