From 6c2e3916225cd3618b30065db2e0d8fd0b48ff9e Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Tue, 14 Aug 2012 12:39:26 +0100 Subject: [PATCH] leaflet 0.4 compliant markers and icons --- WebContent/base/leaflet/L.LabelMarker.js | 54 +++++++++++ WebContent/base/leaflet/L.LabelMarkerIcon.js | 77 ++++++++++++++++ WebContent/base/leaflet/L.MouseMarker.js | 46 ++++------ WebContent/base/leaflet/L.SwitchableIcon.js | 94 +++++--------------- WebContent/base/osrm/OSRM.Marker.js | 6 +- WebContent/main.html | 4 +- WebContent/main.js | 20 +++-- WebContent/printing/printing.html | 4 +- WebContent/printing/printing.js | 27 +++--- 9 files changed, 205 insertions(+), 127 deletions(-) create mode 100644 WebContent/base/leaflet/L.LabelMarker.js create mode 100644 WebContent/base/leaflet/L.LabelMarkerIcon.js diff --git a/WebContent/base/leaflet/L.LabelMarker.js b/WebContent/base/leaflet/L.LabelMarker.js new file mode 100644 index 000000000..c32445fa9 --- /dev/null +++ b/WebContent/base/leaflet/L.LabelMarker.js @@ -0,0 +1,54 @@ +/* +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: LabelMarker +// [marker class that allows for changing icons while dragging] + + +// extended marker class +L.LabelMarker = L.Marker.extend({ + // change marker icon + changeIcon: function( icon ) { + this.options.icon = icon; + + if (this._map) { + this._changeIcon(); + } + }, + + // add/change marker label + setLabel: function( label ) { + if(this._icon) { + this._icon.lastChild.innerHTML=label; + this._icon.lastChild.style.display = "block"; + } + }, + + // actual icon changing routine + _changeIcon: function () { + var options = this.options, + map = this._map, + animation = (map.options.zoomAnimation && map.options.markerZoomAnimation), + classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide'; + + if (this._icon) { + this._icon = options.icon.changeIcon( this._icon ); + L.DomUtil.addClass(this._icon, classToAdd); + L.DomUtil.addClass(this._icon, 'leaflet-clickable'); + } + } +}); \ No newline at end of file diff --git a/WebContent/base/leaflet/L.LabelMarkerIcon.js b/WebContent/base/leaflet/L.LabelMarkerIcon.js new file mode 100644 index 000000000..c445f5b78 --- /dev/null +++ b/WebContent/base/leaflet/L.LabelMarkerIcon.js @@ -0,0 +1,77 @@ +/* +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: LabelMarkerIcon +// [icon class with extra label and simple icon changing] + + +// extended icon class +L.LabelMarkerIcon = L.Icon.extend({ + // altered icon creation (with label) + _createImg: function (src) { + var el; + if (!L.Browser.ie6) { + el = document.createElement('div'); + + var img = document.createElement('img'); + var num = document.createElement('div'); + img.src = src; + num.className = 'via-counter'; + num.innerHTML = ""; + + el.appendChild(img); + el.appendChild(num); + } else { + el = document.createElement('div'); + el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")'; + } + return el; + }, + + // non-destructive icon changing + changeIcon: function (el) { + return this._changeIcon('icon', el); + }, + + changeShadow: function (el) { + return this.options.shadowUrl ? this._changeIcon('shadow', el) : null; + }, + + _changeIcon: function (name, el) { + var src = this._getIconUrl(name); + if (!src) { + if (name === 'icon') { + throw new Error("iconUrl not set in Icon options (see the docs)."); + } + return null; + } + + var img = this._changeImg(src, el); + this._setIconStyles(img, name); + + return img; + }, + + _changeImg: function (src, el) { + if (!L.Browser.ie6) { + el.firstChild.src = src; + } else { + el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")'; + } + return el; + } +}); diff --git a/WebContent/base/leaflet/L.MouseMarker.js b/WebContent/base/leaflet/L.MouseMarker.js index a3eaeb5b6..c15f563e9 100644 --- a/WebContent/base/leaflet/L.MouseMarker.js +++ b/WebContent/base/leaflet/L.MouseMarker.js @@ -16,24 +16,25 @@ or see http://www.gnu.org/licenses/agpl.txt. */ // Leaflet extension: MouseMarker -// [marker class that propagates modifier and button presses in mouse click events and allows for changing icons] +// [marker class that allows for changing icons while dragging] // extended marker class L.MouseMarker = L.Marker.extend({ - initialize: function (latlng, options) { - L.Marker.prototype.initialize.apply(this, arguments); - }, +// initialize: function (latlng, options) { +// L.Marker.prototype.initialize.apply(this, arguments); +// }, - switchIcon: function( icon ) { + // change marker icon + changeIcon: function( icon ) { this.options.icon = icon; if (this._map) { this._changeIcon(); - this._reset(); } }, - + + // add/change marker label setLabel: function( label ) { if(this._icon) { this._icon.lastChild.innerHTML=label; @@ -41,32 +42,17 @@ L.MouseMarker = L.Marker.extend({ } }, + // actual icon changing routine _changeIcon: function () { - var options = this.options; + var options = this.options, + map = this._map, + animation = (map.options.zoomAnimation && map.options.markerZoomAnimation), + classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide'; if (this._icon) { - this._icon = options.icon.switchIcon( this._icon ); - if (this.options.clickable) // TODO: only needed until Leaflet 0.4 - this._icon.className += ' leaflet-clickable'; + this._icon = options.icon.changeIcon( this._icon ); + L.DomUtil.addClass(this._icon, classToAdd); + L.DomUtil.addClass(this._icon, 'leaflet-clickable'); } - - 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; } - this.fire(e.type, { - altKey: e.altKey, - ctrlKey: e.ctrlKey, - shiftKey: e.shiftKey, - button: e.button - }); } }); \ No newline at end of file diff --git a/WebContent/base/leaflet/L.SwitchableIcon.js b/WebContent/base/leaflet/L.SwitchableIcon.js index faff9b42b..7dc553657 100644 --- a/WebContent/base/leaflet/L.SwitchableIcon.js +++ b/WebContent/base/leaflet/L.SwitchableIcon.js @@ -15,68 +15,13 @@ 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] +// Leaflet extension: MarkerIcon +// [icon class with extra label and simple icon changing] -// 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'; - } - }, - +// extended icon class +L.MarkerIcon = L.Icon.extend({ + // altered icon creation (with label) _createImg: function (src) { var el; if (!L.Browser.ie6) { @@ -97,27 +42,36 @@ L.SwitchableIcon = L.Class.extend({ return el; }, - // new functions start here - switchIcon: function (el) { - return this._switchIcon('icon', el); + // non-destructive icon changing + changeIcon: function (el) { + return this._changeIcon('icon', el); }, - switchShadow: function (el) { - return this.options.shadowUrl ? this._switchIcon('shadow', el) : null; + changeShadow: function (el) { + return this.options.shadowUrl ? this._changeIcon('shadow', el) : null; }, - - _switchIcon: function (name, el) { - var img = this._switchImg(this.options[name + 'Url'], el); + + _changeIcon: function (name, el) { + var src = this._getIconUrl(name); + if (!src) { + if (name === 'icon') { + throw new Error("iconUrl not set in Icon options (see the docs)."); + } + return null; + } + + var img = this._changeImg(src, el); this._setIconStyles(img, name); + return img; }, - _switchImg: function (src, el) { + _changeImg: function (src, el) { if (!L.Browser.ie6) { el.firstChild.src = src; } else { el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")'; } return el; - } + } }); diff --git a/WebContent/base/osrm/OSRM.Marker.js b/WebContent/base/osrm/OSRM.Marker.js index f143ec409..6df6ffcfa 100644 --- a/WebContent/base/osrm/OSRM.Marker.js +++ b/WebContent/base/osrm/OSRM.Marker.js @@ -24,7 +24,7 @@ OSRM.Marker = function( label, style, position ) { this.label = label ? label : "marker"; this.position = position ? position : new L.LatLng(0,0); - this.marker = new L.MouseMarker( this.position, style ); + this.marker = new L.LabelMarker( this.position, style ); this.marker.parent = this; this.shown = false; @@ -101,7 +101,7 @@ onDrag: function(e) { onDragStart: function(e) { OSRM.GUI.deactivateTooltip( "DRAGGING" ); OSRM.G.dragging = true; - this.switchIcon(this.options.dragicon); + this.changeIcon(this.options.dragicon); // store id of dragged marker for( var i=0; i - - + + diff --git a/WebContent/main.js b/WebContent/main.js index cb249b949..6ccbe9c13 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -116,18 +116,22 @@ OSRM.prefetchIcons = function() { {id:'marker-highlight-drag', image_id:'marker-highlight-drag'} //{id:'marker-drag', image_id:'marker-drag'} // special treatment because of size ]; - + + var LabelMarkerIcon = L.LabelMarkerIcon.extend({ + options: { + shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"), + iconSize: [25, 41], + shadowSize: [41, 41], + iconAnchor: [13, 41], + shadowAnchor: [13, 41], + popupAnchor: [0, -33] + } }); for(var i=0; i - - + + diff --git a/WebContent/printing/printing.js b/WebContent/printing/printing.js index ba25462f2..c9ad5e47e 100644 --- a/WebContent/printing/printing.js +++ b/WebContent/printing/printing.js @@ -38,16 +38,19 @@ OSRM.prefetchIcons = function(images_list) { {id:'marker-via', image_id:'marker-via'}, {id:'marker-highlight', image_id:'marker-highlight'} ]; - + + var LabelMarkerIcon = L.LabelMarkerIcon.extend({ + options: { + shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"), + iconSize: [25, 41], + shadowSize: [41, 41], + iconAnchor: [13, 41], + shadowAnchor: [13, 41], + popupAnchor: [0, -33] + } }); for(var i=0; i