Covid19 App - Microsoft Bing Covid19 Visualizer 🌍

visit

Peek a boo!😍

Steps:-

• 0. What we are making - https://bing.com/covid

• 1. Fetch the json data using from https://bing.com/covid/data

  • get countrywise,statewise,citywise data
  • and corresponding geojson data using geojson library

• 2. Setup map and display it on the screen. (Use Mapbox GL JS in a React app )

  • Get a reference to map container
  • create map using new new mapboxgl.Map()
  • add styles(mapbox://styles/mapbox/streets-v11)
  • add default lat,long,zoom - used indias(lat: "22.4034", lng: "80.6", zoom: "3.2")
  • Add map Controllers for zoomin zoom out and geolocation as well -[x] map move listeners

• 3. Jump in Map Render cities on left panel and add onclick listener to jump to that country in map.

• 4. Add layers on map load, popup on map load, toggle layers.

  • Toggle Layers
  • Mapbox-popup

Resource-

• Mapbox-gl

What you need

• A text editor. Use the text editor of your choice for writing HTML, CSS, and JavaScript.
• A Mapbox access token. Your Mapbox access tokens are on your Account page.
• Node.js and npm. To run the commands necessary to run your React app locally, install Node.js and npm.
• Working familiarity with React.
• Mapbox GL JS. Mapbox GL JS is a JavaScript library used for building web maps.

Wanna Contribute

git clone ${url}
cd server && npm start - to run server
yarn start - to run frontend
make changes
send PRs
Get them merge into the codebase✌✌✌

server and frontend on now.sh

https://covid19shau.now.sh/
https://covid19-server-iota.now.sh/