Somewhat working, cherrypy's worker threads can't keep up, though :/

3 files changed, 221 insertions, 34 deletions

diff --git a/web/css/leaflet.label.css b/web/css/leaflet.label.css
new file mode 100644
index 0000000..8671515
--- /dev/null
+++ b/web/css/leaflet.label.css
@@ -0,0 +1,52 @@
+.leaflet-label {
+	background: rgb(235, 235, 235);
+	background: rgba(235, 235, 235, 0.81);
+	background-clip: padding-box;
+	border-color: #777;
+	border-color: rgba(0,0,0,0.25);
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 4px;
+	color: #111;
+	display: block;
+	font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	padding: 1px 6px;
+	position: absolute;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-label.leaflet-clickable {
+	cursor: pointer;
+}
+
+.leaflet-label:before,
+.leaflet-label:after {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: none;
+	position: absolute;
+	top: 5px;
+}
+
+.leaflet-label:before {
+	border-right: 6px solid black;
+	border-right-color: inherit;
+	left: -10px;
+}
+
+.leaflet-label:after {
+	border-left: 6px solid black;
+	border-left-color: inherit;
+	right: -10px;
+}
+
+.leaflet-label-right:before,
+.leaflet-label-left:after {
+	content: "";
+}
\ No newline at end of file
diff --git a/web/js/eventmap.js b/web/js/eventmap.js
index 775bb79..290c03e 100644
--- a/web/js/eventmap.js
+++ b/web/js/eventmap.js
@@ -2,19 +2,168 @@ var map;
 var draw_control;
 var layers = {};
 var recorded_obj;
+var marker_store = {};
+var marker_store_sync_id;
+
+function eventmap_send_update() {
+	var update_doc = {
+		'sync-id': marker_store_sync_id,
+		'markers': {}
+	};
+
+	$.each(marker_store, function(marker_name, marker) {
+		update_doc.markers[marker_name] = {};
+
+		var marker_info = update_doc.markers[marker_name];
+
+		marker_info.lat = marker.getLatLng().lat;
+		marker_info.lng = marker.getLatLng().lng;
+		marker_info.layer = marker.options.layer_name;
+	});
+
+	$.ajax({
+		url: 'api/markers/post',
+		type: 'POST',
+		contentType: 'application/json',
+		data: JSON.stringify(update_doc),
+		processData: false,
+		dataType: 'json'
+	});
+}
+
+function eventmap_process_update(data) {
+	if (typeof data == "string")
+		data = JSON.parse(data);
+	marker_store_sync_id = data['sync-id'];
+	$.each(data['markers'], function(marker_name, marker_info) {
+		if (marker_name in marker_store) {
+			var marker = marker_store[marker_name];
+			var marker_pos = marker.getLatLng();
+
+			if (marker_pos.lat != marker_info.lat
+			    || marker_pos.lng != marker_info.lng)
+				marker.setLatLng([marker_info.lat, marker_info.lng]);
+
+			if (marker.options.layer_name != marker_info.layer) {
+				var old_lg = layers[marker.options.layer_name];
+				var new_lg = layers[marker_info.layer];
+
+				var old_draw = old_lg.getLayers()[1];
+				var new_draw = new_lg.getLayers()[1];
+
+				old_draw.removeLayer(marker);
+				new_draw.addLayer(marker);
+				marker.options.layer_name = marker_info.layer;
+			}
+			marker.options.sync_id = marker_store_sync_id;
+			console.log("Kept marker '" + marker_name + "'.");
+		} else {
+			var marker = L.marker([marker_info.lat, marker_info.lng]);
+			
+			marker.bindLabel('', {
+				noHide: marker_labels_no_hide
+			});
+
+			add_contextmenu(marker);
+
+			marker.options.label_text = marker_name;
+			marker.updateLabelContent(marker.options.label_text);
+			marker_store[marker_name] = marker;
+
+			marker.options.layer_name = marker_info.layer
+			layers[marker_info.layer].getLayers()[1].addLayer(marker);
+			marker.options.sync_id = marker_store_sync_id;
+			console.log("Added marker '" + marker_name + "'.");
+		}
+	});
+
+	for (var marker_name in marker_store) {
+		if (marker_store[marker_name].options.sync_id ==
+				marker_store_sync_id)
+			continue;
+
+		var marker = marker_store[marker_name];
+		layers[marker.options.layer_name].getLayers()[1].removeLayer(marker);
+		delete marker_store[marker_name];
+		console.log("Removed marker '" + marker_name + "'.");
+	}
+
+	(function longpoll() {
+		$.ajax({
+			url: 'api/markers/poll/' + marker_store_sync_id,
+			timeout: 600000
+		}).done(eventmap_process_update).fail(function() {
+			setTimeout(longpoll, 10000);
+		});
+	})();
+}
+
+function add_contextmenu(marker) {
+	marker.options.contextmenu = true;
+	marker.options.contextmenuItems = [
+		{
+			text: 'Move',
+			callback: function() {
+				move_marker(marker);
+			}
+		},
+		{
+			text: 'Rename',
+			callback: function() {
+				rename_marker(marker);
+			}
+		}
+	];
+	$.each(layers, function(layer_name, layer_object) {
+		marker.options.contextmenuItems.push({
+			text: 'Send to ' + layer_name,
+			callback: function() {
+				$.each(layers, function(key, value) {
+					map.removeLayer(value);
+					drawing_layer = value.getLayers()[1];
+					if (drawing_layer.hasLayer(marker))
+						drawing_layer.removeLayer(marker);
+				});
+				map.addLayer(layer_object);
+				layer_object.getLayers()[1].addLayer(marker);
+				marker.options.layer_name = layer_name;
+				eventmap_send_update();
+			}
+		})
+	});
+	marker._initContextMenu();
+}
 
 /* Functionality of (re)naming a marker - if I understood how objects worked
  * in javascript, this should probably be one. :/
  */
 function rename_marker(marker) {
 	var label_text;
+	var new_label_text;
+
 	if (marker.options.label_text === undefined)
 		label_text = '';
 	else
 		label_text = marker.options.label_text;
 
-	marker.options.label_text = prompt("Please enter name", label_text);
+	do {
+		new_label_text = prompt("Please enter name", label_text);
+		if (new_label_text in marker_store
+		    && marker_store[new_label_text] !== marker) {
+			alert("This name is not unique!");
+		} else {
+			break;
+		}
+	} while (1);
+
+	if (marker.options.label_text !== undefined)
+		delete marker_store[label_text]
+
+	marker.options.label_text = new_label_text;
 	marker.updateLabelContent(marker.options.label_text);
+
+	marker_store[new_label_text] = marker
+	eventmap_send_update();
 }
 
 /* Functionality of moving a marker - if I understood how objects worked
@@ -43,7 +192,7 @@ function move_marker_disable_events() {
 
 function move_marker_commit(e) {
 	move_marker_disable_events();
-	/* notify about editing */
+	eventmap_send_update();
 }
 
 function move_marker_keyup(e) {
@@ -102,43 +251,14 @@ $(function() {
 			if (!map.hasLayer(layer_object))
 				return true;
 
-			created_object.options.contextmenu = true;
-			created_object.options.contextmenuItems = [
-				{
-					text: 'Move',
-					callback: function() {
-						move_marker(created_object);
-					}
-				},
-				{
-					text: 'Rename',
-					callback: function() {
-						rename_marker(created_object);
-					}
-				}
-			];
-			$.each(layers, function(layer_name, layer_object) {
-				created_object.options.contextmenuItems.push({
-					text: 'Send to ' + layer_name,
-					callback: function() {
-						$.each(layers, function(key, value) {
-							map.removeLayer(value);
-							drawing_layer = value.getLayers()[1];
-							if (drawing_layer.hasLayer(created_object))
-								drawing_layer.removeLayer(created_object);
-						});
-						map.addLayer(layer_object);
-						layer_object.getLayers()[1].addLayer(created_object);
-						/* possibly notify about move */
-					}
-				})
-			});
-			created_object._initContextMenu();
+			add_contextmenu(created_object);
 
 			layer_object.getLayers()[1].addLayer(created_object);
+			created_object.options.layer_name = layer_name;
 			return false;
 		});
 		rename_marker(created_object);
+		/* update will be sent by "rename_marker" */
 	});
 
 	$.getJSON('js/layers.json', function(data) {
@@ -169,5 +289,11 @@ $(function() {
 			}
 		});
 		L.control.layers(layers, {}).addTo(map);
+
+		$.ajax({
+			url: 'api/markers/get'
+		}).done(eventmap_process_update).fail(function() {
+			alert("Couldn't load marker info from server!");
+		});
 	});
 });
