Fetching contributors…
Cannot retrieve contributors at this time
132 lines (106 sloc) 3.74 KB
<!DOCTYPE html>
<title>Aeris.js - API Example</title>
<link rel="stylesheet" href="../css/example.css"/>
<link rel="shortcut icon" type="image/x-icon" href="../weather.ico"/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="../apikeys.js"></script>
<div id="map-canvas"></div>
<div id="loading">Loading...</div>
<div class="prompt">
<h1>Example: Aeris API</h1>
This example uses the <code>aeris.api.models.Forecast</code> object to fetch <a href="" target="_blank">forecast data from the Aeris API</a>. To get started <strong>click anywhere on the map</strong> -- you should see a popup with forecast information for that location.
Having trouble? <br>
Make sure you've created a <code>apikeys.js</code> file, with a valid Aeris <code>client_id</code> and <code>client_secret</code>.
<script id="forecast-template" type="text/template">
<table cellpadding="8px">
<% days.forEach(function(day) { %>
<td><b><%=formatTimestamp(day.timestamp) %></b></td>
<% }); %>
<% days.forEach(function(day) { %>
High: <%=day.maxTempF%>&deg; F <br>
Low: <%=day.minTempF%>&deg; F <br>
<% }); %>
<script type="text/javascript">
var infoBox;
var map = new aeris.maps.Map('map-canvas');
// Listen to map click events.
// All click events receive a latLon parameter
map.on('click', function(latLon) {
// Create a forecast model
var forecast = new aeris.api.models.Forecast({
id: latLon
}, {
// Aeris api parameters can be passed
// to the forecast model,
// or set using `setParams()`
params: {
client_secret: apiKeys.aeris.secret
// Show a 'loading' prompt during the request
// to the Aeris API
forecast.on('request', function() {
forecast.on('sync', function() {
// Fetch forecast data from the
// AerisAPI
// Chain a `done()` method,
// which handles a succesful API response
done(function(res) {
// Render an info box
// with some templated weather data
var html = _.template($('#forecast-template').html())({
days: res.response[0].periods
// Close any existing infobox
if (infoBox) { infoBox.setMap(null); }
// Create an info box with
// weather data
infoBox = new aeris.maps.InfoBox({
position: latLon,
content: $(html)[0]
// Add the infoBox to the map
// Chain a fail method, whose callback will
// receive an error if anything goes wrong
// with the request.
fail(function(err) {
alert('Error fetching forecast data: ' + err.message);
throw err;
function formatTimestamp(timestamp) {
var dayLookup = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sat'];
return dayLookup[new Date(timestamp * 1000).getDay()];