Azimuth/Bearing Function

2689
3
05-09-2016 07:26 PM
LindaDunklee
New Contributor III


Has anyone done any development to the Measurement widget/a custom widget to measure azimuth?  There is a function to measure heading in Google Earth that would be nice to mimic inside of Web App Builder.

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus

Linda,

  I have not and I have not seen where any other developer has this either. Looking at Tom Sellsted's Measure widget there is already some trig function in there to calculate the angle to place the text at when drawing the line so you could easily add this angle to the text symbols length text that is currently being added.

TomSellsted
MVP Regular Contributor

Linda,

Robert is correct.  I also have this on my wishlist of enhancements to the measure widget.  I will be adding that functionality sometime soon.

Regards,

Tom

LindaDunklee
New Contributor III

I ended up figuring this out outside of the measurement widget - for anyone looking for JS code:

function measureBearing(){
tb = new Draw(map);
tb.on("draw-end", lang.hitch(map, getBearing));
tb.activate(Draw.LINE);
}

function getBearing(evtObj){
var map = this,
geometry = evtObj.geometry;
map.graphics.clear();
start = webMercatorUtils.xyToLngLat(geometry.paths[0][0][0], geometry.paths[0][0][1]);
end = webMercatorUtils.xyToLngLat(geometry.paths[0][1][0], geometry.paths[0][1][1]);
start_long = start[0];
start_lat = start[1];
end_long = end[0];
end_lat = end[1];
x = Math.cos(end_lat) * Math.sin(end_long - start_long);
y = Math.cos(start_lat) * Math.sin(end_lat) - Math.sin(start_lat) * Math.cos(end_lat) * Math.cos(end_long - start_long);
b = Math.atan2(x,y);
degrees = b * (180/Math.PI);
console.log(degrees);
if (degrees < 0){
degrees = 180 - Math.abs(degrees) + 180;
}
document.getElementById("measurementOutput").innerHTML = "<b>Bearing: </b>" + degrees.toFixed(2) + '9\xB0';
document.getElementById("measurementOutput").style.display = "block";
var graphic = map.graphics.add(new Graphic(geometry, new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([255,0,0]),
3
)));

}