Fetching contributors…
Cannot retrieve contributors at this time
64 lines (50 sloc) 1.93 KB
<!DOCTYPE html>
<title>Aeris.js - Tile Layers Example</title>
<!-- Leaflet -->
<link rel="stylesheet" href=""/>
<script type="text/javascript" src=""></script>
<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="../apikeys.js"></script>
<div id="map-canvas"></div>
<div id="loading">Loading...</div>
<div class="prompt">
<h1>Example: Tile Layer</h1>
The Aeris API provides a set of weather "tile" images, which can be overlaid on a map. See <a href="" target="_blank">Aeris
Interactive Tile documentation</a> for information about available tile layers.
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>.
<div class="controls">
<input min="0" max="100" value="100" id="opacity" type="range"/>
<script type="text/javascript">
var map = new aeris.maps.Map('map-canvas');
var satellite = new aeris.maps.layers.Satellite({
apiSecret: apiKeys.aeris.secret
// Opacity slider
$('#opacity').change(function() {
// Opacity must be number between 0 and 1.0
var opacity = $(this).val() / 100;