Added a prototype for aqicnLayer and tileLayer

[kevinzluo]

Fixes #49 and #57

I have begun to implement the AQI Layer. Luckily there is no CORS blocked error this time!

The first of the AQI layers (waqiLayer) is a tileLayer provided by AQICN. The issue with it is that it does not provide any more specific information, such as the city name.

The second of the layers (AQICNLayer) is one I am trying to build.
Currently I first grab data for stations within a region, which provides only their AQI, lat, lng, and uid. Then for each station in the region I grab more specific data using their ID (which for some reason changes to being called idx in their API?). The specific data includes measurements beyond the AQI, such as ozone measurements.
The problem with this is that there is a 1000 query per minute quota on each token ID, and because there are so many stations, the quota is quickly reached, even though I have tried to adjust the hashMap to only call for new stations.

Features to implement:

• Use widget API to create popups. This might eliminate the need to request more specific station data, but it also counts in the quota.
• Change marker color based on AQI. AQICN defines several different levels. Currently all markers are the default.
• Possibly set a min and max zoom

Current Issues:

• Quota is reached very quickly
• Map lags very badly due to too many markers

[kevinzluo]

@jywarren @sagarpreet-chadha
Could you please give me some advise on how to fix these issues?

[kevinzluo]

@jywarren @sagarpreet-chadha
I have finished the layer!
I must admit, working on this task was quite an experience. While it was fun and I did learn a lot, there were still several difficulties.

The markers were created using CSS, and popups were generated through their JSON API and their widget API when possible. The issue with the widget API is that it requires a specific city name that is not readily available, so only large cities, such as Beijing and London, can include it currently.

Currently the token used is linked to my own email. While I am perfectly fine with this, you may want to change it.

As you likely noticed, the AQI displayed by the widget and on the marker are different. This is most likely because the widget data is updated only every so often.

Please let me know if there are any changes you would like me to make.

Anyway, thank you so much for giving me the opportunity of working on this.

Kevin Luo

[sagarpreet-chadha]

AWESOME WORK 🎉 👍 😃 !

Adding some links first for other reviewers to see the documentations :
1.) http://aqicn.org/json-api/doc/ => API documentation .
2.) http://aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/ => widget API

The API limit is 1000 requests per minute so we are good to go for now 👍 !

Also you have used this table for color coding :

[sagarpreet-chadha]

@jywarren
Because the data is very large we can even use a map-tile-layer to show data , but we will not be able to use WIDGET API (that shows the pop-up) , but using this will ensure that the map does not lag .

Map-tile-layer on leaflet works smoothly :

What do you think @kevinzluo ?

[kevinzluo]

Yep. I also saw the map tile layer and implemented it in my first commit before removing it. I created the other layer to add the popups and additional info.

The layer I created does not lag too badly unless at low zoom levels, and I changed it to only fetch station specific data on popup open so the quota is not an issue.

I am fine with whichever we choose to use. Would you like me to re add the tileLayer?

[sagarpreet-chadha]

Okay , no need to add the tile-layer then 👍 . Awesome 🎈 !

[kevinzluo]

Hi. This one has been rebased too.

[jywarren]

This is /fantastic/ -- really tremendous work.

I'm going to bump the version number in package.json so these get picked up in MapKnitter and PublicLab.org next time they build. In the future, for any new feature, you can do the same and include it in the PR! See https://semver.org for more details.