cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
baef8e1ffe
Leaflet/debug/tests/set_icon_reuse_dom.html

45 lines
1.5 KiB
HTML
Raw Normal View History

Add a test that shows the DOM change failure The icon should switch from blue to red and back, but does not in IE because the DOMelement has disappeared, as in issue #561. Instead, the mouseover event is fired on any mouse motion in the marker. In addition, in FF & Chrome the mouseover and mouseout events are continously fired on any movement, which gives the correct visual results but causes a lot of superflous event handling.
2013-05-30 21:58:59 +08:00
<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);
Make test/example actually check ondragstart/end
2013-05-31 20:16:18 +08:00
var marker = L.marker([50, 50], {icon: blueIcon, draggable: true});
Add a test that shows the DOM change failure The icon should switch from blue to red and back, but does not in IE because the DOMelement has disappeared, as in issue #561. Instead, the mouseover event is fired on any mouse motion in the marker. In addition, in FF & Chrome the mouseover and mouseout events are continously fired on any movement, which gives the correct visual results but causes a lot of superflous event handling.
2013-05-30 21:58:59 +08:00
Make test/example actually check ondragstart/end
2013-05-31 20:16:18 +08:00
marker.on('dragstart', function () {
console.log('dragstart');
Add a test that shows the DOM change failure The icon should switch from blue to red and back, but does not in IE because the DOMelement has disappeared, as in issue #561. Instead, the mouseover event is fired on any mouse motion in the marker. In addition, in FF & Chrome the mouseover and mouseout events are continously fired on any movement, which gives the correct visual results but causes a lot of superflous event handling.
2013-05-30 21:58:59 +08:00
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';
});
Make test/example actually check ondragstart/end
2013-05-31 20:16:18 +08:00
marker.on('dragend', function () {
console.log('dragend');
Add a test that shows the DOM change failure The icon should switch from blue to red and back, but does not in IE because the DOMelement has disappeared, as in issue #561. Instead, the mouseover event is fired on any mouse motion in the marker. In addition, in FF & Chrome the mouseover and mouseout events are continously fired on any movement, which gives the correct visual results but causes a lot of superflous event handling.
2013-05-30 21:58:59 +08:00
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>
Reference in New Issue Copy Permalink