locked
jQuery Bing event problem RRS feed

  • Question

  • Hello
    Has anyone else come across this problem?
    
    When adding pins to the Bing map I have set the custom icon to a chunk of HTML with an id, I then attach a click event to that element using jquery. This works fine until the pushpin is no longer within the viewport of the map at which point the element is removed from the DOM. When the pin is back within the viewport of the of the map, the element is recreated with the same ID but the events that were previously attached are not recreated.
    
    To use this example you will need a copy of the jQuery script and a custom icon you wish to use - update the html header accordingly to match the location of your files.

    To recreate
    1)create a html file with this html and browse to it
    2)rollover the pin - you should get a custom popup,
    3)drag map so pin is outside visible map boundary
    4)drag map bag so pin is visible
    5)rollover pin and Bingo (BING-makesmyevents-GO) , no custom rollover anymore :-(

    Now I realise that rollovers are supplied by Bing so no problem but this is a simple example, I have attached much more sophisticated behaviours to my pins that also get stripped off and I can't find a solution? The bing scirpt must copy the elements details when the pin is removed from the map as when they get restored, the ids I have assigned are still present so I was wondering if there was an event that I could hook into? In that way I would be able to reassign the behaviours were then pins becomes visible again? Or any other solution that you can think of would be most appreciated? Many thanks Dave Lowe
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title></title>
    		<style>
    			#myPinDiv
    			{
    				position:absolute;
    				width:33px;
    				height:40px;
    				background-image:url(pin.png); margin-left:13px; margin-top:-16px;}
    			}
    		</style>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    		<script type="text/javascript">
    
    
    		var map = null;
    
    		function GetMap()
    		{
    			var map = new VEMap('myMap');
    			map.onLoadMap = function() {
    				var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
    				shape.SetCustomIcon('<div id="myPinDiv"></div>');
    				map.AddShape(shape);
    
    				$('#myPinDiv')
    					.unbind('mouseenter')
    					.mouseenter(function() {
    						$('<div id="myPopup"></div>')
    							.hide()
    							.text('hello')
    							.appendTo($('body'))
    							.css({
    								top: $('#myPinDiv').offset().top,
    								left: ($('#myPinDiv').offset().left+30),
    								position: 'absolute',
    								zIndex: 1000000,
    								position:'absolute',
    								width:100,
    								height:100,
    								backgroundColor: 'White'
    
    							})
    							.fadeIn('fast');
    
    					})
    					.mouseleave(function() {
    						$('#myPopup')
    							.fadeOut('fast', function() {
    								$('#myPopup')
    									.remove();
    							});
    					});
    
    
    			};
    			map.LoadMap();
    		};
    
    
    
    
    
    		$(document).ready(function() {
    
    			GetMap();
    
    
    		});
    
    		</script>
    	</head>
    	<body>
    		<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    	</body>
    </html>
    

    Friday, July 31, 2009 5:02 PM

Answers

  • Update:

    I've managed to work around this problem by creating an array of all the functions that bind all the necessary behaviours that I want. When the map view changes I loop through this array and repply all the behaviours. Its not very nice but it works ok. Hopefully someone has a better solution?

    Ideally I could hook into events such as VEShape.onMovesOutsideViewport() and VEShape.onMovesWithinViewport()but afaik there is nothing like this.

    Interestingly the onViewChange VE event fires before all the pins are redrawn so I have use setTimeout  to wait till they're redrawn before reapplying the events!

    All very messy but until the VE/Bing API is updated to account for this scenrio (eg reapplying any attached behaviours to pins as well as their attributes) I can't think of anything cleaner.

    Any updates/alternatives to this would be most welcome

    Cheers

    Dave
    Monday, August 3, 2009 11:23 AM