Monday, July 03, 2006

How to include a draggable sectional chart in your blog

This post explains how to include an aeronautical sectional chart in your blog. You can center it on your home airport and it will automatically be current all the time. As an added benefit it will be interactive, i.e. draggable and zoomable! In this example we will put the chart in the sidebar of a blog on blogger.com. In fact you can place the chart anywhere and these instructions would be very similar for other blogging platforms.

All you need is the flyagogo.net Charts API. Most blog sites allow inclusion of javascript code in the site's header. If you have a blogger.com blog insert a few statements in the header of the blog's template:
<script src="http://flyagogo.net/api/gogochart.js?key=your_key"
type="text/javascript"> </script>
Replace the "your_key" part by your own API key! If you do not have an API key yet, get one for free here: http://www.flyagogo.net/api. Finally at the end of the template just in front of the closing body tag insert this:
<script type="text/javascript">
var gogoChart= new gogoChart(250,250,-122.375,37.619,8);
gogoChart.addZoomButtons();
</script>
Edit the size and geographical coordinates as desired. Note: Posting a chart in a blog post itself is a bit troublesome since most blogging platforms will not allow to execute javascript (that would allow you to center the chart on a certain airport) from a blog post.