Start a new topic

Geo: Arrow that points to specific heading

Hello,

   i have two locations (lat lon) p1 and p2.I want to draw an arrow [flat on the ground] (using HTMLdrawable) on p1 that points toward p2.


I am able to calculate the heading of p1 toward p2 (on earth surface) with a various on code snippets in both JS or native.


As of this post https://support.wikitude.com/support/discussions/topics/5000079806/page/last#reply-to-post it seems that "Unfortunately is is not possible to define a  heading of a GeoObject, it is always facing towards the user.".


Is there a way to achieve this?


The drawable have some rotation properties that use x,y,z but it seems that they are  screen or camera relative not to the geo world. Correct?


Thank you in advance

Enrico


Hi,


Can you please provide details (including code snippets/samples) of your implemention of the approach that was sent by my colleague so we can check your code internally.


Thx


Nicola

Hello Nicola,

  This is the marker. I intentionally left the values for rotation to zero.

 

function Marker(poiData) {

	//  For creating the marker a new object AR.GeoObject will be created at the specified geolocation. An AR.GeoObject connects one or more AR.GeoLocations with multiple AR.Drawables. The AR.Drawables can be defined for multiple targets. A target can be the camera, the radar or a direction indicator. Both the radar and direction indicators will be covered in more detail in later examples.
	this.poiData = poiData;

	var altitude = World.markerAltitude;
	var bearing = this.poiData.bearing;
	console.log("i: " + poiData.index + "\t bearing: " + bearing);

	// create the AR.GeoLocation from the poi data
	var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, altitude);

	this.markerDrawable = new AR.ImageDrawable(World.markerDrawable, World.markerScale, {
		onClick: Marker.prototype.getOnClickTrigger(this),
		opacity: 1,
		rotate: {  // I used the rotate.global here, too
            x: 0, y: 0, z: 0  // I left the values at 0, but we use the bearing here and we rotate the marker to appear flat on the ground
		}
	});

	var drawables = {};
	drawables.cam = [this.markerDrawable];

	if (poiData.isLast) {
		var indicatorImage = new AR.ImageResource("assets/arrow-indicator.png");

		var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {
			verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
		});

		drawables.indicator = [indicatorDrawable];
	}

	// create the AR.GeoObject with the drawable objects
	this.markerObject = new AR.GeoObject(markerLocation, {
		drawables: drawables
	});

	return this;
}

Marker.prototype.getOnClickTrigger = function (marker) {

	return function () {
		World.onMarkerSelected(marker);
		return true;
	};
};

 and here is how we calculate the bearing:


 

function bearingFromPoi(poi1, poi2) {
	return bearingFrom(poi1.latitude, poi1.longitude, poi2.latitude, poi2.longitude);
}

/**
 * Calculate the bearing between two positions as a value from 0-360
 *
 * @param lat1 - The latitude of the first position
 * @param lng1 - The longitude of the first position
 * @param lat2 - The latitude of the second position
 * @param lng2 - The longitude of the second position
 *
 * @return int - The bearing between 0 and 360
 */
function bearingFrom(lat1, lng1, lat2, lng2) {
	var dLon = (lng2 - lng1);
	var y = Math.sin(dLon) * Math.cos(lat2);
	var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
	var brng = _toDeg(Math.atan2(y, x));
	return 360 - ((brng + 360) % 360);
}

/**
	 * Since not all browsers implement this we have our own utility that will
	 * convert from degrees into radians
	 *
	 * @param deg - The degrees to be converted into radians
	 * @return radians
	 */
function _toRad(deg) {
	return deg * Math.PI / 180;
}

/**
 * Since not all browsers implement this we have our own utility that will
 * convert from radians into degrees
 *
 * @param rad - The radians to be converted into degrees
 * @return degrees
 */
function _toDeg(rad) {
	return rad * 180 / Math.PI;
}

 the bearing is calculated for each poi as the bearing to the next one:

 

poiData[i].bearing = bearingFromPoi(poiData[i], poiData[i + 1]);

 

Hi!

as stated in a previous post, please try setting rotatesToCamera to false. This should solve your issue.

Hope that helps,

best regards,

Please have a look at the attributes


rotate.global.x/y/z

and ensure to disable rotatesToCamera


Best regards

Login or Signup to post a comment