From a8075b8250edeebb4d09c8a4dfc2eb96906a519c Mon Sep 17 00:00:00 2001
From: Mihai Varga <mihai.varga@collabora.com>
Date: Mon, 16 Mar 2015 17:38:19 +0200
Subject: [PATCH] Added websockets to the Map object

'onopen' and 'onmessage' events are handled
in src/layer/tile/TileLayer.js
Tile data is received as an ArrayBuffer which contains a string message
followed by a new line and then by the actual PNG data. The PNG data
is encoded in base-64 in order to be displayed.
---
 loleaflet/src/layer/Layer.js          | 11 ++++-
 loleaflet/src/layer/tile/TileLayer.js | 62 +++++++++++++++++++++++----
 loleaflet/src/map/Map.js              |  4 +-
 3 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/loleaflet/src/layer/Layer.js b/loleaflet/src/layer/Layer.js
index 579d30b5c..9110780e7 100644
--- a/loleaflet/src/layer/Layer.js
+++ b/loleaflet/src/layer/Layer.js
@@ -44,6 +44,12 @@ L.Layer = L.Evented.extend({
 		this._map = map;
 		this._zoomAnimated = map._zoomAnimated;
 
+		if (!this._map.socket.onopen) {
+			this._map.socket.onopen = L.bind(this._initDocument, this);
+		}
+		if (!this._map.socket.onmessage) {
+			this._map.socket.onmessage = L.bind(this._onMessage, this);
+		}
 		this.onAdd(map);
 
 		if (this.getAttribution && this._map.attributionControl) {
@@ -56,7 +62,10 @@ L.Layer = L.Evented.extend({
 
 		this.fire('add');
 		map.fire('layeradd', {layer: this});
-	}
+	},
+
+	_initDocument: function () {},
+	_onMessage: function () {}
 });
 
 
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index abbb096a6..fb3248530 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -44,6 +44,17 @@ L.TileLayer = L.GridLayer.extend({
 		}
 	},
 
+	_initDocument: function () {
+		if (!this._map.socket) {
+			console.log("Socket initialization error");
+			return;
+		}
+		if (this.options.doc) {
+			this._map.socket.send("load " + this.options.doc);
+		}
+		this._update();
+	},
+
 	setUrl: function (url, noRedraw) {
 		this._url = url;
 
@@ -69,19 +80,36 @@ L.TileLayer = L.GridLayer.extend({
 		*/
 		tile.alt = '';
 
-		tile.src = this.getTileUrl(coords);
+		tile.src = 'http://i387.photobucket.com/albums/oo316/barkse90/Cartman-Cop-head-256x256.png';
 
 		return tile;
 	},
 
-	getTileUrl: function (coords) {
-		return L.Util.template(this._url, L.extend({
-			r: this.options.detectRetina && L.Browser.retina && this.options.maxZoom > 0 ? '@2x' : '',
-			s: this._getSubdomain(coords),
-			x: coords.x,
-			y: this.options.tms ? this._globalTileRange.max.y - coords.y : coords.y,
-			z: this._getZoomForUrl()
-		}, this.options));
+	_onMessage: function (evt) {
+		if (typeof(evt.data) === "string") {
+			console.log(evt.data);
+		}
+		else if (typeof(evt.data) === "object") {
+			var bytes = new Uint8Array(evt.data);
+			var index = 0;
+			// search for the first newline which marks the end of the message
+			while (index < bytes.length && bytes[index] != 10) {
+				index++;
+			}
+			var text_msg_bytes = bytes.subarray(0, index + 1);
+			var info = this._getTileInfo(String.fromCharCode.apply(null, text_msg_bytes));
+			var coords = this._twipsToCoords(new L.Point(info.x, info.y));
+			coords.z = this._map.getZoom();
+			var data = bytes.subarray(index + 1);
+			var done = L.bind(this._tileReady, this, coords)
+
+			var tile = document.createElement("img");
+			tile.onload = L.bind(this._tileOnLoad, this, done, tile);
+			tile.onerror = L.bind(this._tileOnError, this, done, tile);
+			tile.alt = '';
+			tile.src = 'data:image/png;base64,' + window.btoa(String.fromCharCode.apply(null, data));
+			this._handleTile(tile, coords);
+		}
 	},
 
 	_tileOnLoad: function (done, tile) {
@@ -108,6 +136,22 @@ L.TileLayer = L.GridLayer.extend({
 				options.tileSize;
 	},
 
+	_getTileInfo: function (msg) {
+		var tokens = msg.split(" ");
+		var info = new Object;
+		for (var i = 0; i < tokens.length; i++) {
+			if (tokens[i].substring(0,9) === "tileposx=")
+				info.x = parseInt(tokens[i].substring(9));
+			if (tokens[i].substring(0,9) === "tileposy=")
+				info.y = parseInt(tokens[i].substring(9));
+			if (tokens[i].substring(0,10) === "tilewidth=")
+				info.tilewidth = parseInt(tokens[i].substring(10));
+			if (tokens[i].substring(0,11) === "tileheight=")
+				info.tileheight = parseInt(tokens[i].substring(11));
+		}
+		return info;
+	},
+
 	_onTileRemove: function (e) {
 		e.tile.onload = null;
 	},
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 0df655c21..3fc70b12e 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -5,7 +5,7 @@
 L.Map = L.Evented.extend({
 
 	options: {
-		crs: L.CRS.EPSG3857,
+		crs: L.CRS.Simple,
 
 		/*
 		center: LatLng,
@@ -21,6 +21,8 @@ L.Map = L.Evented.extend({
 	initialize: function (id, options) { // (HTMLElement or String, Object)
 		options = L.setOptions(this, options);
 
+		this.socket = new WebSocket(options.server);
+		this.socket.binaryType = "arraybuffer";
 		this._initContainer(id);
 		this._initLayout();