none
drag touch event in custom pushpin is not work RRS feed

  • Question

  • map.entities.clear(); 
    var pushpinOptions = {draggable:true, width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 2px;background-color:LightBlue;width:100px;'>Custom Pushpin</div>"}; 
    var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
    map.entities.push(pushpin);

    Hi all:

        I find if use custom pushpin, when set draggable to true, the pushpin can't drag when use touch screen.(if use mouse, it works well.)

        does someone can solve the issue?

        thank you very much.

    Friday, February 10, 2017 6:48 AM

Answers

  • I suspect you are using bing maps v7 which is nearing end of life and will be turned off in June. I suspect this because htmlContent is no longer supported in v8 as all rendering happens on a html5 canvas. Dragging of pushpins using mouse or touch works in v8.

    [Blog] [twitter] [LinkedIn]

    Friday, February 10, 2017 3:31 PM
  • Migrating to V8 is the best way to fix this. V7 is going to be turned off in a few months. It doesn't make any sense to do new development on it. V8 is over 90% backwards compatible with V7. It should take little effort to migrate your code to V8.

    [Blog] [twitter] [LinkedIn]

    Monday, February 13, 2017 5:59 PM
  • I've extended the V8 module for HTML pushpins to support dragging. You can try it out here: http://bingmapsv8samples.azurewebsites.net/#CustomOverlay_HtmlPushpinLayer

    As for IE 7 and 8 support; Currently less than 0.2% of users are on IE7. Less 3% of users are on IE8 and this number has been dropping at a rate of 1% per month.


    [Blog] [twitter] [LinkedIn]

    Tuesday, February 14, 2017 2:45 PM
  • after test, I find pushpin.setLocation function will stop touchmove event(trigger only once) in chrome when use html pushpin. follow is my code.it works well in chrome.

    var isdrag = false;
    			var dragEndX = 0;
    			var dragEndY = 0;
    			Microsoft.Maps.Events.addHandler(map, 'mousedown', function (e)
    			{
    				if (e.targetType == 'pushpin')
    				{
    					isdrag = true;
    					console.log('x:' + e.getX() + ', y:' + e.getY());
    				}
    			});
    
    			Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e)
    			{
    				if (e.targetType == 'pushpin' && isdrag)
    				{
    					e.handled = true;
    					var anchor = e.target.getAnchor();
    					//can't invoke pushpin setLocation function because it will be stop touchmove event in chrome
    					$(e.target.cm1002_er_etr.dom).css({ left: e.getX() - anchor.x, top: e.getY() - anchor.y });
    					dragEndX = e.getX();
    					dragEndY = e.getY();
    					//console.log('x:' + e.getX() + ', y:' + e.getY());
    
    				}
    			});
    
    			Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e)
    			{
    				if (e.targetType == 'pushpin' && isdrag)
    				{
    					isdrag = false;
    					var anchor = e.target.getAnchor();
    					var point = new Microsoft.Maps.Point(dragEndX, dragEndY);
    					var loc = map.tryPixelToLocation(point);
    					e.target.setLocation(loc);
    					//In touch event, e.getX() will be old X,Y, so can't use it
    					console.log('x:' + e.getX() + ', y:' + e.getY());
    				}
    			});


    • Edited by s000rd Wednesday, February 15, 2017 9:35 AM
    • Proposed as answer by Ricky_Brundritt Wednesday, February 15, 2017 8:25 PM
    • Marked as answer by Ricky_Brundritt Wednesday, February 15, 2017 8:25 PM
    Wednesday, February 15, 2017 9:33 AM

All replies

  • I suspect you are using bing maps v7 which is nearing end of life and will be turned off in June. I suspect this because htmlContent is no longer supported in v8 as all rendering happens on a html5 canvas. Dragging of pushpins using mouse or touch works in v8.

    [Blog] [twitter] [LinkedIn]

    Friday, February 10, 2017 3:31 PM
  • Yes, I use bing maps v7,  I want to find a better way to solve the issue.

    Monday, February 13, 2017 1:46 AM
  • Migrating to V8 is the best way to fix this. V7 is going to be turned off in a few months. It doesn't make any sense to do new development on it. V8 is over 90% backwards compatible with V7. It should take little effort to migrate your code to V8.

    [Blog] [twitter] [LinkedIn]

    Monday, February 13, 2017 5:59 PM
  • Ricky_Brundritt:

        thank you for your reply. in our project, we develop many function based bing map v7, the functions will change html(div,image) when bing map render complete. so if upgrade to v8, the function will not work.

        another issue is some of our customer still use windows XP and IE7 or IE8, so it's not support canvas.

    Tuesday, February 14, 2017 1:43 AM
  • hmm... ok. Well V7 is going to be turned off at the end of June. There is an HTML Pushpin module for V8. It doesn't support dragging at the moment, but that can be added.

    [Blog] [twitter] [LinkedIn]

    Tuesday, February 14, 2017 2:48 AM
  • I've extended the V8 module for HTML pushpins to support dragging. You can try it out here: http://bingmapsv8samples.azurewebsites.net/#CustomOverlay_HtmlPushpinLayer

    As for IE 7 and 8 support; Currently less than 0.2% of users are on IE7. Less 3% of users are on IE8 and this number has been dropping at a rate of 1% per month.


    [Blog] [twitter] [LinkedIn]

    Tuesday, February 14, 2017 2:45 PM
  • It's looks very cool, but I still need to find a way to solve the issue in bing map v7.

    BTW, the issue only happens in chrome(IE and edge works well) and your example(v8) still have the issue, it can't drag in chrome if use touch screen(I use surface).


    • Edited by s000rd Wednesday, February 15, 2017 5:07 AM
    Wednesday, February 15, 2017 5:06 AM
  • after test, I find pushpin.setLocation function will stop touchmove event(trigger only once) in chrome when use html pushpin. follow is my code.it works well in chrome.

    var isdrag = false;
    			var dragEndX = 0;
    			var dragEndY = 0;
    			Microsoft.Maps.Events.addHandler(map, 'mousedown', function (e)
    			{
    				if (e.targetType == 'pushpin')
    				{
    					isdrag = true;
    					console.log('x:' + e.getX() + ', y:' + e.getY());
    				}
    			});
    
    			Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e)
    			{
    				if (e.targetType == 'pushpin' && isdrag)
    				{
    					e.handled = true;
    					var anchor = e.target.getAnchor();
    					//can't invoke pushpin setLocation function because it will be stop touchmove event in chrome
    					$(e.target.cm1002_er_etr.dom).css({ left: e.getX() - anchor.x, top: e.getY() - anchor.y });
    					dragEndX = e.getX();
    					dragEndY = e.getY();
    					//console.log('x:' + e.getX() + ', y:' + e.getY());
    
    				}
    			});
    
    			Microsoft.Maps.Events.addHandler(map, 'mouseup', function (e)
    			{
    				if (e.targetType == 'pushpin' && isdrag)
    				{
    					isdrag = false;
    					var anchor = e.target.getAnchor();
    					var point = new Microsoft.Maps.Point(dragEndX, dragEndY);
    					var loc = map.tryPixelToLocation(point);
    					e.target.setLocation(loc);
    					//In touch event, e.getX() will be old X,Y, so can't use it
    					console.log('x:' + e.getX() + ', y:' + e.getY());
    				}
    			});


    • Edited by s000rd Wednesday, February 15, 2017 9:35 AM
    • Proposed as answer by Ricky_Brundritt Wednesday, February 15, 2017 8:25 PM
    • Marked as answer by Ricky_Brundritt Wednesday, February 15, 2017 8:25 PM
    Wednesday, February 15, 2017 9:33 AM