Making Jekyll Dynamic ... Sort Of
April 26, 2013
The problem was that he wanted to do this using gh-pages. Wait, gh-pages are static. We can't make the AJAX call to another domain to even get the json. Wait, we can figure this out.
A co-worker, Eric Spry (@xactoeric), is using TileMill which allows him to build dynamically generated links around parts of the map to whatever URL he needs. What he wanted to do was have the link point to a page that would be able to get the latitude and longitude and then build another URL to make an API call to the Broadband Map API. And then output the raw json response to the screen.
The problem was that he wanted to do this using gh-pages.
Uh, oh. Jekyll, we have a problem
Wait, gh-pages are static. We can’t make an AJAX call to another domain to even get the json.
jsonp to the rescue
Thankfully the Broadband Maps API provides a jsonp format as well.
So I quickly built a demo to show that we could do what he needed. I created a Jekyll template that acted as the link that Eric would have in his map; just a simple link, like this
You can see that link adds an argument to the URL with the lat/long.
My lat-long-json.html template simply reads the URL, picks it apart and gets the lat/long. It then builds the API call to Broadband Maps using that lat/long, makes the ajax call and outputs the json string to the page.
The proof
Check out the example I gave to Eric.
Not exactly ground breaking, but does lay some ground work for future possibilities.