topic Re: How to join two coordinates with arrows in ArcGIS JavaScript Maps SDK Questions

How to join two coordinates with arrows

ManiDeep — Tue, 12 Jul 2016 05:42:14 GMT

Hi Team,

I want to join two coordinates with line followed by arrow symbols.

I am able to connect the coordinates with lines but not displaying arrows.

Can you please help us.Here i am attaching my piece of code.

Thanks,

Manideep.

Re: How to join two coordinates with arrows

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:24:49 GMT

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>

Re: How to join two coordinates with arrows

ManiDeep — Wed, 13 Jul 2016 06:10:24 GMT

Hi Robert,

Thanks for your quick response.

This is not what i need.

Just i need arrows on top of lines and blue pins should as it is.

Please find the below screen shot for your perusal.Start and ends with blue pins.

Thanks,

Manideep.

Re: How to join two coordinates with arrows

RobertScheitlin__GISP — Wed, 13 Jul 2016 12:50:25 GMT

Manideep,

Then you will want to use this custom library:

GitHub - nickcam/DirectionalLineSymbol: ArcGIS javascript custom Line Symbol. Subclass of SimpleLineSymbol to display di…

Re: How to join two coordinates with arrows

ManiDeep — Thu, 14 Jul 2016 03:52:26 GMT

Thanks, Robert for your help.

I will work on this and get back to you if i have any issues.

Re: How to join two coordinates with arrows

RobertScheitlin__GISP — Thu, 14 Jul 2016 13:11:02 GMT

Mani,

FYI, you should use "Assume Answered" when you find the answer on your own, or a moderator would use this when the question has been answered by a reply and the original poster never marks the thread as answered. When you have reply that provide the answer for your question you should choose the reply that answered your question and click the "Correct Answer" link on that reply.