Creating a dashbaord displaying my network

Question

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.

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.

Answer 1

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/).

Answer 2

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).