cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1726 from Norkart/reuseIconDOM

Browse Source 
Reuse icon DOM
This commit is contained in:
Vladimir Agafonkin 2013-06-03 02:14:06 -07:00
commit c54b6c13b3
3 changed files with 89 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
debug/tests/set_icon_reuse_dom.html Normal file
View File

@ -0,0 +1,44 @@
<html>
<head>
<title>Test for preservation of Icon DOM element</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<script type="text/javascript">
var blueIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif'});
var redIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif'});
var map = L.map('map').setView( [50, 50], 10);
var marker = L.marker([50, 50], {icon: blueIcon, draggable: true});
marker.on('dragstart', function () {
console.log('dragstart');
marker.setIcon(redIcon);
//This is the previous workaround:
//var iconElem = L.DomUtil.get(marker._icon);
//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif';
});
marker.on('dragend', function () {
console.log('dragend');
marker.setIcon(blueIcon);
//This is the previous workaround:
//var iconElem = L.DomUtil.get(marker._icon);
//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif';
});
marker.addTo(map);
</script>
</body>
</html>

28
src/layer/marker/Icon.js
View File

@ -22,15 +22,15 @@ L.Icon = L.Class.extend({
L.setOptions(this, options);
},
createIcon: function () {
return this._createIcon('icon');
createIcon: function (oldIcon) {
return this._createIcon('icon', oldIcon);
},
createShadow: function () {
return this._createIcon('shadow');
createShadow: function (oldIcon) {
return this._createIcon('shadow', oldIcon);
},
_createIcon: function (name) {
_createIcon: function (name, oldIcon) {
var src = this._getIconUrl(name);
if (!src) {
@ -40,7 +40,12 @@ L.Icon = L.Class.extend({
return null;
}
var img = this._createImg(src);
var img;
if (!oldIcon) {
img = this._createImg(src);
} else {
img = this._createImg(src, oldIcon);
}
this._setIconStyles(img, name);
return img;
@ -74,14 +79,17 @@ L.Icon = L.Class.extend({
}
},
_createImg: function (src) {
var el;
_createImg: function (src, el) {
if (!L.Browser.ie6) {
el = document.createElement('img');
if (!el) {
el = document.createElement('img');
}
el.src = src;
} else {
el = document.createElement('div');
if (!el) {
el = document.createElement('div');
}
el.style.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
}

49
src/layer/marker/Marker.js
View File

@ -77,9 +77,6 @@ L.Marker = L.Class.extend({
},
setIcon: function (icon) {
if (this._map) {
this._removeIcon();
}
this.options.icon = icon;
@ -107,32 +104,38 @@ L.Marker = L.Class.extend({
classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide',
needOpacityUpdate = false;
if (!this._icon) {
var reuseIcon = this._icon;
if (!reuseIcon) {
this._icon = options.icon.createIcon();
if (options.title) {
this._icon.title = options.title;
}
this._initInteraction();
needOpacityUpdate = (this.options.opacity < 1);
L.DomUtil.addClass(this._icon, classToAdd);
if (options.riseOnHover) {
L.DomEvent
.on(this._icon, 'mouseover', this._bringToFront, this)
.on(this._icon, 'mouseout', this._resetZIndex, this);
}
} else {
this._icon = this.options.icon.createIcon(this._icon);
}
if (!this._shadow) {
if (options.title) {
this._icon.title = options.title;
}
this._initInteraction();
needOpacityUpdate = (this.options.opacity < 1);
L.DomUtil.addClass(this._icon, classToAdd);
if (options.riseOnHover) {
L.DomEvent
.on(this._icon, 'mouseover', this._bringToFront, this)
.on(this._icon, 'mouseout', this._resetZIndex, this);
}
var reuseShadow = this._shadow;
if (!reuseShadow) {
this._shadow = options.icon.createShadow();
if (this._shadow) {
L.DomUtil.addClass(this._shadow, classToAdd);
needOpacityUpdate = (this.options.opacity < 1);
}
} else {
this._shadow = this.options.icon.createShadow(this._shadow);
}
if (needOpacityUpdate) {
@ -141,9 +144,11 @@ L.Marker = L.Class.extend({
var panes = this._map._panes;
panes.markerPane.appendChild(this._icon);
if (!reuseIcon) {
panes.markerPane.appendChild(this._icon);
}
if (this._shadow) {
if (this._shadow && !reuseShadow) {
panes.shadowPane.appendChild(this._shadow);
}
},