diff --git a/web/js/leaflet.label.js b/web/js/leaflet.label.js
new file mode 100644
index 0000000..736475c
--- /dev/null
+++ b/web/js/leaflet.label.js
@@ -0,0 +1,9 @@
+/*
+	Leaflet.label, a plugin that adds labels to markers and vectors for Leaflet powered maps.
+	(c) 2012-2013, Jacob Toye, Smartrak
+
+	https://github.com/Leaflet/Leaflet.label
+	http://leafletjs.com
+	https://github.com/jacobtoye
+*/
+(function(){L.labelVersion="0.2.1-dev",L.Label=L.Class.extend({includes:L.Mixin.Events,options:{className:"",clickable:!1,direction:"right",noHide:!1,offset:[12,-15],opacity:1,zoomAnimation:!0},initialize:function(t,e){L.setOptions(this,t),this._source=e,this._animated=L.Browser.any3d&&this.options.zoomAnimation,this._isOpen=!1},onAdd:function(t){this._map=t,this._pane=this._source instanceof L.Marker?t._panes.markerPane:t._panes.popupPane,this._container||this._initLayout(),this._pane.appendChild(this._container),this._initInteraction(),this._update(),this.setOpacity(this.options.opacity),t.on("moveend",this._onMoveEnd,this).on("viewreset",this._onViewReset,this),this._animated&&t.on("zoomanim",this._zoomAnimation,this),L.Browser.touch&&!this.options.noHide&&L.DomEvent.on(this._container,"click",this.close,this)},onRemove:function(t){this._pane.removeChild(this._container),t.off({zoomanim:this._zoomAnimation,moveend:this._onMoveEnd,viewreset:this._onViewReset},this),this._removeInteraction(),this._map=null},setLatLng:function(t){return this._latlng=L.latLng(t),this._map&&this._updatePosition(),this},setContent:function(t){return this._previousContent=this._content,this._content=t,this._updateContent(),this},close:function(){var t=this._map;t&&(L.Browser.touch&&!this.options.noHide&&L.DomEvent.off(this._container,"click",this.close),t.removeLayer(this))},updateZIndex:function(t){this._zIndex=t,this._container&&this._zIndex&&(this._container.style.zIndex=t)},setOpacity:function(t){this.options.opacity=t,this._container&&L.DomUtil.setOpacity(this._container,t)},_initLayout:function(){this._container=L.DomUtil.create("div","leaflet-label "+this.options.className+" leaflet-zoom-animated"),this.updateZIndex(this._zIndex)},_update:function(){this._map&&(this._container.style.visibility="hidden",this._updateContent(),this._updatePosition(),this._container.style.visibility="")},_updateContent:function(){this._content&&this._map&&this._prevContent!==this._content&&"string"==typeof this._content&&(this._container.innerHTML=this._content,this._prevContent=this._content,this._labelWidth=this._container.offsetWidth)},_updatePosition:function(){var t=this._map.latLngToLayerPoint(this._latlng);this._setPosition(t)},_setPosition:function(t){var e=this._map,i=this._container,n=e.latLngToContainerPoint(e.getCenter()),o=e.layerPointToContainerPoint(t),s=this.options.direction,a=this._labelWidth,l=L.point(this.options.offset);"right"===s||"auto"===s&&o.x<n.x?(L.DomUtil.addClass(i,"leaflet-label-right"),L.DomUtil.removeClass(i,"leaflet-label-left"),t=t.add(l)):(L.DomUtil.addClass(i,"leaflet-label-left"),L.DomUtil.removeClass(i,"leaflet-label-right"),t=t.add(L.point(-l.x-a,l.y))),L.DomUtil.setPosition(i,t)},_zoomAnimation:function(t){var e=this._map._latLngToNewLayerPoint(this._latlng,t.zoom,t.center).round();this._setPosition(e)},_onMoveEnd:function(){this._animated&&"auto"!==this.options.direction||this._updatePosition()},_onViewReset:function(t){t&&t.hard&&this._update()},_initInteraction:function(){if(this.options.clickable){var t=this._container,e=["dblclick","mousedown","mouseover","mouseout","contextmenu"];L.DomUtil.addClass(t,"leaflet-clickable"),L.DomEvent.on(t,"click",this._onMouseClick,this);for(var i=0;e.length>i;i++)L.DomEvent.on(t,e[i],this._fireMouseEvent,this)}},_removeInteraction:function(){if(this.options.clickable){var t=this._container,e=["dblclick","mousedown","mouseover","mouseout","contextmenu"];L.DomUtil.removeClass(t,"leaflet-clickable"),L.DomEvent.off(t,"click",this._onMouseClick,this);for(var i=0;e.length>i;i++)L.DomEvent.off(t,e[i],this._fireMouseEvent,this)}},_onMouseClick:function(t){this.hasEventListeners(t.type)&&L.DomEvent.stopPropagation(t),this.fire(t.type,{originalEvent:t})},_fireMouseEvent:function(t){this.fire(t.type,{originalEvent:t}),"contextmenu"===t.type&&this.hasEventListeners(t.type)&&L.DomEvent.preventDefault(t),"mousedown"!==t.type?L.DomEvent.stopPropagation(t):L.DomEvent.preventDefault(t)}}),L.BaseMarkerMethods={showLabel:function(){return this.label&&this._map&&(this.label.setLatLng(this._latlng),this._map.showLabel(this.label)),this},hideLabel:function(){return this.label&&this.label.close(),this},setLabelNoHide:function(t){this._labelNoHide!==t&&(this._labelNoHide=t,t?(this._removeLabelRevealHandlers(),this.showLabel()):(this._addLabelRevealHandlers(),this.hideLabel()))},bindLabel:function(t,e){var i=this.options.icon?this.options.icon.options.labelAnchor:this.options.labelAnchor,n=L.point(i)||L.point(0,0);return n=n.add(L.Label.prototype.options.offset),e&&e.offset&&(n=n.add(e.offset)),e=L.Util.extend({offset:n},e),this._labelNoHide=e.noHide,this.label||(this._labelNoHide||this._addLabelRevealHandlers(),this.on("remove",this.hideLabel,this).on("move",this._moveLabel,this).on("add",this._onMarkerAdd,this),this._hasLabelHandlers=!0),this.label=new L.Label(e,this).setContent(t),this},unbindLabel:function(){return this.label&&(this.hideLabel(),this.label=null,this._hasLabelHandlers&&(this._labelNoHide||this._removeLabelRevealHandlers(),this.off("remove",this.hideLabel,this).off("move",this._moveLabel,this).off("add",this._onMarkerAdd,this)),this._hasLabelHandlers=!1),this},updateLabelContent:function(t){this.label&&this.label.setContent(t)},getLabel:function(){return this.label},_onMarkerAdd:function(){this._labelNoHide&&this.showLabel()},_addLabelRevealHandlers:function(){this.on("mouseover",this.showLabel,this).on("mouseout",this.hideLabel,this),L.Browser.touch&&this.on("click",this.showLabel,this)},_removeLabelRevealHandlers:function(){this.off("mouseover",this.showLabel,this).off("mouseout",this.hideLabel,this),L.Browser.touch&&this.off("click",this.showLabel,this)},_moveLabel:function(t){this.label.setLatLng(t.latlng)}},L.Icon.Default.mergeOptions({labelAnchor:new L.Point(9,-20)}),L.Marker.mergeOptions({icon:new L.Icon.Default}),L.Marker.include(L.BaseMarkerMethods),L.Marker.include({_originalUpdateZIndex:L.Marker.prototype._updateZIndex,_updateZIndex:function(t){var e=this._zIndex+t;this._originalUpdateZIndex(t),this.label&&this.label.updateZIndex(e)},_originalSetOpacity:L.Marker.prototype.setOpacity,setOpacity:function(t,e){this.options.labelHasSemiTransparency=e,this._originalSetOpacity(t)},_originalUpdateOpacity:L.Marker.prototype._updateOpacity,_updateOpacity:function(){var t=0===this.options.opacity?0:1;this._originalUpdateOpacity(),this.label&&this.label.setOpacity(this.options.labelHasSemiTransparency?this.options.opacity:t)},_originalSetLatLng:L.Marker.prototype.setLatLng,setLatLng:function(t){return this.label&&!this._labelNoHide&&this.hideLabel(),this._originalSetLatLng(t)}}),L.CircleMarker.mergeOptions({labelAnchor:new L.Point(0,0)}),L.CircleMarker.include(L.BaseMarkerMethods),L.Path.include({bindLabel:function(t,e){return this.label&&this.label.options===e||(this.label=new L.Label(e,this)),this.label.setContent(t),this._showLabelAdded||(this.on("mouseover",this._showLabel,this).on("mousemove",this._moveLabel,this).on("mouseout remove",this._hideLabel,this),L.Browser.touch&&this.on("click",this._showLabel,this),this._showLabelAdded=!0),this},unbindLabel:function(){return this.label&&(this._hideLabel(),this.label=null,this._showLabelAdded=!1,this.off("mouseover",this._showLabel,this).off("mousemove",this._moveLabel,this).off("mouseout remove",this._hideLabel,this)),this},updateLabelContent:function(t){this.label&&this.label.setContent(t)},_showLabel:function(t){this.label.setLatLng(t.latlng),this._map.showLabel(this.label)},_moveLabel:function(t){this.label.setLatLng(t.latlng)},_hideLabel:function(){this.label.close()}}),L.Map.include({showLabel:function(t){return this.addLayer(t)}}),L.FeatureGroup.include({clearLayers:function(){return this.unbindLabel(),this.eachLayer(this.removeLayer,this),this},bindLabel:function(t,e){return this.invoke("bindLabel",t,e)},unbindLabel:function(){return this.invoke("unbindLabel")},updateLabelContent:function(t){this.invoke("updateLabelContent",t)}})})(this,document);
\ No newline at end of file