From 5165e01a5c2a1324b6f878a17e61bc87a2cdee4e Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Fri, 30 Mar 2012 16:30:16 +0100 Subject: [PATCH] added draggable routes, changed findViaPosition to only return the index and not set the node, IMPORTANT: changed leaflet-src.js for a bugfix!, --- README.md | 2 +- WebContent/OSRM.Map.js | 4 +- WebContent/OSRM.Markers.js | 44 ++++++++++++++- WebContent/OSRM.Route.js | 8 ++- WebContent/OSRM.Via.js | 52 ++++++++++++++++-- WebContent/images/drag.pdf | Bin 0 -> 2978 bytes WebContent/images/marker-drag.png | Bin 0 -> 444 bytes WebContent/leaflet/leaflet-src.js | 9 ++- WebContent/main.js | 7 +++ WebContent/routing/OSRM.RoutingDescription.js | 2 +- 10 files changed, 112 insertions(+), 16 deletions(-) create mode 100644 WebContent/images/drag.pdf create mode 100644 WebContent/images/marker-drag.png diff --git a/README.md b/README.md index 5dce2e12c..2dc09ed0d 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Setup ----- The frontend should work directly as provided. Several settings - including the URL for the routing server and the geocoder server - can be specified in `OSRM.config.js`. -Different tile servers can be specified in `OSRM.main.js`. +Different tile servers can be specified in `OSRM.Map.js`. Note that the URL shortener used for generating route links only works with URLs pointing to the official Project-OSRM website. diff --git a/WebContent/OSRM.Map.js b/WebContent/OSRM.Map.js index b57ab30cb..1031f3f0a 100644 --- a/WebContent/OSRM.Map.js +++ b/WebContent/OSRM.Map.js @@ -126,13 +126,13 @@ init: function() { OSRM.G.map.on('zoomend', OSRM.Map.zoomed ); OSRM.G.map.on('click', OSRM.Map.click ); OSRM.G.map.on('contextmenu', OSRM.Map.contextmenu ); - OSRM.G.map.on('click', OSRM.Map.mousemove ); + OSRM.G.map.on('mousemove', OSRM.Map.mousemove ); }, // map event handlers zoomed: function(e) { OSRM.Routing.getRoute(); }, contextmenu: function(e) {;}, -mousemove: function(e) {;}, +mousemove: function(e) { OSRM.Via.drawDragMarker(e); }, click: function(e) { if( !OSRM.G.markers.hasSource() ) { var index = OSRM.G.markers.setSource( e.latlng ); diff --git a/WebContent/OSRM.Markers.js b/WebContent/OSRM.Markers.js index f7395ff5e..4d2dab54c 100644 --- a/WebContent/OSRM.Markers.js +++ b/WebContent/OSRM.Markers.js @@ -94,6 +94,8 @@ OSRM.RouteMarker = function ( label, style, position ) { this.marker.on( 'drag', this.onDrag ); this.marker.on( 'dragstart', this.onDragStart ); this.marker.on( 'dragend', this.onDragEnd ); +// this.marker.on( 'mouseover', this.onMouseOver ); +// this.marker.on( 'mouseout', this.onMouseOut ); }; OSRM.inheritFrom( OSRM.RouteMarker, OSRM.Marker ); OSRM.extend( OSRM.RouteMarker, { @@ -122,9 +124,9 @@ onDragStart: function(e) { if( OSRM.G.markers.route[i].marker === this ) { OSRM.G.dragid = i; break; - } + } - OSRM.G.markers.highlight.hide(); + //OSRM.G.markers.highlight.hide(); if (OSRM.G.route.isShown()) OSRM.G.route.showOldRoute(); }, @@ -140,17 +142,53 @@ onDragEnd: function(e) { if(OSRM.G.route.isShown()==false) OSRM.Geocoder.updateAddress(this.parent.label); }, +onMouseOver: function(e) { + OSRM.G.onmouse = true; +}, +onMouseOut: function(e) { + OSRM.G.onmouse = false; +}, toString: function() { return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")"; } }); +//drag marker class (draggable, invokes route drawing routines) +OSRM.DragMarker = function ( label, style, position ) { + OSRM.DragMarker.prototype.base.constructor.apply( this, arguments ); + this.label = label ? label : "drag_marker"; +}; +OSRM.inheritFrom( OSRM.DragMarker, OSRM.RouteMarker ); +OSRM.extend( OSRM.DragMarker, { +onClick: function(e) { + this.parent.hide(); +}, +onDragStart: function(e) { + var new_via_index = OSRM.Via.findViaIndex( e.target.getLatLng() ); + OSRM.G.markers.route.splice(new_via_index+1,0, this.parent ); + + OSRM.RouteMarker.prototype.onDragStart.call(this,e); +}, +onDragEnd: function(e) { + OSRM.G.markers.route[OSRM.G.dragid].hide(); + OSRM.G.markers.route[OSRM.G.dragid] = new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via']}, e.target.getLatLng() ); + OSRM.G.markers.route[OSRM.G.dragid].show(); + + OSRM.RouteMarker.prototype.onDragEnd.call(this,e); +}, +toString: function() { + return "OSRM.DragMarker: \""+this.label+"\", "+this.position+")"; +} +}); + + // marker management class (all route markers should only be set and deleted with these routines!) // [this holds the vital information of the route] OSRM.Markers = function() { this.route = new Array(); - this.highlight = new OSRM.HighlightMarker("highlight", {draggable:false,icon:OSRM.G.icons['marker-highlight']});; + this.highlight = new OSRM.DragMarker("highlight", {draggable:true,icon:OSRM.G.icons['marker-highlight']});; + this.dragger = new OSRM.DragMarker("drag", {draggable:true,icon:OSRM.G.icons['marker-drag']});; }; OSRM.extend( OSRM.Markers,{ removeAll: function() { diff --git a/WebContent/OSRM.Route.js b/WebContent/OSRM.Route.js index 2750f33f9..71e88a110 100644 --- a/WebContent/OSRM.Route.js +++ b/WebContent/OSRM.Route.js @@ -59,8 +59,12 @@ centerView: function() { OSRM.g.map.fitBoundsUI( bounds ); }, onClick: function(e) { - if(OSRM.G.route.isRoute()) - OSRM.Via.findViaPosition( e.latlng ); + if(OSRM.G.route.isRoute()) { + var via_index = OSRM.Via.findViaIndex( e.latlng ); + var marker_index = OSRM.G.markers.setVia(via_index, e.latlng); + OSRM.G.markers.route[marker_index].show(); + OSRM.Routing.getRoute(); + } }, toString: function() { return "OSRM.Route("+ this.label + ", " + this.route.getLatLngs().length + " points)"; diff --git a/WebContent/OSRM.Via.js b/WebContent/OSRM.Via.js index 940a470f8..429703789 100644 --- a/WebContent/OSRM.Via.js +++ b/WebContent/OSRM.Via.js @@ -44,7 +44,7 @@ _findNearestRouteSegment: function( new_via ) { // find the correct index among all via nodes to insert the new via node, and insert it -findViaPosition: function( new_via_position ) { +findViaIndex: function( new_via_position ) { // find route segment that is closest to click position (marked by last index) var nearest_index = OSRM.Via._findNearestRouteSegment( new_via_position ); @@ -60,12 +60,52 @@ findViaPosition: function( new_via_position ) { } // add via node - var index = OSRM.G.markers.setVia(new_via_index, new_via_position); - OSRM.G.markers.route[index].show(); - - OSRM.Routing.getRoute(); - return new_via_index; +}, + + +//function that draws a drag marker +dragTimer: new Date(), + +drawDragMarker: function(event) { + if( OSRM.G.route.isShown() == false ) + return; + if( OSRM.G.dragging == true ) + return; + if( (new Date() - OSRM.Via.dragTimer) < 25 ) + return; + if( OSRM.G.onmouse ) { + OSRM.G.markers.dragger.hide(); + return; + } + OSRM.Via.dragTimer = new Date(); + +// var mouse = event.latlng; +// for(var i=0, size=OSRM.G.markers.route.length; i580;eFlad3$M>_iAO*c2g{(dh`82G4i_0*nA+)u~V3vvMuH5{vBtPvo<|x4{tKjimP8B9h%&R{y?64aq}97B|@{V zlEMdJM7wPpHe>}C6Otn~DnddBdQx~%@3jx-jfc^-;bE6!x7WW@sQo~WyHreTQSr=Z zGUnQ5mpIm@DCBq@A9rd~drCjpm-a+?5#BZ_Ix1dm`nsa=DCvl$$x z10e*1h)j_X$Aq{PmKgz9XlCd_Fh~-Ki06snAn1u8_h1n40JM+79X)Xnmar@jQ5nP( zg^47dVh#_JXQ4aO6ZV@S*gP3t^esKXMP2c}lilo+KDw!1YunXcT%$v;mh5XtZpdjMIls=%o|C`xxG}L~%~15kM}@BHY-v^G=H#ZfaW>N5 zEEH4?x-IBBnIE_rva%ViS3f+es+T!t+UK#c$2OAa>|LO{O0ng7ch}w2;5(ZlS{Qj} zd{)fa!VcQk=k@S6qb~OSH(SeCqu+&o8`+<^u%;+2H#<G8^gI;Kiml_v9dK2E-swMaTVuc+$b)!kNCZID2ILYUg&o`k17JioOzu)e=g z>+M-oZBBu)hN=Z8a)-sz#B&1c?=9IA6&DvMv(lC6CJO~ygNsw&xBGkRYQ^4RRxKQ>`r$M<@YKGuO@6x>s{;q#zlx=?z ztDY>sC(ulP1idiDbM{GcuQW@qXiwsF?(9;xDH`9Yq%nb1M9p?wcW$*qsQqY=2Ybu% zJ_nQ;n(Gs=VTBkV`<){U-^mRas?Nz6a8u|+U7e}w)6sApK&<6=AgLpLv>82LB{QON9YZ| z8#W(2eu1?fwI3%9mUi5(eLJjasnkz)Dm9~=;AXWwJLiY`MO42#RibAv3Xf>DnZ*2e z-7L7>NjEgu+j&Oyjd7mckv&OqI~3Iaa-k!ntf0TvaP9bmmbd{g(_ZcUQ{?OK-d+{` zvLUaGRoCG0W9bI1q0_744;TKLFnIANR^7r!5tlbM^FsFRtw;{^E>AlE@Uj;_AFOJB``YF<<-hFFU!5SXiENe6?SR2 z0oN(L>q^?nLv>*S%MM%qRg3R7xE>@_SEEgZR}feTBV6 zFMVcJmL%Wdo4;7c8f%s^#sH_gv?lF}0Q1E2UB4WdKXCf%h9WDapO;Q|P6#HIb(9ED zX~7)jBH&9w-;i}46!eWxRoDEhtxOKi2@{3L8Z^-Hb(xk8T+=^eg82s*Nnm48s$m8J zA&`*eV53CDkKloM>2p}VSRfMG$(oh1odp>okr4_7+`*F!_PL4p|LNPO14l`)UR^{Awzb-!fA|5rGf_eIR+%a|4WSaHAX?eobtsw8Vz);FEMjq z;V&>VGH9%yV`LfvT=pe4Qy(tj2*NN4B%7%{1u>Y6FA)`qa9HLrFdH}vgGFHOl?(Do Vlq13ArXkZA=FqZb_G=xWe*yDgU%>zX literal 0 HcmV?d00001 diff --git a/WebContent/images/marker-drag.png b/WebContent/images/marker-drag.png new file mode 100644 index 0000000000000000000000000000000000000000..2e067fbd5a42203151f105c6fbd42b424694e554 GIT binary patch literal 444 zcmV;t0YmV8d12{F`y?d7dn6NPXWsV-Y$T5H%6F}#qs4FZi?1lOJHhN6Vo;~~Tl`B`k zh5;?X&;P4@T!(C?b{_4Tz{ mT3VMu27&?$6xb*k2nqoIZ5dQcr>yD#0000xwnG= literal 0 HcmV?d00001 diff --git a/WebContent/leaflet/leaflet-src.js b/WebContent/leaflet/leaflet-src.js index 4f0b7c1f0..3330a17d9 100644 --- a/WebContent/leaflet/leaflet-src.js +++ b/WebContent/leaflet/leaflet-src.js @@ -3382,7 +3382,14 @@ L.LineUtil = { dx = p.x - x; dy = p.y - y; - return sqDist ? dx * dx + dy * dy : new L.Point(x, y); + //return sqDist ? dx * dx + dy * dy : new L.Point(x, y); // DS_CHANGE + if(sqDist) + return dx*dx + dy*dy; + else { + var p = new L.Point(x,y); + p._sqDist = dx*dx + dy*dy; + return p; + } } }; diff --git a/WebContent/main.js b/WebContent/main.js index 0b4eaf714..1bfc55096 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -65,10 +65,17 @@ OSRM.prefetchIcons = function() { 'marker-target', 'marker-via', 'marker-highlight', + 'marker-drag' ]; for(var i=0; i'+response.ShortURL+']'; -// document.getElementById('route-prelink').innerHTML = '[]'; +// document.getElementById('route-prelink').innerHTML = '[]'; }, showRouteLink_TimeOut: function(){ document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';