DEV Community

Cover image for How to create a COVID-19 map with Mapbox and React

How to create a COVID-19 map with Mapbox and React

Alejandro Mesa on April 06, 2020

In the current state of the world 🦠 and with many of us in lockdown, I thought it would be a good idea to put down Netflix for a bit, and build a C...
Collapse
 
anajuliabit profile image
Ana Julia Bittencourt β€’ β€’ Edited

Hi Alejandro, awesome post! As a lover of the open source community I felt a duty to contribute too, so I made a GraphQL API for currents cases about COVID-19. Repo link: github.com/anajuliabit/covid-graph.... Appreciate stars and contributions :)!

Collapse
 
alemesa profile image
Alejandro Mesa β€’

looks great Ana - I tho about making this tutorial with a GraphQL endpoint but it will add even more complexity to an already long post so I decided to keep it "simpler"

Collapse
 
pulakchakraborty profile image
Pulak Chakraborty β€’

Hey Alejandro, really a great post <3. I recently started learning React and this was a really helpful article from the learning aspect. Check out my verssion of the website here (c19-india-map.now.sh).

Also, would love the stars in my github repo ;-) (github.com/pulakchakraborty/c19-in...)! Cheers!

Collapse
 
alemesa profile image
Alejandro Mesa β€’

Thanks for the kind words, I'm glad it was useful
Your version is awesome btw, nice color scheme and graph on the side :)

Collapse
 
agnideep profile image
Agnideep Sarkar β€’

Loved this

Collapse
 
jfcarocota profile image
JesΓΊs Caro β€’

mexico provinces not included but thanks, this is really helpfull.

Collapse
 
alemesa profile image
Alejandro Mesa β€’

yeah the API I'm using doesn't offer Mexico's provinces but you could find another API that offers that or scrap the data yourself and combine the data

Collapse
 
raryson profile image
Raryson Pereira Rost β€’

Nice, thanks, I have made Nicolas Cage version:
nicolas-cage-covid-map.netlify.com/

Collapse
 
alemesa profile image
Alejandro Mesa β€’

lol, my eyes hurt from looking at that but nice job nonetheless πŸ‘

Collapse
 
parneet59 profile image
Parneet59 β€’

Hey...great post! Made me like with react even more!
Also, a quick question...why has the live demo stopped working? It's blank..

Collapse
 
alemesa profile image
Alejandro Mesa β€’

Hey Parneet59 thank you, works for me maybe the API was updating when you checked - I have no error handling or anything since I wanted to make this simple

Collapse
 
ianasqazi profile image
Anas Qazi β€’

Thank you so much @Alenjandro. I will use this as a practice app.

Collapse
 
alemesa profile image
Alejandro Mesa β€’

my pleasure, for sure... make it better :)

Collapse
 
rizkyrajitha profile image
Rajitha Gunathilake β€’

awesome πŸ‘ŒπŸ‘Œ , i'll try to add this to my existing app

covidlk.now.sh/

thanks

Collapse
 
ngud0119 profile image
Ngu.D.@ce β€’

Thank you, Alejandro.
πŸ‘ŒπŸ‘ŒπŸ‘Œ

Collapse
 
emanoellopes profile image
Emanoel Lopes β€’

Great post, really thanks!
Inspired in your post, I did my version:

react-covid19-tracker.netlify.com/

Collapse
 
alemesa profile image
Alejandro Mesa β€’

🀩Looks awesome dude, I love the charts πŸ‘
I think my only reco is to add a border to circles where there are not many cases, because with this mapbox theme sometimes is hard to notice