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 2e067fbd5..9832ead70 100644 Binary files a/WebContent/images/marker-drag.png and b/WebContent/images/marker-drag.png differ diff --git a/WebContent/images/marker-highlight-drag.png b/WebContent/images/marker-highlight-drag.png new file mode 100644 index 000000000..70e558b99 Binary files /dev/null and b/WebContent/images/marker-highlight-drag.png differ diff --git a/WebContent/images/marker-source-drag.png b/WebContent/images/marker-source-drag.png new file mode 100644 index 000000000..cc72f6fca Binary files /dev/null and b/WebContent/images/marker-source-drag.png differ diff --git a/WebContent/images/marker-target-drag.png b/WebContent/images/marker-target-drag.png new file mode 100644 index 000000000..c3c6f7c08 Binary files /dev/null and b/WebContent/images/marker-target-drag.png differ diff --git a/WebContent/images/marker-via-drag.png b/WebContent/images/marker-via-drag.png new file mode 100644 index 000000000..e1b10039f Binary files /dev/null and b/WebContent/images/marker-via-drag.png differ diff --git a/WebContent/main.html b/WebContent/main.html index 3836c0747..b4d54fa28 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -42,6 +42,7 @@ or see http://www.gnu.org/licenses/agpl.txt. + 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