none
Keep map position centered during zooming RRS feed

  • Question

  • Hello!

    I have a question concerning whether it's possible to keep map center at the same point during zooming by mouse wheel.

    Now the map center is changed depended on mouse position where mousewheel event is occurred (when user presses +/- he sees the center kept at the same place and he'd like to have the same behaviour when he zooms-in/out by mouse wheel).

    Tried workarounds:

    1) Microsoft.Maps.Events.addHandler( mapInstance, "viewchangeend", function() { mapInstance.setView( center : ... )  );

    this one works however it has undesired side effect - it works also when the map was dragged by user mouse 

    2) Microsoft.Maps.Events.addHandler( mapInstance, "mousewheel", function() { mapInstance.setView( center : ... ) };

    this one simply doesn't work.

    Thanks for any suggestions!

    Tuesday, December 20, 2016 1:27 PM

Answers

  • There is no built in method for changing this behavior as many users prefer to have a consistent user experience across all map surfaces they encounter, regardless of the app or website hosting the map. That said, it is possible to override this functionality if you really want to. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
        function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            overrideMouseWheelZoom(map);
        }
    
        function overrideMouseWheelZoom(map) {
            //Disable the default mouse wheel zoom functionality on the map.
            map.setOptions({ disableScrollWheelZoom: true });
    
            //Create a mouse wheel event handler.
            var onMouseWheelChanged = function (e) {
                var zoom = map.getZoom();
    
                //Depending on if the wheel delta is +/- zoom in/out. (Firefox uses detail instead of wheel delta).
                if (e.wheelDelta > 0 || e.detail < 0) {
                    zoom++;
                } else {
                    zoom--;
                }
    
                //Make sure the zoom level value is a valid zoom level.
                if (zoom <= 0) {
                    zoom = 1;
                } else if (zoom >= 21) {
                    zoom = 21;
                }
    
                //Set the zoom level of the map.
                map.setView({ zoom: zoom });
    
                //Disable scrolling of the page when the mouse wheel is over the map.
                e.preventDefault();
            };
    
            //Get the map div.
            var mapDiv = map.getRootElement();
    
            //Add a mouse wheel event to the map div.
            mapDiv.addEventListener("mousewheel", onMouseWheelChanged, false);
    
            //Use DOMMouseScroll to support FireFox
            mapDiv.addEventListener("DOMMouseScroll", onMouseWheelChanged, false);
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    
        <br/>
    
        <fieldset style="width:600px;">
            <legend>Mouse Wheel Zoom Overide Sample</legend>
            This sample shows how to override the mouse wheel behaviour so that it zooms into the center of the map rather than into the pointer location. Extra space added below so that we can verify page scrolling is disabled on the map when using mouse wheel.
        </fieldset>
        
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    • Proposed as answer by Ricky_Brundritt Tuesday, December 20, 2016 7:33 PM
    • Marked as answer by leokom Tuesday, December 20, 2016 8:46 PM
    • Edited by Ricky_Brundritt Wednesday, December 21, 2016 9:22 AM
    Tuesday, December 20, 2016 7:33 PM
  • The zoom levels vary from area, map control, and imagery type. Using a value of 21 for the max zoom value is recommended as that is largest value ever used by any of the Bing Maps controls and likely will be the limit of the V8 control once birdseye is added.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Thursday, January 5, 2017 8:09 PM
    • Marked as answer by leokom Thursday, January 5, 2017 9:14 PM
    Thursday, January 5, 2017 8:09 PM

All replies

  • There is no built in method for changing this behavior as many users prefer to have a consistent user experience across all map surfaces they encounter, regardless of the app or website hosting the map. That said, it is possible to override this functionality if you really want to. Here is a code sample:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <script type='text/javascript'
                src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
    
        <script type='text/javascript'>
        function GetMap() {
            var map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            overrideMouseWheelZoom(map);
        }
    
        function overrideMouseWheelZoom(map) {
            //Disable the default mouse wheel zoom functionality on the map.
            map.setOptions({ disableScrollWheelZoom: true });
    
            //Create a mouse wheel event handler.
            var onMouseWheelChanged = function (e) {
                var zoom = map.getZoom();
    
                //Depending on if the wheel delta is +/- zoom in/out. (Firefox uses detail instead of wheel delta).
                if (e.wheelDelta > 0 || e.detail < 0) {
                    zoom++;
                } else {
                    zoom--;
                }
    
                //Make sure the zoom level value is a valid zoom level.
                if (zoom <= 0) {
                    zoom = 1;
                } else if (zoom >= 21) {
                    zoom = 21;
                }
    
                //Set the zoom level of the map.
                map.setView({ zoom: zoom });
    
                //Disable scrolling of the page when the mouse wheel is over the map.
                e.preventDefault();
            };
    
            //Get the map div.
            var mapDiv = map.getRootElement();
    
            //Add a mouse wheel event to the map div.
            mapDiv.addEventListener("mousewheel", onMouseWheelChanged, false);
    
            //Use DOMMouseScroll to support FireFox
            mapDiv.addEventListener("DOMMouseScroll", onMouseWheelChanged, false);
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    
        <br/>
    
        <fieldset style="width:600px;">
            <legend>Mouse Wheel Zoom Overide Sample</legend>
            This sample shows how to override the mouse wheel behaviour so that it zooms into the center of the map rather than into the pointer location. Extra space added below so that we can verify page scrolling is disabled on the map when using mouse wheel.
        </fieldset>
        
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    • Proposed as answer by Ricky_Brundritt Tuesday, December 20, 2016 7:33 PM
    • Marked as answer by leokom Tuesday, December 20, 2016 8:46 PM
    • Edited by Ricky_Brundritt Wednesday, December 21, 2016 9:22 AM
    Tuesday, December 20, 2016 7:33 PM
  • Thank you very much for such a detailed example how to achieve the goal!
    Tuesday, December 20, 2016 8:45 PM
  • Hello Ricky.

    Just short questions, are these constants 1..21 for legal Zoom Levels documented/stable or subject to change?  

    Not found legal values here https://msdn.microsoft.com/en-us/library/mt712641.aspx

    (maybe there are some constants exposed in API smth like Microsoft.Maps....MIN_ZOOM_LEVEL/MAX_ZOOM_LEVEL)?

    Thanks

    Wednesday, January 4, 2017 11:20 AM
  • The zoom levels vary from area, map control, and imagery type. Using a value of 21 for the max zoom value is recommended as that is largest value ever used by any of the Bing Maps controls and likely will be the limit of the V8 control once birdseye is added.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Thursday, January 5, 2017 8:09 PM
    • Marked as answer by leokom Thursday, January 5, 2017 9:14 PM
    Thursday, January 5, 2017 8:09 PM
  • Thanks!
    Thursday, January 5, 2017 9:14 PM