Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

leaflet 0.4 compliant markers and icons

Browse Source
This commit is contained in:
DennisSchiefer
2012-08-14 12:39:26 +01:00
parent ea84f774a7
commit 6c2e391622
9 changed files with 205 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/base/leaflet/L.LabelMarker.js
+54
View File
@@ -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');
}
}
});
WebContent/base/leaflet/L.LabelMarkerIcon.js
+77
View File
@@ -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;
}
});
WebContent/base/leaflet/L.MouseMarker.js
+16 -30
View File
@@ -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
});
}
});
WebContent/base/leaflet/L.SwitchableIcon.js
+24 -70
View File
@@ -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;
}
}
});
WebContent/base/osrm/OSRM.Marker.js
+3 -3
View File
@@ -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<OSRM.G.markers.route.length; i++)
@@ -119,7 +119,7 @@ onDragStart: function(e) {
},
onDragEnd: function(e) {
OSRM.G.dragging = false;
this.switchIcon(this.options.baseicon);
this.changeIcon(this.options.baseicon);
this.parent.setPosition( e.target.getLatLng() );
if (OSRM.G.route.isShown()) {