1

Hi I am building an angular app. As a part of it, i have to create network dashboards showing connections between two devices. For example if you see the below picture. enter image description here

There is a curved dotted line connecting two points . I want to create something like this, my background image will be different but I want to display the pins and make a line between them. What libraries/packages can I use to achieve this.

I am a beginner with front end development and creating this to visualize my network.

[Editor's note] in a comment below, the OP specifies that the line must be curved.

Improve this question

4 Answers 4

Reset to default
1

you put an elipse over the two points and calculate its formula, with the formula you can define every point inbetween the connection of the two points.

  1. define the center of the elipse, for this concrete example go down on the right point and go right on the left point until they meet
  2. with all the existing information you can define the elipse https://www.youtube.com/watch?v=0pdyKf0yoJM
  3. with the gained formula you can calculate every point between the two points, pick a small distance so the single points are visible as a straight line
Improve this answer
1
  • yes this is overly complicated
    – Platinium
    Commented Feb 8, 2022 at 12:32
0

Try Google Maps?

Although, personally, I prefer Open Street Maps, which is free & open source.

Leaflet is a greta wrapper.

Start at How To Use Leaflet In Angular Web Apps and look at the linked posts.

I found it very easy to do what you ask. Just place two markers and connect them with a polyline (don't ask me how; none of our sites will write code for you; but, if you get stuck, post you code to https://stackoverflow.com/).

Improve this answer
5
  • 1
    Hi @Mawg , thanks for the suggestion. But as I specified in the question, I will have a background image on which I wish to place two markers and connect them. The background image is not maps, its a static image.
    – chink
    Commented Jul 23, 2019 at 13:19
  • Sorry, that was stupid of me :-( So, you want to draw a line between two sets of x-y coordinates on an image ?
    – Mawg
    Commented Jul 23, 2019 at 13:42
  • yes, curved dotted lines, like the ones shown in the image
    – chink
    Commented Jul 23, 2019 at 14:17
  • Sounds trivial. Good luck
    – Mawg
    Commented Jul 23, 2019 at 15:30
  • Curved is so important that it should be stated in the question, as not everyone reads all comments. I have edited the question for you (but not before starting to post a answer with straight lines, :-(
    – Mawg
    Commented Aug 12, 2021 at 6:55
0

Aaaaargh!! I just noticed in a comment, not the actual question, that the line must be curved, so ignore the first 3 answers & skip beyond the horizontal line.

Since I totally misunderstood your question 2 years ago, here's an answer to the real question. If you have solved it by now, please post and accept an answer, to help others who read this in future.

HTML5 Canvas - How to Draw a line over an image background? on S.O, shows how to do in a non-Angular way, using the canvas, but it will coexist just fine with Angular.

This Angular line drawing Plunker/Fiddle shows an example.

Ngx Image Drawing would let users draw on your images - not what you want, but maybe useful to know.

How to draw a curved line between 2 points on canvas? - it's the HTML canvas again, but will work with Angular.

draw curved lines javascript is a scraped answer, but other links on that page might also help. There are lots of them.

Reading that previous page made me realize that DuckduckGoing for beziercurveto canvas woudl be very helpful. See, for instance, this example and the documentation. See also Canvas user's guide

In fact, just searching for draw curved line on image in javascript throws up enough answers that I will let you do your own research.

Hopefully, you will post and accept an answer, in order to help others who read this question in future (although I doubt that you will, as this is the only question that you ever asked, so I guess that you no longer visit S.E and I am talking to myself here).

Improve this answer
0

W3Schools provides an interactive demonstration of curve drawing: HTML canvas bezierCurveTo() Method.

Here's an example of how it could be used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Curve Test</title>
    <style>
    #Overlay { width:25em; height:20em; border-style:solid; position:relative; }
    #Image { width:100%; height:100%; background-color:#8F8; position:absolute; }
    #Canvas { width:100%; height:100%; position:absolute; }
    </style>
</head>

<body>
    <h1>Curve Test</h1>
    <div id="Overlay">
        <div id="Image">&nbsp;</div>
        <canvas id="Canvas" width="1000" height="500">Oops</canvas>
        <script>
            var c = document.getElementById("Canvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(100,200);
            ctx.bezierCurveTo(200,400, 800,400, 800,200);
            ctx.stroke();
        </script>
    </div>
</body>
</html>

Green image with overlayed curved line.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.