Connect Cities with a line using Javascript

Working on a game where you can fly from one city to another. Cities are represented by circles and do have a unique ID. Every trip is recorded in a table.

Now what I want to do is draw a line between two cities to show the travel history.

Is there a function to say (in JS) "draw a line from startX/startY to endX/endY" ?

Not really, you would need to generate an SVG or use a Canvas. There is a trick to draw a line using a border edge, but it also requires code.

Again: Thanks. I've already had a look at your "canvas-fun". There you use "lines" to create the canvas - but I can't even figure out where that element is ...

You could use a library like SVG.js and render the line in an SVG container that way:

Example: (14,4 KB)


Gibt es irgendwas, was Du nicht weißt? :wink:

Thank you very much - I had already given in on that. That's a head start. You are a hero!

1 Like

Definitiv! Vieles sogar…
Mein "Wissen" ist nur eine kleine Insel im riesigen Ozean des mir Unbekannten.

CleanShot 2022-02-17 at 17.34.13

Download: (17,5 KB)

One could also just set the innerHTML to a SVG markup to avoid SVG.js. This is pretty small and brute force, and doesn't even care to manipulate an existing SVG (potential optimization here).

Download: (20,2 KB)


Sorry to molest you again - I added svg.min.js to the header and put a rectangle with class .SVG-container underneath everything - but I get the error "SVG is not defined". Can't add the HYPE here because it heavily depends on Ajax and data from a DB.
Added the functionality (copied from your code) like so:

	var parameter={
		maid		: maid
		url	: pfad+"weltreise_tourdaten_laden.php",
			data: parameter
			var dummy=response.split("|");
			if (dummy[0]=="OK") {
				// IDs der Städte kommen zurück 
				var start=dummy[1].split(",");
				var ziel=dummy[2].split(",");
				var svgElm = element.querySelector('.SVG-container');
				var draw = SVG().addTo(svgElm).size(1240, 800);
				for (i=0; i<ziel.length; i++) {
					var start_coordinates=$("#"+start[i]).offset();
					var ziel_coordinates=$("#"+ziel[i]).offset(); 
					var line = draw.line(start_coordinates.left,, ziel_coordinates.left,, 20);
					line.stroke({ color: '#f06', width: 5, linecap: 'round' });
		.fail(function(xhr, status, errorThrown) {
			alert("Ajax Fehler.\nStatus="+status+"\nFehler="+errorThrown,"error");

SVG undefined sounds like SVG.js is not loaded. Are you using iFrames (widgets) in your document¿ within an iFrame the library may be out of reach ...

btw @MaxZieb provided another approach without the need of svg.js

1 Like

Thank you for your kind help. You are right about the accessabiity of svg.js - but I don't use any iFrames here. Embedded the script just as Max did.

Anyway: You are absolutely right - I will have to check the other solution - without that script.
Thank you!

The problem is that the code is appereantly on a button and then …

var svgElm = element.querySelector('.SVG-container');

doesn't work. As element isn't the scene… Hence, it needs to be:

var sceneElm = document.getElementById(hypeDocument.currentSceneId());
var svgElm = sceneElm.querySelector('.SVG-container');

That should be the reason for SVG not resolving…

1 Like

Thanks a bundle, Max. You are my hero and saved my day!
Thanks to Hans-Gerd as well. Have a nice weekend!

1 Like

Very cool, indeed!