nickdos/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ALA map legend generator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">


<style>
    body {
        padding: 20px;
    }

    span#query {
        font-family: 'courier','Lucida Console';
        color: blue;
    }

   .legend {
       border: 1px solid gray;
       padding: 10px;
       display: inline-block;
   }

   .legendItemName {
       font-style: italic;
   }

   i.legendColour {
        -webkit-background-clip: border-box;
        -webkit-background-origin: padding-box;
        -webkit-background-size: auto;
        background-attachment: scroll;
        background-clip: border-box;
        background-image: none;
        background-origin: padding-box;
        background-size: auto;
        display: inline-block;
        height: 13px;
        line-height: 12px;
        width: 13px;
        margin-bottom: -1px;
        margin-left:2px;
        margin-right:5px;
        opacity:1;
        filter:alpha(opacity=100);
    }


</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var q = getParameterByName('q');
        var cm = getParameterByName('cm');

        $('#query').html(q);

        $.ajax({
            url: "http://biocache.ala.org.au/ws/mapping/legend.json?q=" + q + "&cm=" + cm + "&type=application%2Fjson",
            jsonp: "callback",
            dataType: "json",
            success: function(data) {
                $('.legendTable').html('');

                $.each(data, function(index, legendDef) {
                    var legItemName = legendDef.name ? legendDef.name : 'Not specified';
                    addLegendItem(legItemName, legendDef.red,legendDef.green,legendDef.blue, legendDef );
                });
            }
        });
    });

    function addLegendItem(name, red, green, blue, data){
        var nameLabel = name; //jQuery.i18n.prop(name);
        var isoDateRegEx = /^(\d{4})-\d{2}-\d{2}T.*/; // e.g. 2001-02-31T12:00:00Z with year capture
        if (name.search(isoDateRegEx) > -1) {
            // convert full ISO date to YYYY-MM-DD format
            name = name.replace(isoDateRegEx, "$1");
        }
        $(".legendTable")
            .append($('<tr>')
                .append($('<td>')
                    .append($('<i>')
                        .addClass('legendColour')
                        .attr('style', "background-color:rgb("+ red +","+ green +","+ blue + ");")
                    )
                )
                .append($('<td>')
                    .append($('<span>')
                        .addClass('legendItemName')
                        .html((nameLabel.indexOf("[") == -1) ? nameLabel : name)
                    )
                )
            )
        // );
    }

    function rgbToHex(redD, greenD, blueD){
        var red = parseInt(redD);
        var green = parseInt(greenD);
        var blue = parseInt(blueD);

        var rgb = blue | (green << 8) | (red << 16);
        return rgb.toString(16);
    }

    function getParameterByName(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }


</script>
</head>
<body>
<!--<h2>Map Legend for <span id='query'>[not provided]</span></h2>-->
<br>
<br>
<div class="legend">
    <table class="legendTable">

    </table>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>ALA map legend generator</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">


	<style>
	body {
	padding: 20px;
	}

	span#query {
	font-family: 'courier','Lucida Console';
	color: blue;
	}

	.legend {
	border: 1px solid gray;
	padding: 10px;
	display: inline-block;
	}

	.legendItemName {
	font-style: italic;
	}

	i.legendColour {
	-webkit-background-clip: border-box;
	-webkit-background-origin: padding-box;
	-webkit-background-size: auto;
	background-attachment: scroll;
	background-clip: border-box;
	background-image: none;
	background-origin: padding-box;
	background-size: auto;
	display: inline-block;
	height: 13px;
	line-height: 12px;
	width: 13px;
	margin-bottom: -1px;
	margin-left:2px;
	margin-right:5px;
	opacity:1;
	filter:alpha(opacity=100);
	}


	</style>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

	<script type="text/javascript">

	$(document).ready(function () {

	var q = getParameterByName('q');
	var cm = getParameterByName('cm');

	$('#query').html(q);

	$.ajax({
	url: "http://biocache.ala.org.au/ws/mapping/legend.json?q=" + q + "&cm=" + cm + "&type=application%2Fjson",
	jsonp: "callback",
	dataType: "json",
	success: function(data) {
	$('.legendTable').html('');

	$.each(data, function(index, legendDef) {
	var legItemName = legendDef.name ? legendDef.name : 'Not specified';
	addLegendItem(legItemName, legendDef.red,legendDef.green,legendDef.blue, legendDef );
	});
	}
	});
	});

	function addLegendItem(name, red, green, blue, data){
	var nameLabel = name; //jQuery.i18n.prop(name);
	var isoDateRegEx = /^(\d{4})-\d{2}-\d{2}T.*/; // e.g. 2001-02-31T12:00:00Z with year capture
	if (name.search(isoDateRegEx) > -1) {
	// convert full ISO date to YYYY-MM-DD format
	name = name.replace(isoDateRegEx, "$1");
	}
	$(".legendTable")
	.append($('<tr>')
	.append($('<td>')
	.append($('<i>')
	.addClass('legendColour')
	.attr('style', "background-color:rgb("+ red +","+ green +","+ blue + ");")
	)
	)
	.append($('<td>')
	.append($('<span>')
	.addClass('legendItemName')
	.html((nameLabel.indexOf("[") == -1) ? nameLabel : name)
	)
	)
	)
	// );
	}

	function rgbToHex(redD, greenD, blueD){
	var red = parseInt(redD);
	var green = parseInt(greenD);
	var blue = parseInt(blueD);

	var rgb = blue \| (green << 8) \| (red << 16);
	return rgb.toString(16);
	}

	function getParameterByName(name) {
	var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
	return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
	}


	</script>
	</head>
	<body>
	<!--<h2>Map Legend for <span id='query'>[not provided]</span></h2>-->
	<br>
	<br>
	<div class="legend">
	<table class="legendTable">

	</table>
	</div>
	</body>
	</html>