From 93ae928236314e9afe893dedd756a03c685f43e5 Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Mon, 2 Apr 2012 08:29:03 +0200 Subject: [PATCH] added icons that can change their image, added image change while dragging markers, increased (invisible) size of drag marker, fixed issues with drag marker and highlight marker overlapping --- WebContent/L.MouseMarker.js | 43 +++++--- WebContent/L.SwitchableIcon.js | 115 ++++++++++++++++++++ WebContent/OSRM.Markers.js | 16 ++- WebContent/OSRM.Via.js | 10 +- WebContent/images/marker-drag.png | Bin 444 -> 462 bytes WebContent/images/marker-highlight-drag.png | Bin 0 -> 1725 bytes WebContent/images/marker-source-drag.png | Bin 0 -> 1786 bytes WebContent/images/marker-target-drag.png | Bin 0 -> 1678 bytes WebContent/images/marker-via-drag.png | Bin 0 -> 1791 bytes WebContent/main.html | 1 + WebContent/main.js | 26 +++-- 11 files changed, 181 insertions(+), 30 deletions(-) create mode 100644 WebContent/L.SwitchableIcon.js create mode 100644 WebContent/images/marker-highlight-drag.png create mode 100644 WebContent/images/marker-source-drag.png create mode 100644 WebContent/images/marker-target-drag.png create mode 100644 WebContent/images/marker-via-drag.png diff --git a/WebContent/L.MouseMarker.js b/WebContent/L.MouseMarker.js index 87eaed1a7..b19d96861 100644 --- a/WebContent/L.MouseMarker.js +++ b/WebContent/L.MouseMarker.js @@ -16,8 +16,7 @@ or see http://www.gnu.org/licenses/agpl.txt. */ // Leaflet extension: MouseMarker -// [marker class that propagates modifier and button presses] -// [currently deactivated: propagation mousemove events] +// [marker class that propagates modifier and button presses in mouse click events and allows for changing icons] // extended marker class @@ -25,21 +24,33 @@ L.MouseMarker = L.Marker.extend({ initialize: function (latlng, options) { L.Marker.prototype.initialize.apply(this, arguments); }, - -// _initInteraction: function (){ -// L.Marker.prototype._initInteraction.apply(this, arguments); -// if (this.options.clickable) -// L.DomEvent.addListener(this._icon, 'mousemove', this._fireMouseEvent, this); -// }, - -// _fireMouseEvent: function (e) { -// this.fire(e.type, { -// latlng: this._map.mouseEventToLatLng(e), -// layerPoint: this._map.mouseEventToLayerPoint(e) -// }); -// L.DomEvent.stopPropagation(e); -// }, + switchIcon: function( icon ) { + this.options.icon = icon; + + if (this._map) { + this._changeIcon(); + this._reset(); + } + }, + + _changeIcon: function () { + var options = this.options; + + if (this._icon) { + this._icon = options.icon.switchIcon( this._icon ); + this._icon.title = options.title; + } + + var panes = this._map._panes; + + if (this._shadow) + panes.shadowPane.removeChild(this._shadow); + this._shadow = options.icon.createShadow(); + if (this._shadow) + panes.shadowPane.appendChild(this._shadow); + }, + _onMouseClick: function (e) { L.DomEvent.stopPropagation(e); if (this.dragging && this.dragging.moved()) { return; } diff --git a/WebContent/L.SwitchableIcon.js b/WebContent/L.SwitchableIcon.js new file mode 100644 index 000000000..8a93d863e --- /dev/null +++ b/WebContent/L.SwitchableIcon.js @@ -0,0 +1,115 @@ +/* +This program is free software; you can redistribute it and/or modify +it under the terms of the GNU AFFERO General Public License as published by +the Free Software Foundation; either version 3 of the License, or +any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program; if not, write to the Free Software +Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA +or see http://www.gnu.org/licenses/agpl.txt. +*/ + +// Leaflet extension: SwitchableIcon +// [will be an extension of L.Icon in Leaflet 0.4, for now it is a copy with added functionality] + + +// icon class with functions to simply switch the icon images +L.SwitchableIcon = L.Class.extend({ + options: { + /* + iconUrl: (String) (required) + iconSize: (Point) (can be set through CSS) + iconAnchor: (Point) (centered by default if size is specified, can be set in CSS with negative margins) + popupAnchor: (Point) (if not specified, popup opens in the anchor point) + shadowUrl: (Point) (no shadow by default) + shadowSize: (Point) + */ + className: '' + }, + + initialize: function (options) { + L.Util.setOptions(this, options); + }, + + createIcon: function () { + return this._createIcon('icon'); + }, + + createShadow: function () { + return this.options.shadowUrl ? this._createIcon('shadow') : null; + }, + + _createIcon: function (name) { + var img = this._createImg(this.options[name + 'Url']); + this._setIconStyles(img, name); + return img; + }, + + _setIconStyles: function (img, name) { + var options = this.options, + size = options[name + 'Size'], + anchor = options.iconAnchor; + + if (!anchor && size) { + anchor = size.divideBy(2, true); + } + + if (name === 'shadow' && anchor && options.shadowOffset) { + anchor._add(options.shadowOffset); + } + + img.className = 'leaflet-marker-' + name + ' ' + options.className; + + if (anchor) { + img.style.marginLeft = (-anchor.x) + 'px'; + img.style.marginTop = (-anchor.y) + 'px'; + } + + if (size) { + img.style.width = size.x + 'px'; + img.style.height = size.y + 'px'; + } + }, + + _createImg: function (src) { + var el; + if (!L.Browser.ie6) { + el = document.createElement('img'); + el.src = src; + } else { + el = document.createElement('div'); + el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")'; + } + return el; + }, + + // new functions start here + switchIcon: function (el) { + return this._switchIcon('icon', el); + }, + + switchShadow: function (el) { + return this.options.shadowUrl ? this._switchIcon('shadow', el) : null; + }, + + _switchIcon: function (name, el) { + var img = this._switchImg(this.options[name + 'Url'], el); + this._setIconStyles(img, name); + return img; + }, + + _switchImg: function (src, el) { + if (!L.Browser.ie6) { + el.src = src; + } else { + el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")'; + } + return el; + } +}); diff --git a/WebContent/OSRM.Markers.js b/WebContent/OSRM.Markers.js index 4b7d153c2..529bf80b2 100644 --- a/WebContent/OSRM.Markers.js +++ b/WebContent/OSRM.Markers.js @@ -69,6 +69,7 @@ toString: function() { // route marker class (draggable, invokes route drawing routines) OSRM.RouteMarker = function ( label, style, position ) { + style.baseicon = style.icon; OSRM.RouteMarker.prototype.base.constructor.apply( this, arguments ); this.label = label ? label : "route_marker"; @@ -98,6 +99,7 @@ onDrag: function(e) { }, onDragStart: function(e) { OSRM.G.dragging = true; + this.switchIcon(this.options.dragicon); // store id of dragged marker for( var i=0; i this.route.length-2 ) return -1; - this.route.splice(id+1,0, new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via']}, position)); + this.route.splice(id+1,0, new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via'],dragicon:OSRM.G.icons['marker-via-drag']}, position)); return id+1; }, removeMarker: function(id) { diff --git a/WebContent/OSRM.Via.js b/WebContent/OSRM.Via.js index 4471b4b56..0b307de7d 100644 --- a/WebContent/OSRM.Via.js +++ b/WebContent/OSRM.Via.js @@ -91,7 +91,7 @@ drawDragMarker: function(event) { var dist = OSRM.G.map.project(mouse).distanceTo(OSRM.G.map.project(position)); if( dist < 20 ) min_dist = 1000; - } + } // check whether mouse is over another marker var pos = OSRM.G.map.layerPointToContainerPoint(event.layerPoint); @@ -103,6 +103,14 @@ drawDragMarker: function(event) { min_dist = 1000; } + // special care for highlight marker + if( OSRM.G.markers.highlight.isShown() ) { + if( OSRM.G.map.project(mouse).distanceTo(OSRM.G.map.project( OSRM.G.markers.highlight.getPosition() ) ) < 20 ) + min_dist = 1000; + else if( obj == OSRM.G.markers.highlight.marker._icon) + min_dist = 1000; + } + if( min_dist < 400) { OSRM.G.markers.dragger.setPosition( OSRM.G.map.layerPointToLatLng(minpoint) ); OSRM.G.markers.dragger.show(); diff --git a/WebContent/images/marker-drag.png b/WebContent/images/marker-drag.png index 2e067fbd5a42203151f105c6fbd42b424694e554..9832ead70e464bfca4119fce845c812b27126e55 100644 GIT binary patch literal 462 zcmV;<0WtoGP)Xpy000SaNLh0L00O)K00O)LTL$4-00004XF*Lt006O%3;baP00049Nkl+9=_Vc6NTXZ7I*tz5Y>7~KURjW9!yv7wl+?G;|fR;DG}Na2j&=?p+380>v%~^tU;BY#_%Na?Am}g`%#ou&@`! zFi-+RkGa{iXaBu&K(iBZ02nr!_4W0&T3T9{K?Z{Y6%;90Gb%L!04fd{RF()i_@% 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= diff --git a/WebContent/images/marker-highlight-drag.png b/WebContent/images/marker-highlight-drag.png new file mode 100644 index 0000000000000000000000000000000000000000..70e558b99cd8aa3952b7605a730ae0b2d7f86109 GIT binary patch literal 1725 zcmV;u215CXP)P001cn1^@s6z>|W`00007bV*G`2iyb# z1{oHe_;^GB000SaNLh0L01EH`01EH{Laa2H00004XF*Lt006O%3;baP000I|Nkl9bU%Ee_N4GVvb- zcqc9pGA^g#DDih3r_*Y+N!YUatth#{!9keJeR$MmLUvZ-4chvKz}jC5GU5GSqAX?S z>XoaJnVCt(2JmFCKMF*ZsKFcSH%Rl_ckjUG8Fth3a{@X)E6Bn9^BBN=j!Vtmy=M>H z&T+K1HNG_GUY8eJw-=+fwiaz|Ml8*m_vP72->E1N0$?e+NdSf0ckV!2YeOtGji7aF zH=(}19(H@bK+7Tms%86JNPy>kM+GrO0vZ|XN-HV@--bYr z1Vr8Ol9D1)>WNYq9kHUhxfuie2o`7PVX^SYT%totvQF~+1yC@oqfF2Mq7p65x1P~* zkz!*1lLaYSj9P~x0F((@{9At?58F-n{)e+rDD$vsV}W$m)OZD3w|)S(+l_Y%w?#PT z_c|r#9-9NYrCEvs?$80bmf|Ydw!M&&=Y=v+8D@R|(YT9cN`ng z-E3x=Y{^MatfRwNy($+cjvLU}6xo;|07eyOjzK~7aJgL5G6CsQF#8N-SSEwRY&L@v z!@UVF-H@!TEbRMq0nGh|h$uoN!U|K*1HAvsNzBtQh>LPeDxWHI2z%Rb;M5Jj%B!ZwT8SNflMZafMq#4sXx?eb(D@ul`6@b zdqxa3wI~W#BO@L6Kis>hVDHBt!D{8Bil|cQqHY;vez;w>sBH#v>EbyUZus7@4B?() z%Gu9ukNu)TDVLgSI=MZ=n31M^k2M^LClE3gqpYp9>E!A)c}Pw|++-UEE?%fY^$lMm*)vQgdurxIRMuQ| zSse}+?BlG-0&y`t2HR)3?b*zbJaeyn+0+ z>+|Un1f<@Wi!Bxp+B>@O`&pjv>%kXxMKk*!2qLPk82mtUx3}Fq(TN~pDFez;-=!As5<^zo=D^Ec=Y0lgi)EX^U?no#gu5y#H;fkI3f*W T$g|Ul00000NkvXXu0mjfa`QZ@ literal 0 HcmV?d00001 diff --git a/WebContent/images/marker-source-drag.png b/WebContent/images/marker-source-drag.png new file mode 100644 index 0000000000000000000000000000000000000000..cc72f6fca90cdc237e97fa48e8bcd441e5c1528c GIT binary patch literal 1786 zcmVP001cn1^@s6z>|W`00007bV*G`2iyb# z1{gF^g9zaO000SaNLh0L01EH`01EH{Laa2H00004XF*Lt006O%3;baP000JwNklvwjw=8?bm@NBa(IxuFl4TmA zlLY7HWAl+M5lxg$vpF9DQ4vvbVnpR72&IZeDYT`xx3{-<=e8E8fUqn|9SxN{$USDX86k*57hRqp z93sN=0g+I0hED4Vn_ki7YqB!3pjNB>`~*Qjd#4^17b@`3rawiGHW1mZF-e}z{_x`T zmzU)&$b(F#fJ=11%=P(^1SwSrVZz3K(3|)zvM5m|Rxi^n zpO=%92fM&g@*dcoc8J3qPQeM**$;=nA|ZY42CJ6j*TBQEYUTFX)Er-TS3!ZZ0< z1xvHDvthFJz{c4FsS8Ysj0ev-u6O}ie9d+!M78mUrqVnnwlB}D?@zZExZ}(a1E^?X3A;0QH-?VAkYrx z2N0?Zg}$v71=)qe5_osKhKoVnovTmp2jf`>3r1=jGDOHpfI|?S^e&ygEko|2O(={? zAejq1bp^&RJ~%ko<0FEVlo*VUJq|8O^{G8aD6y8rN=I^XplnD7s+^HX?nN z4o=SL6Aw`algT70F-S_f94=TL4hIx+&BAz~;P zrxI+C1;#Kv3U|DLWs4R;8yk(z?v8;tg+c+TdQbdyjy?zY+|#?hz|s&U%Ga&^2sc`4 zeP)ytn}q0yI5gEa;8bNbNHr9+o+(q}keinWtyb$7qnkF@?SJB2^;wi4f3VfBL-nc^ z3v-fFr=hO-hEGrsWlf(l+ph?^Ek@{#oj%WG)E*>~?@IR5;$b0vM3rL5__oV8tIN`| z(y3B-pFlg6WNqse3~SGPk#aK@;neZd5)JBR5addgv*BOl<%xRiN_8;xX*W6Ed9_b zqiJShK#(@z$@4W*o}!^ieMxqKr77*LJYSAUv5D^eJYGx=dl3db{k-&}k#hVtGKqUT zqr}kcVC{B0G-5cMw0p+`6{Ez-$|@xSpV!V)hM}Zg>*OcocW(9pE^Qx++G5RE4L`)=2(4 zu@~0BNDkmUg1|P{ZVT>JHuHDWfhmf{je#v6AMdUivh+sDj{!SxFf< zecIh_c40sIo{xmZQ5ewD(9nQ*KFnt*OpsACr0@<}XqFay6dRqS)Ln`tZ4JFhnKT_d z&E5;$#5p*5rdskkNPb<$Pk#h7iju!VMipEMXHc2ThsvLWp zTOK1VcBcE$oY+~oe!E_ZK0@Pd|DHs$ek#v;&n62M>C32MV5@gOA5%qOwi0_nN+2$| zm?>($rxv&pe~dSDd`di4BF+Auz8zN2&&z+T!fORMj&Dds0V)Ft3q*-z#d!38su)!B cbD$yr0Eu|c34VkBJpcdz07*qoM6N<$f?e1=6#xJL literal 0 HcmV?d00001 diff --git a/WebContent/images/marker-target-drag.png b/WebContent/images/marker-target-drag.png new file mode 100644 index 0000000000000000000000000000000000000000..c3c6f7c0860d9efd0563272639792d8b4f51061b GIT binary patch literal 1678 zcmV;9266d`P)P001cn1^@s6z>|W`00007bV*G`2iyb# z1{oN7KvhEk000SaNLh0L01EH`01EH{Laa2H00004XF*Lt006O%3;baP000IZNklncK3(AIr8M+hVe0S;l^7_QO95 z$rdsaqnX*1%*?sOXcS4@Tu_HNZq-B#Qsh=jp%*})Ep5-~>Dl|80;N!(b=jM|={eu` zz3=nhzf%Qbpoykz=LIW0 z-Xgw2fDd8r`0?n&Tj8=PI;cWB{j0&80mWXk%hn*Do^ zV9h!po&$J4;EWKNcqNdM9DE+1fb(XJhn_wlplb_)I8J`S03PYyD9c4w79cF3JQ8Ws zD26_u<2i<#TTbfF{cwIB2m!DV{Yd~N$Xp4Gjgyc!I)G`)$^g7R4F7VO;)tUJRL7RN zndpjQx$fYB5P)+6l-c>5sE)kOxZez@RM5SBJdX5TwSM}!b_T@q(Pvtb7fxf%TEOL| z#1Mdl5NqjdR(6nC0Zc!y%nCopm;t4xA>-gdJ?Si;?a7I(!zIb!C}I{1g~=0QmYetl zpz8&OFJ6=-?3XS9tu0g#zTiHi*)o$Ux<~;pzFJ~1JvnriRXC;>Le)Ne}|0g1~f_G@?(_OcnPGxfTJ4L z1|$l!L{@wG5T{d@TPP&j6%hd#1p*|Ks6@bI4Q|Yqx7%qik@ZL_NA~laf({E}xF(U_ z75>EmGyC_AYgG0j|MjcKE!q#pd)XZnyDV#Ve$+>k|deo_CS%X zC+jD}<=M!gLSp(kzt3wO8ys@Um8DdMG>yKb#-g6E4nXY~3-e-{5+_}7p8Juii~7rC z3il*QBUd2l@8|Mrt}#FF!c0w+vkCC|Lfq2@t*VbZX}S>0Cl#C_aKps=>GB) zH2HMJcxb+jjD+OmzM<0Z=wVMcWYa~#cXrtD^evs9YF_Y#tT6|z<2L64b#<^kZUcD@ zRazR>7Up6D>zhQnUz(f3y(pmbeP)c9`tEMNQ`0^(Alu81Kgxge=su*8o5mO6LM*Xc zx6CU73{l=}w(vEkaa$niDxJ^TA0~V2qVcaRCUz7>NdRV>o5TZ)s4cgqPMHrx71_R3tH^FSDhlCSc4Q;Td( zoH_vtg|sNM5i($CmF0@+|Kg(p+4->E7$*g4{k?riI&cWWq<2Bq5B*=d!yhgjV%TWgBublS%{(6!Sbkqoj+UD(BO&*guHp+bG!b5+l>`vWu#D;$IEka zWfeB_pbJzm3+Y-AMBel(t2&!n*abpYsyL6i4eMcPZD!}r?`&)weLJ{!Kuqrd1q&e7o%{-l}T-4abHg~kj6;{STPBClVRDGHU$K;mB|&x=8eEd-xzO9#h?Jsj)X^ezrKPeL zwEjEo_x@)P*>VNWjt;*JHW~X0p$~{rhn=l2=|$8ayPiB|F|QtY`~@&x={!{1mIq Yzf|AAYP001cn1^@s6z>|W`00007bV*G`2iyb# z1{oLX|47mR000SaNLh0L01EH`01EH{Laa2H00004XF*Lt006O%3;baP000J#Nklh49PJ*49HKZj(_;pw$1g@sfA<`pUY_eg)hK-0_wQ8o}=oq?Mo6vZp0V>{AM-5p`WI@OJAA4!t23Seh!g|66+rT}{`$)Z9%(6?2l5{(coB z_;+N&ij1rS2Y`SN=-vc2@$XqeMtlxvktxq zSUVT8r%Fj&MvEFi+1ZmK^)?exy@KR?Ui#sv#FfW$-ukUf&}+5Mij%T*>6~-&{Q4Ks zb^SWNxl}$#-POBJcRDm|qU;aLS(=XIy#6XMWC!ma!J@dB$=oka4($yShXW}uWQN*- z0Qd*3%G9-fhqQHTal7$mg3r;#isw(Nagw(+@#%lf*}o6An+*!5q_vqcSXJ>k2*cgb zCjA70tqEFVBC>LR4RzvTnaJsMPWq&;0OCyeyx^#VB~ddz{z^{P%fN^ePKRT{c+F2Y z$T`07Q6XN>|0lfKrx2-+4^56eKw18NL>qM2p1TXqFU=Ev3}emaZHS0kZ1Q`CGBy9m zTV@Cd{!FAKgTH?l%U3R+48v$d)%o*8Kt~`p1Cdihj9G!~Bc-T5wq1^N&HDA=hXy9+ zH5zdGXarogEu1KdsVc2Ojews*9-dHrES&-8AOiXXnP9pIfjY7#>ga7{UNE))6)ZnHQ9u&sh@OZ|<3rWX=`#@wAA|pJ| z^KFVK9*Hi{kLu$GvGuiAVQ>CU840D^AMk?kySdz=VV20twN+JEvi5n{Y`qie>$V_! z#|~6~m&4`>C~v* znhi0Cq~wH&#k99KgBA3z=#ZMvo`AEr3ludtodL0lNqFPEcjOhfT)wFA`_aZtFn@9Z zk}!HXx5&{flk6^X)EDK74Rz;AGPms7iI#uWDu_%jJGSM%HlqmOcA}-;jM>CDHbm(X zkI6@7%J>Q1|uE-Z|PJQ}anGynYEAG;Nm zqn>VC)hKwjWk{(ud;fFKzO)tn%{Re&J&)D6lpkZDZveNiUF{bA;(?m~1r;Qk*%l>5 zs0wWDE&JFaQlEW>&ci&>q%Omax{qYP{pY6LJ(yYMvXJ4u2u@|b^l33*NCUfR=Tt)y zy&Wz%t?h&4Q#2ditRzhQL8-vm*8%pJK|Y*wsNRU$%2H;3YEQAx9To{i^R?jhG+e2y zrdMzE>_*Y_7vm4W-r3<+Ln@pLYfcg-0iVCn=c3;yE!BtQpQ%yts4f4D*`3~d&Oh=* zB%B%*c5AoAX0gzZLz;3@6-5t>h(61Gf$Rz%i}Se2H%sKi7dC!N_newQqa!BOn1;H~ zOPE#Xa{s27UB+!V?i1^pJ`oI$JCv&F9aDF)vA81>9O4&RjLqO<|yo ze(09V`buRPXuOQ(JH9sw6S}=mby<2shs;3Ft%k$UKtCIwH;M(594wP_UVNppoZjwa zTq&=>sMBkv@daJe3nCepLbiJPeSvex#`+72B5XOc6JLDwm*opRN{{f2&J5i7|I + diff --git a/WebContent/main.js b/WebContent/main.js index 1bfc55096..d9f4da010 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -43,6 +43,11 @@ OSRM.prefetchImages = function() { 'images/marker-target.png', 'images/marker-via.png', 'images/marker-highlight.png', + 'images/marker-source-drag.png', + 'images/marker-target-drag.png', + 'images/marker-via-drag.png', + 'images/marker-highlight-drag.png', + 'images/marker-drag.png', 'images/cancel.png', 'images/cancel_active.png', 'images/cancel_hover.png', @@ -65,17 +70,24 @@ OSRM.prefetchIcons = function() { 'marker-target', 'marker-via', 'marker-highlight', + 'marker-source-drag', + 'marker-target-drag', + 'marker-via-drag', + 'marker-highlight-drag', 'marker-drag' ]; - for(var i=0; i