Mani,
Here is your code with arrow ends on the line:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map;
require(["esri/map",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/symbols/TextSymbol",
"esri/layers/GraphicsLayer",
"esri/geometry/Polyline",
"dojo/domReady!"
],
function(Map, Point,
PictureMarkerSymbol, CartographicLineSymbol, Graphic,
TextSymbol, GraphicsLayer, Polyline) {
var longitude = -12.45;
var latitude = 37.75;
var point = new Point(longitude, latitude);
var layer = new GraphicsLayer();
map = new Map("map", {
basemap: "osm",
center: point, // longitude, latitude
zoom: 3,
maxZoom: 7,
minZoom: 3,
});
//text symbol//
var arrow = function(pt1, pt2) {
return new TextSymbol({
text: '\u25BC',
angle: setAngle(pt1, pt2),
type: "esriTS",
color: new dojo.Color([0, 0, 255, 0.5]),
font: {
size: 13,
style: 'normal',
type: 'font',
variant: "normal",
weight: "normal",
family: "Lucida Console"
}
});
};
//angle function//
var setAngle = function(p1, p2) {
var rise = p2[1] - p1[1];
var run = p2[0] - p1[0];
var angle = ((180 / Math.PI) * Math.atan2(run, rise));
return angle - 180;
}
function createPolyLine(sourcePoint, destPoint) {
var point1 = new Point(sourcePoint[0], sourcePoint[1]);
var point2 = new Point(destPoint[0], destPoint[1]);
var geographicLine = new Polyline();
geographicLine.addPath([point1, point2]);
var arrowGraphic = Graphic(point1, arrow(point1, point2));
layer.add(arrowGraphic);
var arrowGraphic = Graphic(point2, arrow(point2, point1));
layer.add(arrowGraphic);
var line = esri.geometry.geodesicDensify(geographicLine, 5000);
var lineSymbol = new CartographicLineSymbol(CartographicLineSymbol.CAP_BUTT, new dojo.Color([0, 0, 255, 0.5]), 3);
var graphic = new Graphic(line, lineSymbol);
layer.add(graphic);
}
function drawGeoMap(data) {
console.info(data);
for (var row in data) {
var rowObj = createObject(data[row]);
createPolyLine([rowObj.long, rowObj.lat], [rowObj.sbLong, rowObj.sbLat]);
}
map.addLayer(layer);
}
function createObject(rowData) {
var count = 0;
var obj = {
sbLat: rowData[count++],
sbLong: rowData[count++],
sbCountry: rowData[count++],
lat: rowData[count++],
long: rowData[count++],
country: rowData[count++],
};
return obj;
}
drawGeoMap([
["22.3511148", "78.6677428", "INDIA", "45.0059", "-93.1059", "UNITED STATES"]
]);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
