Permalink
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (86 sloc) 3.61 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="prompt">
<h1>Geolocation Example</h1>
<h2>Aeris.js</h2>
<p>
This example demonstrates the usage of aeris geolocation services. <b>Click the "Find Me!"</b> to trigger geolocation. The app will attempt to use <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation" target="_blank">native HTML5 geolocation</a>, or fallback to IP-based geolocation using <a href="https://freegeoip.net/" target="_blank">freegeoip</a>.
</p>
<p>
Don't believe it's working? Check out this <a href="https://chrome.google.com/webstore/detail/manual-geolocation/mfodligkojepnddfhkbkodbamcagfhlo" target="_blank">manual geolocation</a> extension for chrome.
</p>
<small>
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>.
</small>
</div>
<div class="controls">
<button id="findMe">Find me!</button>
</div>
<script type="text/javascript">
var map = new aeris.maps.Map('map-canvas');
// Configure Aeris API keys (required for the AerisGeolocateService)
aeris.config.setApiId(apiKeys.aeris.id);
aeris.config.setApiSecret(apiKeys.aeris.secret)
// Want to test out the IP-based geolocation?
// Just comment out this line to turn off HTML5
// geolocation:
// window.navigator = null;
$('#findMe').click(function() {
var geolocateService;
// Check if HTML5 geolocation is available
if (aeris.geolocate.HTML5GeolocateService.isSupported()) {
geolocateService = new aeris.geolocate.HTML5GeolocateService();
}
else {
// Fallback to IP-based geolocation
geolocateService = new aeris.geolocate.AerisGeolocateService();
}
$('#loading').show();
// Run the geolocator
geolocateService.getCurrentPosition().
// `done` callback receives an
// aeris.geolocate.results.GeolocatePosition
// object.
done(function(position) {
// Create a marker on the map
// where the user is located.
var marker = new aeris.maps.markers.Marker({
position: position.latLon
});
var infoBox = new aeris.maps.InfoBox({
position: position.latLon,
content: 'You are here!'
});
marker.setMap(map);
infoBox.setMap(map);
// Center the map at location
map.setCenter(position.latLon);
map.setZoom(12);
$('#loading').delay(100).fadeOut(100);
}).
// `fail` callback receives an
// aeris.geolocate.errors.GeolocateServiceError
// object
fail(function(err) {
throw err;
});
});
</script>
</body>
</html>