From 3e1c29b9349ea958ee326c73a66104ab21fbd53f Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Sat, 18 Jun 2016 16:38:18 +0200 Subject: Add support for polylines --- web/js/eventmap.js | 112 ++++++++++++++++++++++++++++++++++++++++-- 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'}else if(options.iconCls){html=''}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;imapSize.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'}else if(n.iconCls){r=''}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;on.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