Geolocation GPS Updates Too Frequent

Instruction
Navigate to the following link using your Android/Smart phone via GPS (not Wi-Fi).

www.liamobyrne.com/CycleMile/media/pages/track.html

Click 'Start' and wait for your position to be located. It should display a map of your position and begin to update frequently.

Problem
My problem is that the updates are too frequent and ALWAYS cause my mobile browser to crash.

Question
Is there anyway (using JavaScript) that I can control the update time?

 

I would think the problem isn't so much the refresh rate, as it is how the data on the display is BEING refreshed -- you've got a part in there that's building a dozen or so textnodes and data using innerHTML, and that would force a full page reflow and take far, FAR more time than if you just put those elements in the DOM, and then set their values.

Setup: (should be run ONCE to put these on the DOM)

var info = document.getElementById('info');

info.makeDataRow = function(title,extraText) {
	var newE = this.appendChild(document.createElement('div'));
	newE.appendChild(document.createTextNode(title));
	var result = newE.appendChild(document.createTextNode('-'));
	if (extraText) newE.appendChild(document.createTextNode(extraText));
	this.appendChild(newE);
	return result;
}

info.fieldData = {
	latitude : info.makeDataRow('Latitude:'),
	longitude : info.makeDataRow('Longitude:'),
	accuracy : info.makeDataRow('Altitude:'),
	altitude : info.makeDataRow('Altitude Accuracy:'),
	altitudeAccuracy : info.makeDataRow('Heading:'),
	speed : info.makeDataRow('Speed:',' (mph)'),
	timestamp : info.makeDataRow('Timestamp:'),
	distance : info.makeDataRow('Distance Travelled:',' (miles)')
};

Code (markup):

Then inside your update function only update the values.

info.fieldData.latitude.nodeValue = position.coords.latitude;
info.fieldData.longitude.nodeValue = position.coords.longitude;
info.fieldData.accuracy.nodeValue = position.coords.accuracy;
info.fieldData.altitude.nodeValue = position.coords.altitude;
info.fieldData.altitudeAccuracy.nodeValue = position.coords.altitudeAccuracy;
info.fieldData.heading.nodeValue = position.coords.heading;
info.fieldData.speed.nodeValue = position.coords.speed * 2.2369;
info.fieldData.timestamp.nodeValue = new Date(position.timestamp).toLocaleString();
info.fieldData.distance.nodeValue = distance;

Code (markup):

That would run many, MANY times faster and possibly eliminate the crashing issue.

It's one of the reasons we've been told to STOP using innerHTML for some... seven or eight YEARS. Updating just the parts that need changing on the DOM is going to be WAY faster than sending that massive innerHTML with string addition.

It also seems like you are calling various google maps CREATE methods far, far more than you should -- It almost seems like you're creating them without DISCARDING them, and that too could be making mobile devices (or even non-mobile given enough time) go ker-plooey.

 

Hi @deathshadow

Thank you for your response.

I understand your explanation above, and it could possibly solve the crash issue I seem to be encountering. However, I believe there may be an easier way to solve this problem.

With the watchPosition() method using GPS, it updates both the map and positional values.

Instead of updating the map, why don't I just update the map cursor instead?

Could this be achieved using JavaScript?

 

I'm not that familiar with the Google Maps API, but that sounds like it would probably be the best approach. The constantly creating a new map every time is some hefty overhead.