disable bing map webpart mouse wheel zoom event.

kyle shapiro asked on March 18, 2015 23:29

I want to disable the mouse wheel zooming event for the bing map webpart. Users get stuck zooming on the map when they're trying to scroll the page. I found this nice little piece of code that works in the bing map interactive SDK. Microsoft.Maps.Events.addHandler(map, 'mousewheel', function(e) { if(e.targetType == 'map') { e.handled = true; } }); My question is, how and where do I apply this to reach the desired effect. Please be as specific as possible. Thank you.

Recent Answers

Brenden Kehren answered on March 19, 2015 00:41

Any time after the "map" object is initialized. You could try placing it directly after the webpart using a javascript webpart and selecting the second option and set it to be inline with the < script > tags.

0 votesVote for this answer Mark as a Correct answer

kyle shapiro answered on March 19, 2015 15:44

Thank you Brenden. I think you have steered me in the right direction. I have not got it working yet, but I have some additional information to share. Inspecting the elements after page load, I can see that kentico generates the following line at the end of the script to create the map MM.Events.addHandler(p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map, 'keydown', customKeyDown); At the top of the body there is also a script var MM = Microsoft.Maps; From this I gather that p_lt_... is the variable name for this particular map, and that I can write MM in place of Microsoft.Maps. I have rewritten my inline javascript statement like so. MM.Events.addHandler(p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map, 'mousewheel', function(e) { if(e.targetType == 'map') { e.handled = true; } });

I have also tried MM.Events.addHandler(p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map, 'mousewheel', function(e) { if(e.targetType == 'p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map') { e.handled = true; } });

and using Microsoft.Maps in place of MM in my scripts.

I have also tried using MM.Map or Map in place of map on the targetType part. MM.Events.addHandler(p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map, 'mousewheel', function(e) { if(e.targetType == 'MM.Map') { e.handled = true; } });

I even tried removing the entire if(e.targetType == 'map') part of the script. None of these attempts resulted in mouse wheel being disabled for my bing map. Any further suggestions on what I should try next?

0 votesVote for this answer Mark as a Correct answer

kyle shapiro answered on March 19, 2015 17:53

myMap = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Your Bing Maps Key'});
var myFunction = function(){
alert('hi');
}
Microsoft.Maps.Events.addHandler(myMap, 'mousewheel', myFunction);

Writing the above code in at the bing maps interactive sdk https://www.bingmapsportal.com/Isdk/AjaxV7#CreateMap1 works great. Trying the same with a javascript webpart below the map webpart set to inline and changing myMap to equal what kentico created the map as p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map = new MM.Map(document.getElementById('p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map'), p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map yields no results.

var myFunction = function(){alert('hi');}
Microsoft.Maps.Events.addHandler(p_lt_ctl02_pageplaceholder_p_lt_ctl10_BingMaps2_map, 'mousewheel', myFunction);

works on SDK, not in kentico. Am I going about this the wrong way?

0 votesVote for this answer Mark as a Correct answer