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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
WebContent/base/leaflet/L.LabelMarker.js Normal file
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');
}
}
});

77
WebContent/base/leaflet/L.LabelMarkerIcon.js Normal file
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;
}
});

46
WebContent/base/leaflet/L.MouseMarker.js
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
});
}
});

94
WebContent/base/leaflet/L.SwitchableIcon.js
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;
}
}
});

6
WebContent/base/osrm/OSRM.Marker.js
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()) {

4
WebContent/main.html
View File

@ -38,8 +38,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
<script src="leaflet/leaflet-src.js" type="text/javascript"></script>
<script src="base/leaflet/L.Bugfixes.js" type="text/javascript"></script>
<script src="base/leaflet/L.Control.QueryableLayers.js" type="text/javascript"></script>
<script src="base/leaflet/L.MouseMarker.js" type="text/javascript"></script>
<script src="base/leaflet/L.SwitchableIcon.js" type="text/javascript"></script>
<script src="base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
<script src="base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
<script src="base/leaflet/L.BingLayer.js" type="text/javascript"></script>
<script src="OSRM.base.js" type="text/javascript"></script>

20
WebContent/main.js
View File

@ -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<icon_list.length; i++) {
var icon = {
iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src"), iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"), shadowSize: new L.Point(41, 41),
popupAnchor: new L.Point(0, -33)
};
OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon);
OSRM.G.icons[icon_list[i].id] = new LabelMarkerIcon({iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src")});
}
// special values for drag marker
OSRM.G.icons['marker-drag'] = new L.SwitchableIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );
OSRM.G.icons['marker-drag'] = new L.LabelMarkerIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );
};

4
WebContent/printing/printing.html
View File

@ -38,8 +38,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- scripts -->
<script src="../leaflet/leaflet-src.js" type="text/javascript"></script>
<script src="printing.js" type="text/javascript"></script>
<script src="../base/leaflet/L.MouseMarker.js" type="text/javascript"></script>
<script src="../base/leaflet/L.SwitchableIcon.js" type="text/javascript"></script>
<script src="../base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
<script src="../base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
<script src="../base/leaflet/L.BingLayer.js" type="text/javascript"></script>
<script src="../base/osrm/OSRM.MapView.js" type="text/javascript"></script>
</head>

27
WebContent/printing/printing.js
View File

@ -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<icon_list.length; i++) {
var icon = {
// absolute directories used for compatibility with legacy IE (quirks mode)
iconUrl: images_list[icon_list[i].image_id].src, iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
shadowUrl: images_list["marker-shadow"].src, shadowSize: new L.Point(41, 41),
popupAnchor: new L.Point(0, -33)
};
OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon);
}
OSRM.G.icons[icon_list[i].id] = new LabelMarkerIcon({iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src")});
}
};
@ -79,13 +82,13 @@ OSRM.drawMap = function(tile_server, bounds) {
// manage makers
OSRM.drawMarkers = function( markers ) {
OSRM.G.map.addLayer( new L.MouseMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
OSRM.G.map.addLayer( new L.LabelMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
for(var i=1, size=markers.length-1; i<size; i++) {
var via_marker = new L.MouseMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} );
var via_marker = new L.LabelMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} );
OSRM.G.map.addLayer( via_marker );
via_marker.setLabel(i);
}
OSRM.G.map.addLayer( new L.MouseMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ) );
OSRM.G.map.addLayer( new L.LabelMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ) );
};