Do not connect segments of lines that are outside the viewport (fixes #59)

frontend/app/map/lines/lines.js

@@ -82,9 +82,13 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout) {
 					opacity : 0.7
 				};
 
-				var same = ng.equals(linesById[line.id].getLatLngs(), trackPoints);
+				// Two points that are both outside of the viewport should not be connected, as the piece in between
+				// has not been received.
+				let splitLatLngs = fmUtils.disconnectSegmentsOutsideViewport(trackPoints, map.map.getBounds());
 
-				linesById[line.id].setLatLngs(trackPoints).setStyle(style);
+				var same = ng.equals(linesById[line.id].getLatLngs(), splitLatLngs);
+
+				linesById[line.id].setLatLngs(splitLatLngs).setStyle(style);
 
 				if(line.id != null && line.id != editingLineId && linesById[line.id].isPopupOpen()) {
 					if(same)

frontend/app/utils/utils.js

@@ -725,6 +725,37 @@ fm.app.factory("fmUtils", function($parse, fmIcons) {
 		return ret;
 	};
 
+	/**
+	 * Takes an array of track points and splits it up where two points in a row are outside of the given bbox.
+	 * @param trackPoints {Array<L.LatLng>}
+	 * @param bounds {L.LatLngBounds}
+	 * @return {Array<Array<L.LatLng>>}
+	 */
+	fmUtils.disconnectSegmentsOutsideViewport = function(trackPoints, bounds) {
+		let ret = [[]];
+		let lastOneIn = true;
+		let currentIdx = 0;
+
+		for(let trackPoint of trackPoints) {
+			if(bounds.contains(trackPoint)) {
+				lastOneIn = true;
+				ret[currentIdx].push(trackPoint);
+			} else if(lastOneIn) {
+				lastOneIn = false;
+				ret[currentIdx].push(trackPoint);
+			} else {
+				if(ret[currentIdx].length > 1)
+					currentIdx++;
+				ret[currentIdx] = [trackPoint];
+			}
+		}
+
+		if(ret[currentIdx].length <= 1)
+			ret.pop();
+
+		return ret;
+	};
+
 	return fmUtils;
 });