diff options
| -rw-r--r-- | web/js/eventmap.js | 112 | ||||
| -rw-r--r-- | web/js/leaflet.contextmenu.js | 6 |
2 files changed, 112 insertions, 6 deletions
diff --git a/web/js/eventmap.js b/web/js/eventmap.js index 7302da9..b956fd2 100644 --- a/web/js/eventmap.js +++ b/web/js/eventmap.js @@ -16,9 +16,22 @@ function eventmap_send_update() { 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; + if (marker_name.startsWith("__polyline")) { + /* Polyline */ + marker_info.points = []; + $.each(marker.getLatLngs(), function(index, point) { + marker_info.points.push({ + lat: point.lat, + lng: point.lng + }); + }); + marker_info.layer = marker.options.layer_name; + } else { + /* Regular marker */ + marker_info.lat = marker.getLatLng().lat; + marker_info.lng = marker.getLatLng().lng; + marker_info.layer = marker.options.layer_name; + } }); $.ajax({ @@ -38,12 +51,46 @@ function LoadingException(message) { this.name = "LoadingException"; } +function process_polyline_update(marker_name, marker_info) { + if (marker_name in marker_store) { + var marker = marker_store[marker_name]; + + /* TODO: compare array, update only on change*/ + marker.setLatLngs(marker_info.points); + marker.options.sync_id = marker_store_sync_id; + console.log("Kept polyline '" + marker_name + "'."); + } else { + var marker = L.polyline(marker_info.points); + var target_layer_group; + + marker.options.label_text = marker_name; + marker_store[marker_name] = marker; + + marker.options.layer_name = marker_info.layer; + marker.options.label_text = marker_name; + target_layer_group = layers[marker_info.layer]; + if (target_layer_group === undefined) { + throw new LoadingException("Don't know about layer '" + + marker_info.layer + "'!"); + } + + target_layer_group.getLayers()[1].addLayer(marker); + marker.options.sync_id = marker_store_sync_id; + add_contextmenu(marker); + console.log("Added polyline '" + marker_name + "'."); + } +} + function eventmap_process_update(data) { if (typeof data == "string") data = JSON.parse(data); marker_store_sync_id = data['sync-id']; if (data['markers'] !== undefined) $.each(data['markers'], function(marker_name, marker_info) { + if (marker_name.startsWith("__polyline")) + return process_polyline_update(marker_name, marker_info); + + /* Regular marker */ if (marker_name in marker_store) { var marker = marker_store[marker_name]; var marker_pos = marker.getLatLng(); @@ -119,7 +166,25 @@ function delete_marker(marker) { eventmap_send_update(); } +function add_polyline_contextmenu(marker) { + marker.bindContextMenu({ + contextmenu: true, + contextmenuItems: [ + { + text: 'Delete', + callback: function() { + delete_marker(marker); + } + } + ] + }); +} + function add_contextmenu(marker) { + if (marker.options.label_text !== undefined + && marker.options.label_text.startsWith("__polyline")) + return add_polyline_contextmenu(marker); + marker.options.contextmenu = true; marker.options.contextmenuItems = [ { @@ -175,6 +240,10 @@ function rename_marker(marker) { do { new_label_text = prompt("Please enter name", label_text); + if (new_label_text.startsWith("__")) { + alert("This name is not valid!"); + continue; + } if (new_label_text in marker_store && marker_store[new_label_text] !== marker) { alert("This name is not unique!"); @@ -249,6 +318,33 @@ function marker_labels_calc_nohide(e) { }); } +function polyline_added(e) { + var created_object_type = e.layerType; + var created_object = e.layer; + + $.each(layers, function(layer_name, layer_object) { + if (!map.hasLayer(layer_object)) + return true; + + layer_object.getLayers()[1].addLayer(created_object); + created_object.options.layer_name = layer_name; + + var index = 0; + var marker_name; + + do { + marker_name = "__polyline_" + layer_name + "_" + index; + index++; + } while (marker_name in marker_store); + + marker_store[marker_name] = created_object; + marker.options.label_text = marker_name; + add_contextmenu(marker); + eventmap_send_update(); + return false; + }); +} + $(function() { $("#progress").html("Initializing map..."); map = L.map('map', { @@ -262,7 +358,7 @@ $(function() { draw_control = new L.Control.Draw({ draw: { - polyline: false, + polyline: true, polygon: false, rectangle: false, circle: false, @@ -276,6 +372,8 @@ $(function() { var records = []; for (var key in marker_store) { + if (key.startsWith("__polyline")) + continue; if (key.toLowerCase().indexOf(input_lower) != 0) continue; @@ -312,7 +410,13 @@ $(function() { var created_object_type = e.layerType; var created_object = e.layer; + if (created_object_type === 'polyline') { + return polyline_added(e); + } + if (created_object_type !== 'marker') { + console.log("Other Type drawn:"); + console.log(created_object_type); return; } diff --git a/web/js/leaflet.contextmenu.js b/web/js/leaflet.contextmenu.js index 05e25c5..7975c09 100644 --- a/web/js/leaflet.contextmenu.js +++ b/web/js/leaflet.contextmenu.js @@ -1,5 +1,7 @@ /* Leaflet.contextmenu, a context menu for Leaflet. - (c) 2013, Adam Ratcliffe, GeoSmart Maps Limited + (c) 2015, Adam Ratcliffe, GeoSmart Maps Limited + + @preserve */ -L.Map.mergeOptions({contextmenuItems:[]});L.Map.ContextMenu=L.Handler.extend({statics:{BASE_CLS:"leaflet-contextmenu"},initialize:function(map){L.Handler.prototype.initialize.call(this,map);this._items=[];this._visible=false;var container=this._container=L.DomUtil.create("div",L.Map.ContextMenu.BASE_CLS,map._container);container.style.zIndex=1e4;container.style.position="absolute";if(map.options.contextmenuWidth){container.style.width=map.options.contextmenuWidth+"px"}this._createItems();L.DomEvent.on(container,"click",L.DomEvent.stop).on(container,"mousedown",L.DomEvent.stop).on(container,"dblclick",L.DomEvent.stop).on(container,"contextmenu",L.DomEvent.stop)},addHooks:function(){L.DomEvent.on(document,"keydown",this._onKeyDown,this);this._map.on({contextmenu:this._show,mouseout:this._hide,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},removeHooks:function(){L.DomEvent.off(document,"keydown",this._onKeyDown,this);this._map.off({contextmenu:this._show,mouseout:this._hide,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this)},showAt:function(point,data){if(point instanceof L.LatLng){point=this._map.latLngToContainerPoint(point)}this._showAtPoint(point,data)},hide:function(){this._hide()},addItem:function(options){return this.insertItem(options)},insertItem:function(options,index){index=index!==undefined?index:this._items.length;var item=this._createItem(this._container,options,index);this._items.push(item);this._sizeChanged=true;this._map.fire("contextmenu.additem",{contextmenu:this,el:item.el,index:index});return item.el},removeItem:function(item){var container=this._container;if(!isNaN(item)){item=container.children[item]}if(item){this._removeItem(L.Util.stamp(item));this._sizeChanged=true;this._map.fire("contextmenu.removeitem",{contextmenu:this,el:item})}},removeAllItems:function(){var item;while(this._container.children.length){item=this._container.children[0];this._removeItem(L.Util.stamp(item))}},setDisabled:function(item,disabled){var container=this._container,itemCls=L.Map.ContextMenu.BASE_CLS+"-item";if(!isNaN(item)){item=container.children[item]}if(item&&L.DomUtil.hasClass(item,itemCls)){if(disabled){L.DomUtil.addClass(item,itemCls+"-disabled");this._map.fire("contextmenu.disableitem",{contextmenu:this,el:item})}else{L.DomUtil.removeClass(item,itemCls+"-disabled");this._map.fire("contextmenu.enableitem",{contextmenu:this,el:item})}}},isVisible:function(){return this._visible},_createItems:function(){var itemOptions=this._map.options.contextmenuItems,item,i,l;for(i=0,l=itemOptions.length;i<l;i++){this._items.push(this._createItem(this._container,itemOptions[i]))}},_createItem:function(container,options,index){if(options.separator||options==="-"){return this._createSeparator(container,index)}var itemCls=L.Map.ContextMenu.BASE_CLS+"-item",cls=options.disabled?itemCls+" "+itemCls+"-disabled":itemCls,el=this._insertElementAt("a",cls,container,index),callback=this._createEventHandler(el,options.callback,options.context),html="";if(options.icon){html='<img class="'+L.Map.ContextMenu.BASE_CLS+'-icon" src="'+options.icon+'"/>'}else if(options.iconCls){html='<span class="'+L.Map.ContextMenu.BASE_CLS+"-icon "+options.iconCls+'"></span>'}el.innerHTML=html+options.text;el.href="#";L.DomEvent.on(el,"click",L.DomEvent.stopPropagation).on(el,"mousedown",L.DomEvent.stopPropagation).on(el,"dblclick",L.DomEvent.stopPropagation).on(el,"click",L.DomEvent.preventDefault).on(el,"click",callback);return{id:L.Util.stamp(el),el:el,callback:callback}},_removeItem:function(id){var item,el,i,l;for(i=0,l=this._items.length;i<l;i++){item=this._items[i];if(item.id===id){el=item.el;callback=item.callback;if(callback){L.DomEvent.off(el,"click",L.DomEvent.stopPropagation).off(el,"mousedown",L.DomEvent.stopPropagation).off(el,"dblclick",L.DomEvent.stopPropagation).off(el,"click",L.DomEvent.preventDefault).off(el,"click",item.callback)}this._container.removeChild(el);this._items.splice(i,1);return item}}return null},_createSeparator:function(container,index){var el=this._insertElementAt("div",L.Map.ContextMenu.BASE_CLS+"-separator",container,index);return{id:L.Util.stamp(el),el:el}},_createEventHandler:function(el,func,context){var me=this,map=this._map,disabledCls=L.Map.ContextMenu.BASE_CLS+"-item-disabled";return function(e){if(L.DomUtil.hasClass(el,disabledCls)){return}me._hide();func.call(context||map,me._showLocation);me._map.fire("contextmenu:select",{contextmenu:me,el:el})}},_insertElementAt:function(tagName,className,container,index){var refEl,el=document.createElement(tagName);el.className=className;if(index!==undefined){refEl=container.children[index]}if(refEl){container.insertBefore(el,refEl)}else{container.appendChild(el)}return el},_show:function(e){this._showAtPoint(e.containerPoint)},_showAtPoint:function(pt,data){if(!this._visible&&this._items.length){var map=this._map,layerPoint=map.containerPointToLayerPoint(pt),latlng=map.layerPointToLatLng(layerPoint),event={contextmenu:this};if(data){event=L.extend(data,event)}this._showLocation={latlng:latlng,layerPoint:layerPoint,containerPoint:pt};this._setPosition(pt);this._container.style.display="block";this._visible=true;this._map.fire("contextmenu.show",event)}},_hide:function(){if(this._visible){this._container.style.display="none";this._visible=false;this._map.fire("contextmenu.hide",{contextmenu:this})}},_setPosition:function(pt){var mapSize=this._map.getSize(),container=this._container,containerSize=this._getElementSize(container);container._leaflet_pos=pt;if(pt.x+containerSize.x>mapSize.x){container.style.left="auto";container.style.right=mapSize.x-pt.x+"px"}else{container.style.left=pt.x+"px";container.style.right="auto"}if(pt.y+containerSize.y>mapSize.y){container.style.top="auto";container.style.bottom=mapSize.y-pt.y+"px"}else{container.style.top=pt.y+"px";container.style.bottom="auto"}},_getElementSize:function(el){var size=this._size;if(!size||this._sizeChanged){size={};el.style.left="-999999px";el.style.right="auto";el.style.display="block";size.x=el.offsetWidth;size.y=el.offsetHeight;el.style.left="auto";el.style.display="none";this._sizeChanged=false}return size},_onKeyDown:function(e){var key=e.keyCode;if(key===27&&this._visible){this._hide()}}});L.Map.addInitHook("addHandler","contextmenu",L.Map.ContextMenu);L.Mixin.ContextMenu={_initContextMenu:function(){this._items=[];this.on("contextmenu",this._showContextMenu,this)},_showContextMenu:function(e){var itemOptions,pt,i,l;if(this._map.contextmenu){pt=this._map.mouseEventToContainerPoint(e.originalEvent);for(i=0,l=this.options.contextmenuItems.length;i<l;i++){itemOptions=this.options.contextmenuItems[i];this._items.push(this._map.contextmenu.insertItem(itemOptions,itemOptions.index))}this._map.once("contextmenu.hide",this._hideContextMenu,this);this._map.contextmenu.showAt(pt,{relatedTarget:this})}},_hideContextMenu:function(){var i,l;for(i=0,l=this._items.length;i<l;i++){this._map.contextmenu.removeItem(this._items[i])}this._items.length=0}};L.Marker.mergeOptions({contextmenu:false,contextmenuItems:[]});L.Marker.addInitHook(function(){if(this.options.contextmenu){this._initContextMenu()}});L.Marker.include(L.Mixin.ContextMenu); +(function(t){var e;if(typeof define==="function"&&define.amd){define(["leaflet"],t)}else if(typeof module!=="undefined"){e=require("leaflet");module.exports=t(e)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}t(window.L)}})(function(t){t.Map.mergeOptions({contextmenuItems:[]});t.Map.ContextMenu=t.Handler.extend({_touchstart:t.Browser.msPointer?"MSPointerDown":t.Browser.pointer?"pointerdown":"touchstart",statics:{BASE_CLS:"leaflet-contextmenu"},initialize:function(e){t.Handler.prototype.initialize.call(this,e);this._items=[];this._visible=false;var n=this._container=t.DomUtil.create("div",t.Map.ContextMenu.BASE_CLS,e._container);n.style.zIndex=1e4;n.style.position="absolute";if(e.options.contextmenuWidth){n.style.width=e.options.contextmenuWidth+"px"}this._createItems();t.DomEvent.on(n,"click",t.DomEvent.stop).on(n,"mousedown",t.DomEvent.stop).on(n,"dblclick",t.DomEvent.stop).on(n,"contextmenu",t.DomEvent.stop)},addHooks:function(){t.DomEvent.on(document,t.Browser.touch?this._touchstart:"mousedown",this._onMouseDown,this).on(document,"keydown",this._onKeyDown,this);this._map.on({contextmenu:this._show,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this);t.DomEvent.on(this._map.getContainer(),"mouseleave",this._hide,this)},removeHooks:function(){t.DomEvent.off(document,t.Browser.touch?this._touchstart:"mousedown",this._onMouseDown,this).off(document,"keydown",this._onKeyDown,this);this._map.off({contextmenu:this._show,mousedown:this._hide,movestart:this._hide,zoomstart:this._hide},this);t.DomEvent.off(this._map.getContainer(),"mouseleave",this._hide,this)},showAt:function(e,n){if(e instanceof t.LatLng){e=this._map.latLngToContainerPoint(e)}this._showAtPoint(e,n)},hide:function(){this._hide()},addItem:function(t){return this.insertItem(t)},insertItem:function(t,e){e=e!==undefined?e:this._items.length;var n=this._createItem(this._container,t,e);this._items.push(n);this._sizeChanged=true;this._map.fire("contextmenu.additem",{contextmenu:this,el:n.el,index:e});return n.el},removeItem:function(e){var n=this._container;if(!isNaN(e)){e=n.children[e]}if(e){this._removeItem(t.Util.stamp(e));this._sizeChanged=true;this._map.fire("contextmenu.removeitem",{contextmenu:this,el:e})}},removeAllItems:function(){var e;while(this._container.children.length){e=this._container.children[0];this._removeItem(t.Util.stamp(e))}},hideAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e<n;e++){t=this._items[e];t.el.style.display="none"}},showAllItems:function(){var t,e,n;for(e=0,n=this._items.length;e<n;e++){t=this._items[e];t.el.style.display=""}},setDisabled:function(e,n){var i=this._container,o=t.Map.ContextMenu.BASE_CLS+"-item";if(!isNaN(e)){e=i.children[e]}if(e&&t.DomUtil.hasClass(e,o)){if(n){t.DomUtil.addClass(e,o+"-disabled");this._map.fire("contextmenu.disableitem",{contextmenu:this,el:e})}else{t.DomUtil.removeClass(e,o+"-disabled");this._map.fire("contextmenu.enableitem",{contextmenu:this,el:e})}}},isVisible:function(){return this._visible},_createItems:function(){var t=this._map.options.contextmenuItems,e,n,i;for(n=0,i=t.length;n<i;n++){this._items.push(this._createItem(this._container,t[n]))}},_createItem:function(e,n,i){if(n.separator||n==="-"){return this._createSeparator(e,i)}var o=t.Map.ContextMenu.BASE_CLS+"-item",s=n.disabled?o+" "+o+"-disabled":o,h=this._insertElementAt("a",s,e,i),a=this._createEventHandler(h,n.callback,n.context,n.hideOnSelect),r="";if(n.icon){r='<img class="'+t.Map.ContextMenu.BASE_CLS+'-icon" src="'+n.icon+'"/>'}else if(n.iconCls){r='<span class="'+t.Map.ContextMenu.BASE_CLS+"-icon "+n.iconCls+'"></span>'}h.innerHTML=r+n.text;h.href="#";t.DomEvent.on(h,"mouseover",this._onItemMouseOver,this).on(h,"mouseout",this._onItemMouseOut,this).on(h,"mousedown",t.DomEvent.stopPropagation).on(h,"click",a);return{id:t.Util.stamp(h),el:h,callback:a}},_removeItem:function(e){var n,i,o,s,h;for(o=0,s=this._items.length;o<s;o++){n=this._items[o];if(n.id===e){i=n.el;h=n.callback;if(h){t.DomEvent.off(i,"mouseover",this._onItemMouseOver,this).off(i,"mouseover",this._onItemMouseOut,this).off(i,"mousedown",t.DomEvent.stopPropagation).off(i,"click",h)}this._container.removeChild(i);this._items.splice(o,1);return n}}return null},_createSeparator:function(e,n){var i=this._insertElementAt("div",t.Map.ContextMenu.BASE_CLS+"-separator",e,n);return{id:t.Util.stamp(i),el:i}},_createEventHandler:function(e,n,i,o){var s=this,h=this._map,a=t.Map.ContextMenu.BASE_CLS+"-item-disabled",o=o!==undefined?o:true;return function(r){if(t.DomUtil.hasClass(e,a)){return}if(o){s._hide()}if(n){n.call(i||h,s._showLocation)}s._map.fire("contextmenu:select",{contextmenu:s,el:e})}},_insertElementAt:function(t,e,n,i){var o,s=document.createElement(t);s.className=e;if(i!==undefined){o=n.children[i]}if(o){n.insertBefore(s,o)}else{n.appendChild(s)}return s},_show:function(t){this._showAtPoint(t.containerPoint)},_showAtPoint:function(e,n){if(this._items.length){var i=this._map,o=i.containerPointToLayerPoint(e),s=i.layerPointToLatLng(o),h={contextmenu:this};if(n){h=t.extend(n,h)}this._showLocation={latlng:s,layerPoint:o,containerPoint:e};if(n&&n.relatedTarget){this._showLocation.relatedTarget=n.relatedTarget}this._setPosition(e);if(!this._visible){this._container.style.display="block";this._visible=true}else{this._setPosition(e)}this._map.fire("contextmenu.show",h)}},_hide:function(){if(this._visible){this._visible=false;this._container.style.display="none";this._map.fire("contextmenu.hide",{contextmenu:this})}},_setPosition:function(e){var n=this._map.getSize(),i=this._container,o=this._getElementSize(i),s;if(this._map.options.contextmenuAnchor){s=t.point(this._map.options.contextmenuAnchor);e=e.add(s)}i._leaflet_pos=e;if(e.x+o.x>n.x){i.style.left="auto";i.style.right=Math.max(n.x-e.x,0)+"px"}else{i.style.left=Math.max(e.x,0)+"px";i.style.right="auto"}if(e.y+o.y>n.y){i.style.top="auto";i.style.bottom=Math.max(n.y-e.y,0)+"px"}else{i.style.top=Math.max(e.y,0)+"px";i.style.bottom="auto"}},_getElementSize:function(t){var e=this._size,n=t.style.display;if(!e||this._sizeChanged){e={};t.style.left="-999999px";t.style.right="auto";t.style.display="block";e.x=t.offsetWidth;e.y=t.offsetHeight;t.style.left="auto";t.style.display=n;this._sizeChanged=false}return e},_onMouseDown:function(t){this._hide()},_onKeyDown:function(t){var e=t.keyCode;if(e===27){this._hide()}},_onItemMouseOver:function(e){t.DomUtil.addClass(e.target||e.srcElement,"over")},_onItemMouseOut:function(e){t.DomUtil.removeClass(e.target||e.srcElement,"over")}});t.Map.addInitHook("addHandler","contextmenu",t.Map.ContextMenu);t.Mixin.ContextMenu={bindContextMenu:function(e){t.setOptions(this,e);this._initContextMenu();return this},unbindContextMenu:function(){this.off("contextmenu",this._showContextMenu,this);return this},_initContextMenu:function(){this._items=[];this.on("contextmenu",this._showContextMenu,this)},_showContextMenu:function(t){var e,n,i,o;if(this._map.contextmenu){n=this._map.mouseEventToContainerPoint(t.originalEvent);if(!this.options.contextmenuInheritItems){this._map.contextmenu.hideAllItems()}for(i=0,o=this.options.contextmenuItems.length;i<o;i++){e=this.options.contextmenuItems[i];this._items.push(this._map.contextmenu.insertItem(e,e.index))}this._map.once("contextmenu.hide",this._hideContextMenu,this);this._map.contextmenu.showAt(n,{relatedTarget:this})}},_hideContextMenu:function(){var t,e;for(t=0,e=this._items.length;t<e;t++){this._map.contextmenu.removeItem(this._items[t])}this._items.length=0;if(!this.options.contextmenuInheritItems){this._map.contextmenu.showAllItems()}}};var e=[t.Marker,t.Path],n={contextmenu:false,contextmenuItems:[],contextmenuInheritItems:true},i,o,s;for(o=0,s=e.length;o<s;o++){i=e[o];if(!i.prototype.options){i.prototype.options=n}else{i.mergeOptions(n)}i.addInitHook(function(){if(this.options.contextmenu){this._initContextMenu()}});i.include(t.Mixin.ContextMenu)}return t.Map.ContextMenu});
\ No newline at end of file |