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


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

  • 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 ? – Mawg says reinstate Monica 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 – Mawg says reinstate Monica Jul 23 '19 at 15:30

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.