Skip to content

An "augmented reality" attempt, mashing up the mobile Camera with a Map and using the compass/GPS to force the map to lock to your position, all in HTML5/JS

License

Notifications You must be signed in to change notification settings

lukepatrick/MapCompassCameraJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

See it Live - this is the JS demonstration, used best with Firefox v25+ on an Android device


###Purpose Demonstration of mashing up the basic map resource with all the latest sensory awareness from an HTML5 device


###Overview This demonstration involves two parts:

USER INTERFACE

  • Emphasis of this project was on demonstration of the capabilities in a modern UI framework
  • An attempt to push the limits of a web browser, JavaScript, and HTML5
  • Where JS/HTML5/Browsers fell short, a demonstration of a Native-built app was used
    HTML5 elements used:
  • getUserMedia/Stream API
  • Geolocation API
  • DeviceOrientation API
  • CSS Transforms API
    JavaScript Frameworks used:
  • ArcGIS JS API
    Browsers used:
  • Chrome for Mac, Windows, iOS, Android
  • Firefox for Mac, Windows, Android
  • note that Firefox(beta) for Android was the only device usable with all HTML5 APIs
    Native App:
  • ObjectiveC / iOS

DATA SOURCES

  • The main REST resource used is the demo is the publically available ArcGIS Labels/Reference MapService
  • Other data sources are the sensory awareness of the device used
  • GPS signals for position
  • GPS/Accelerometers for bering
  • Camera/Media feed for reality as the backdrop

###Technical Details

HTML

<body bgcolor="000">
	<div>
		<section id="app" hidden>
			<div class="container">
			<span id="live"><div id="map"></div> </span>
			<video id="monitor" autoplay></video>
			</div>
		</section>
	</div>
</body>

Geolocation

// check if geolocaiton is supported
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
		// retrieve update about the current geographic location of the device
		watchId = navigator.geolocation.watchPosition(showLocation, locationError);
	} else {
		alert("Browser doesn't support Geolocation. Visit http://caniuse.com to discover browser support for the Geolocation API.");
	}

Orient

function orientationChangeHandler() {
	// An event handler for device orientation events sent to the window.
	orientationHandle = on(window, "deviceorientation", onDeviceOrientationChange);
	// The setInterval() method calls rotateMap at specified intervals (in milliseconds).
	renderingInterval = setInterval(rotate, 100);
}

Rotate Map

if (has('ff')) {
	var updatedAngle = Angle;
	dom.byId("map").style.MozTransform = "rotate(0deg)";
	dom.byId("map").style.MozTransform = "rotate(" + updatedAngle + "deg)";
}

getUserMedia for the proper browser

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
//Then execute getUserMedia:  

navigator.getUserMedia({
	video : true,
	audio : false}, 
	function(localMediaStream) {
		var video = document.getElementById('monitor');
		video.addEventListener('click', changeFilter, false);
		video.src = window.URL.createObjectURL(localMediaStream);
	}, 
	onFail
);

About

An "augmented reality" attempt, mashing up the mobile Camera with a Map and using the compass/GPS to force the map to lock to your position, all in HTML5/JS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published