Permalink
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (97 sloc) 4.11 KB
<!DOCTYPE html>
<html>
<head>
<title>Aeris.js - Geosearch Example</title>
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../weather.ico"/>
<link rel="stylesheet" href="../css/example.css"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://cdn.aerisjs.com/aeris-gmaps-plus.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="../apikeys.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<div id="loading">Loading...</div>
<div class="controls">
<label>
Search by location:
<input id="location" type="search"/>
</label>
<button id="geocode">Geocode</button>
</div>
<div class="prompt">
<h1>Geocode example</h1>
<h2>Aeris.js</h2>
<p>
An <code>aeris.geocode.GeocodeServiceInterface</code> allows you to convert a named location to a latitude/longitude coordinate. Aeris.js provides wrappers around the <a href="https://developers.google.com/maps/documentation/geocoding/" target="_blank">Google Maps Geocoding Service</a>, as well the <a href="http://www.mapquestapi.com/geocoding/" target="_blank">MapQuest Geocode API</a>
</p>
<p>
By providing multiple implementations of single interface, Aeris.js allows you to easily switch between geocoding services, without affecting other code.
</p>
<p>
To get started <strong>enter a place name in search input, then click the "Geocode" button.</strong>
</p>
<small>
Having trouble? <br>
Make sure you've created a <code>apikeys.js</code> file, with a valid MapQuest API key</code>.
</small>
</div>
<script type="text/javascript">
// Create our map objects, so they are
// ready to render
var map = new aeris.maps.Map('map-canvas');
var marker = new aeris.maps.markers.Marker();
var infoBox = new aeris.maps.InfoBox();
var geocoder = new aeris.geocode.AerisGeocodeService();
// Alternatively, use the GoogleGeocodeService
// var geocoder = new aeris.geocdoe.GoogleGeocodeService();
//
// Or, the MapQuestGeocodeService
// var geocoder = new aeris.geocode.MapQuestGeocodeService({
// // requires an api key
// apiId: 'MY_MAPQUEST_API_KEY'
// });
// Configure Aeris API keys (required for the AerisGeocodeService)
aeris.config.setApiId(apiKeys.aeris.id);
aeris.config.setApiSecret(apiKeys.aeris.secret);
$('#geocode').click(function() {
var location = $('#location').val();
$('#loading').fadeIn(100);
geocoder.geocode(location).
// `done` callback receives an
// aeris.geocode.GeocodeServiceResponse object
done(function(response) {
// Move map objects to the geocoded location
marker.setPosition(response.latLon);
infoBox.setPosition(response.latLon);
infoBox.setContent(response.latLon[0].toFixed(1) + ', ' + response.latLon[1].toFixed(1));
// Render map objects on the map
marker.setMap(map);
infoBox.setMap(map);
// Center the map on the location
map.setCenter(response.latLon);
map.setZoom(8);
}).
// `fail` callback receives an
// aeris.geocode.GeocodeServiceResponse object
fail(function(response) {
// Erase map objects
marker.setMap(null);
infoBox.setMap(null);
if (response.status.code = aeris.geocode.GeocodeServiceStatus.INVALID_REQUEST) {
alert('Unable to find ' + location + ': ' + response.status.message);
}
else {
throw new Error('Failed to geocode location: ' + response.status.message);
}
}).
always(function() {
$('#loading').delay(400).fadeOut(100);
});
});
</script>
</body>
</html>