flyagogo.net - Charts API Program

Charts API Program

flyagogo.net publishes an API (application programming interface) trough which any website can offer current, interactive sectional charts to its visitors. Do you have a homepage, an aviation related blog or website, or are you the web-master of a flying club? Then you are invited to include an interactive sectional chart on your webpage. If you are operating a commercial web presence with a large number of visitors, you must first contact us before using the Charts API. In case of doubt please drop us a line at info@flyagogo.net.

All that is needed to include a draggable and zoomable chart on your own webpage is a free account with flyagogo.net. If you do not already have one click here. Then follow the instructions below. Include a few lines of html/javascript on your webpage and you are ready to go!

Documentation

This is the beginning of a documentation for the flyagogo.net Charts API. This document and the API itself is under development. Any feedback is welcome. Let us know what you want to do with the interactive sectional charts on your website and we might be able to add new functionality to the API.

What code to include on your website

To get started log in to your flyagogo.net account (get one if you do not already have an account), and create a code snippet following the instructions here:

http://www.flyagogo.net/personalize/createSnippet.php

This will create a code snippet similar to the following one:

  
  <div id="gogoChart"><a href="http://www.flyagogo.net">Online charts at flyagogo.net</a></div>
  <script src="http://flyagogo.net/api/gogochart.js?key=ec802e9840cfb1c411c24f1e95c51768" 
    type="text/javascript"></script>
  <script type="text/javascript">
    var gogoChart= new gogoChart(250,250,-122.375,37.619,8);
    gogoChart.addZoomButtons();
  </script>

The line marked in green inserts a div statement with id="gogoChart" on your webpage. You can insert that div anywhere you like. That's where the chart will appear. The line marked in blue loads the javascript code library neccessary for the interactive charts to work. Make sure to specify your own api key which is assigned to you when creating a code snippet. Each user obtains a unique key. The line in red creates the actual chart object gogoChart. The calling parameters are described below. You can now make calls to the Charts API by calling methods of the chart object.

Public methods

var gogoChart=new gogoChart(...)	Constructs the chart object as shown above. The parameters are as follows: chart width and height in pixels, default longitude, default latitude, default zoom level.
gogoChart.addZoomButtons()	Adds zoom in and out buttons to the chart.
gogoChart.moveMeTo(lng,lat)	Centers the chart on the given longitude and latitude. lng and lat are given in degrees and as floating point values, i.e. San Francisco would be lng= -122.37 and lat= 37.62.
gogoChart.setZoomLevel(level)	sets the given zoom level. level can be between 1 and 8, where 8 corresponds to the highest zoom level.
gogoChart.resizeViewer()	Normally you will never need to call this method, except your page layout is dynamic and the charts div will dynamically change its size, for example after the browser window changes its size. In that case you are required to call this method after a size change to make sure that the chart objects knows about the change.

A simple example

Imagine you have a list of frequently visited airports on your homepage and of course a draggable sectional chart. If a visitor clicks on one of your airport links the sectional chart on your homepage will automatically move to that airport. That's easy to do using the Charts API. For each airport insert a link like this:

<a href="javascript:gogoChart.moveMeTo(-122.37,37.62)">San Francisco Airport<a>

Tip: One can find out the longitude and latitude of an airport by searching for it with flyagogo.net and then copying the numbers from the "link to this page" link at the top of the webpage.

You can see this example in action here:

Simple Example

Another example

It's easy to insert a chart on a blogger.com blog or any other blog that would allow you to insert a couple lines of javascript. Click here to see an example:

aviationtalk blog