corona virus is terrible.
And we need to understand how terrible it is.
The most easy way is use the map and take a look how many person get sick.
Almost corona virus data is base on country.
Like this map :
For each Country have huge area.
It is not easy to handle distribution of details.
I think it have a lot of person want to know about degree of diffusion.
For example I live in Yokohama city.
Yokohama city in Kanagawa Prefecture and Kanagawa Prefecture in Japan.
In the map base on Country I only can get the info from Japan.
I have no idea in my City how degree of diffusion is.
It have few data base on City or Prefecture.
This is information for corona virus.
It have many website show the information and many data analysis.
Let's try to build the map for corona virus base on city.
Use free and fast way to build it.
It is small project.
And not need any strong server.
So I choose Heroku free plan to be a server.
It have two popular free resource map tools.
And I choose mapbox to be map.
mapbox is powerful and lighter for all device.
Why I choose mapbox not google map?
The good points of google map.
1.The best information.
2.Multiple style options.
Street View is a feature that provides interactive panoramas from different positions along lots of streets around the world. This feature can visualize Keyhole Markup Language (KML) and GeoRSS data on the map.
4.Extensive language support.
Google Maps supports many languages.
You can count on a large community and multiple developers providing support.
The bad points of google map.
The Google Maps pricing model is not easy to sort out. And this is the biggest catch.
Autocomplete makes a call for all letters typed in the search bar.
Another API call is made when a location is selected.
Directions are added to the nearest location.
The free plan for Google Maps is limited to 10 queries per second.
The good points of Mapbox.
1.Unique customization options.
Mapbox is more customizable than Google Maps.
Mapbox Maps SDKs are open-source. Mapbox shares their code on GitHub so it can always be seen, analyzed, and improved.
3.Integration with PubNub.
Mapbox partners with PubNub, which offers infrastructure-as-a-service for live data streaming, builds dynamic map visualizations from real-time data, and incorporates functionality like asset tracking, geocoding, and heatmaps.
The Mapbox Maps SDK for Unity allows for building location-based experiences using points of interest (POIs) all over the world. You can add locations using drag-and-drop maps and POIs, 3D buildings and terrain, place-based AR, and more.
The bad points of Mapbox.
1.Relatively weak coverage.
In this blog have detail info about google map vs mapbox.
Data API is come from trackcorona.
They already have map and data analysis.
But I want simple and customize.
First I try to analysis the API response and find out the key and data format.
Second I try to read mapbox document and use example to customize.
I choose this example to be map UI.
In this example circle only have one number.
But data have other data need to show it.
So I choose popup on click example to show the info.
Third when I use mapbox it need geojson format datasource.
I use this library to convert it.
Fourth I try to add chart in the popup but it not show all the area.
Then I use this example for fix this issue.
Fifth use the most sample way to show the chart.
I use SVG and regist new element and create it.
Sixth it have update time need to compare.
I use moment.js to compare the UTC date and time.
Seventh I try to deploy it to Heroku.
Because of document.registerElement is not a function.
I use this library to solve the issue.
I success build the corona virus map base on city.
This website is build by myself.
In this case I learning how to put the data on the map and show it.
mapbox have many API and many function can use.
And mapbox is light map for all device.