Device
Geolocation
This is an example managing geolocation:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Device: Geolocation - Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/device/geolocation/try" />
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
Geolocation supported: <span id="geolocation_supported">Unknown</span><br />
<br />
<div id="controls">
<button onClick="getLocationConstantly();">Get location constantly</button><br />
<br />
<button onClick="getLocationConstantlyStop();">Stop getting location constantly</button><br />
<br />
Location when loaded: <span id="location_once">No data</span><br />
<br />
Location constantly (high accuracy): <span id="location_constantly">No data</span>
<br />
</div>
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/device/geolocation" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; cursor:hand; }
#controls { display:none; visibility:hidden; }
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Geolocation management support detection:
if (CB_Device.Location.isSupported())
{
CB_console("The Geolocation API (or compatible ones as Apache Cordova's Geolocation plugin) is supported.");
CB_Elements.showById("controls");
CB_Elements.insertContentById("geolocation_supported", "Yes");
//Gets the position once:
CB_Device.Location.get
(
//Position is obtained successfully:
function(data) { showData(data, "once"); }, //Shows the object with the location information. Data will be normalized automatically.
//Position cannot be obtained successfully:
function(error) { showError(error, "once"); }, //Shows the error object.
//Options:
{ enableHighAccuracy: false } //Without high accuracy.
);
}
else
{
CB_console("The Geolocation API (or compatible ones as Apache Cordova's Geolocation plugin) is not supported.");
CB_Elements.insertContentById("geolocation_supported", "No");
}
}
//Starts getting the location constantly:
var watchID = null;
var keepAwakeLock = null;
function getLocationConstantly()
{
if (watchID || keepAwakeLock) { getLocationConstantlyStop(); } //If it was enabled, stops it first.
CB_console("Starts getting the location constantly...");
CB_Elements.insertContentById("location_constantly", "No data. Waiting...");
//Gets the position constantly (as soon as it changes):
watchID = CB_Device.Location.getConstantly
(
//Position is obtained successfully:
function(data) { showData(data, "constantly", watchID); }, //Shows the object with the location information. Data will be normalized automatically.
//Position cannot be obtained successfully:
function(error) { showError(error, "constantly", watchID); }, //Shows the error object.
//Options:
{ enableHighAccuracy: true } //Requests high accuracy.
);
//Sets an awake lock which tries to keep getting the position, even when the app is invisible or screen is locked:
keepAwakeLock = CB_Device.Location.keepAwake();
if (keepAwakeLock) { CB_console("Awake lock set!"); }
else { CB_console("Awake lock could not be set!"); }
}
//Stops getting the location constantly:
function getLocationConstantlyStop()
{
//If it was enabled, exits:
if (!watchID)
{
CB_console("Cannot be stopped if it is not enabled yet.");
CB_Elements.insertContentById("location_constantly", "Cannot be stopped if it is not enabled yet.");
return;
}
CB_console("Stops getting the location constantly [watchID=" + watchID + "]...");
//Stops getting the position constantly:
watchID = CB_Device.Location.getConstantlyDisable(watchID);
//Tries to stop the awake lock:
keepAwakeLock = CB_Device.Location.keepAwake(false, keepAwakeLock);
if (typeof(keepAwakeLock) === "undefined") { CB_console("Awake lock stopped!"); }
CB_Elements.insertContentById("location_constantly", "[STOPPED]");
}
//Shows the data in the desired element:
function showData(data, dataType, watchID)
{
CB_console("Data received:");
var output = "Data: { ";
output += "coords: { ";
output += "latitude: " + data.coords.latitude + ", ";
output += "longitude: " + data.coords.longitude + ", ";
output += "accuracy: " + data.coords.accuracy + ", ";
output += "altitude: " + data.coords.altitude + ", ";
output += "altitudeAccuracy: " + data.coords.altitudeAccuracy + ", ";
output += "heading: " + data.coords.heading + ", ";
output += "speed: " + data.coords.speed;
output += " }, ";
output += "timestamp: " + data.timestamp;
output += " }";
if (!isNaN(watchID)) { output = "[watchID=" + watchID + "] " + output; CB_console("watchID=" + watchID); }
CB_console(data);
CB_Elements.insertContentById("location_" + dataType, output);
}
//Shows the error in the desired element:
function showError(error, dataType, watchID)
{
CB_console("Error: ");
var output = error;
if (!isNaN(watchID)) { output = "[watchID=" + watchID + "] " + error; CB_console("watchID=" + watchID); }
CB_console(output);
CB_Elements.insertContentById("location_" + dataType, "ERROR: " + output);
}
You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.