API joiner

APIs are getting on for becoming the lifeblood of the internet but they can be a pain. If I need to get into the nitty-gritty of the API calls so that I can tweak the data they return to me I end up using Boxer to split the URI on question-marks and ampersands and then having to remember to join them before testing in the browser. Take this for example: http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false. Should I want to change that I'd pull it into Boxer and end up with something like this:

http://maps.googleapis.com/maps/api/staticmap
center=Brooklyn+Bridge,New+York,NY
zoom=13
size=600x300
maptype=roadmap
markers=color:blue|label:S|40.702147,-74.015794
markers=color:green|label:G|40.711614,-74.012318
markers=color:red|label:C|40.718217,-73.998284
sensor=false

It's a lot easier figuring out how to tweak it like that but squidging it all back together is a pain!

So, with a wee bit of free time last night, I wrote the tool above which takes the separate parts and does all the hard work for me! It just runs in your browser so feel free to copy the source if you'd like or use it where it is, its guts are easy as anything:

$(function(){
    $("#target").submit(function( event ) {
        event.preventDefault();
        var baseURI = $("#baseURI").val();
        var URILines = $("#URILines").val().split(/\n/);
        var lines = [];
        // http://stackoverflow.com/a/8479118
        for (var i=0; i < URILines.length; i++) {
            if (/\S/.test(URILines[i])) {
                lines.push($.trim(URILines[i]));
            }
        }
        $("#joinedLink").empty().append($("<a></a>", {
            "text": "New Link",
            "target": "_blank",
            "href": baseURI + "?" + lines.join("&")
        }));
    });
});

It's hosted on my Google Drive here: Make an url!, or just click the image above.