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.

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

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.
    – cvg
    Jul 23 '19 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 ? Jul 23 '19 at 13:42
  • yes, curved dotted lines, like the ones shown in the image
    – cvg
    Jul 23 '19 at 14:17
  • Sounds trivial. Good luck Jul 23 '19 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, :-( Aug 12 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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