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