+

Andrew Wolfe

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.

Eric's Map

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

<a href="lat-long-json.html?+36.0741803/-105.4886080">Link</a>

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.

More Posts

Using Agile? Using Github? Need a Burn Chart?

Part 3 - Second Project using Agile - Using Github Issues with Agile, Ahhh Milestones

Doing What I Can to Contribute to Project Open Data

A Quick Jekyll Framework

Making Jekyll Dynamic ... Sort Of

A Little Bit of Work Advice

Using Jekyll to Build a Data Visualization for the FCC

Please, Please, Please Stop Centralizing Everything

I Am a Web Designer / Developer, But Read the Job Description

Part 2 - First Project using Agile - Using Github Issues with Agile

Part 1 - First Project using Agile - The Evolving Process

It Really is the Same Everywhere

Helping feoMike

Is this going to happen again in a few years?

Re-thinking the way I build websites ... simplifying

Designing the State Sequester Project