Leaflet/debug/tests/set_icon_reuse_dom.html
2013-11-08 16:44:14 +02:00

44 lines
1.4 KiB
HTML

<html>
<head>
<title>Test for preservation of Icon DOM element</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<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>