summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/css/leaflet.label.css52
-rw-r--r--web/js/eventmap.js194
-rw-r--r--web/js/leaflet.label.js9
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