In part 1 I covered creating the Rails app and importing the data for my Ontario Covid19 visualization site at http://covid.philsmy.com/. This time I’ll look at getting a map on the page using Google Maps API.
Create a Controller
I cheated a little bit here. I knew that I wanted to just show data for Ontario, so I created an Ontario Controller
rails g controller ontario indexI always add the following the my application.html.erb so that I have spots available at the to and bottom of the page to add in code
<head>
...
<%= yield :page_header %></head<body>
...
<%= yield :page_bottom %></body>
We’ll need these later.
The Map
For our index page, I want to show a Google map across the top showing the locations of each reporting health center (that’s as good a data as we get), with some info.
We need to add some code to the page (obviously!).
- First I put some CSS to make the map (very) big at the top of the page and leave some toolbar space.
- Put the actual map div on the page.
- Put code at the bottom of the page to a) load the data from our data URL and b) add an info window that gives some basic info when they click on a pin.
If you don’t have any experience with Google Maps API it might be a bit overwhelming, but, in essence, there is an initMap() function on line 22. That is called when the map is created. You can see that on line 65 in the call to the Google Maps API that we pass a callback parameter for initMap.
initMap() creates the map element, and stuffs it into the map div we put onto the page at line 16. On line 35 we tell it that our data source is at a URL.
Starting on line 42 there is a function assigned to the window called eqfeed_callback. This can be called anything. As we’ll see in a minute, you’ll set that in the data you return.
Inside this callback we create the infowindow for the map, which will pop up when we click on a marker. If you have questions about this ask in the comments below.
The Map Data
On the OntarioController I added a method called map_data. In the routes.rb add a line so we can call it:
Rails.application.routes.draw do
...
get 'ontario_map_data', to: 'ontario#map_data'
...
endAnd in the controller lets grab the patient data and put it into a map-friendly format.
Here’s what’s going on.
- Find the data and group it by where it came from (we just need this so we can access the name), and the latitude and longitude, and also the reporting website (again so we can use it later)
- Iterate over that set — one record per reporting location — and add it to a map in the Google Maps format.
- Wrap the whole thing in the
eqfeed_callbackfunction that we assigned on the page up above. - Pass the data back
Note that on the page I call the URL with a .js extension just to make sure we know what format to handle.
Done!
You should now have a map on your page that calls your map_data method on the controller and displays all the locations, just like the one at the top of this article.
Next time I’ll look at the other visualizations of the data that I have on the http://covid.philsmy.com/ website.
