CrossBrowdy - Examples

Device

Geolocation

This is an example managing geolocation:

index.html:

<!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>

main.css:

/* 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; }

main.js:

/* 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);
	
}

Try this example

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.

Go back to Guides & Tutorials

Try this example












Share