nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to join two coordinates with arrows

ManiDeep

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.

arrow.html.zip

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Manideep,

Then you will want to use this custom library:

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

All comments

ManiDeep

Thanks, Robert for your help.

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

RobertScheitlin__GISP

Manideep,

Then you will want to use this custom library:

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

ManiDeep

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.

Image result for direction flow arrow

Thanks,

Manideep.

RobertScheitlin__GISP

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>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.