none
how to pan? RRS feed

  • Question

  • I'm using version 7 and I can't figure out how to pan the map.  I'm trying to use the setView function and specifying centerOffset but nothing is happening.  No errors and no changes occur to the map.  Here is the code I am using:

            var viewOptions = new Object(); // = this._bingmap.getOptions();

            viewOptions.centerOffset = new window.Microsoft.Maps.Point(-200, 0);

            mybingmap.setView(viewOptions);

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 11:10 AM (From:Bing Maps: Map Control and Web services Development)
    Monday, March 21, 2011 9:26 PM

Answers

  • Just a bit of cleaning up of your code:

    Microsoft.Maps.Map.prototype.pan = function (x, y) {
    	var pos = this.tryPixelToLocation(new Microsoft.Maps.Point(this.getWidth()/2 + x, this.getHeight()/2 - y), Microsoft.Maps.PixelReference.control);
    	this.setView({ center: pos });
    };
    


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, March 24, 2011 10:16 AM
  • I had to tanoshimi's approach since centerOffset seems to have no effect whatsoever.

    Here is the final code:

     

    Microsoft.Maps.Map.prototype.pan = function (x, y) {
      var mapCenter = this.getCenter();
    
      var pos = this.tryPixelToLocation(new Microsoft.Maps.Point(this.getWidth()/2 + x, this.getHeight()/2 - y), Microsoft.Maps.PixelReference.control);
    
      mapCenter.latitude += pos.latitude - mapCenter.latitude;
      mapCenter.longitude += pos.longitude - mapCenter.longitude;
    
      this.setView({ center: mapCenter });
    };

     


    Tuesday, March 22, 2011 5:39 PM

All replies

  • Try this:

    function Pan(dlat, dlong) {
     var mapCenter = map.getCenter();
     mapCenter.latitude += dlat;
     mapCenter.longitude += dlong
     map.setView({ center: mapCenter });
    }
    

    Pan the map up by calling Pan(0.1,0);  Pan left a small amount by calling Pan(0,-0.05); etc. etc.
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Monday, March 21, 2011 10:34 PM
    Moderator
  • The following works for me when I pan in V7: map.setView({ centerOffset : new Microsoft.Maps.Point(dx, dy)});

    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Tuesday, March 22, 2011 8:05 AM
  • I'm obviously being a muppet, but that doesn't do squat for me, Ricky! The point provided to centerOffset is meant to be a  pixel offset from the current map center, right? So, I'd expect map.setView({ centerOffset: new Microsoft.Maps.Point(10, 0) }); to pan the map 10 pixels to the right? Not for me, it doesn't... nothing. nada. zilch. zip. computer says no. etc.

    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, March 22, 2011 9:56 AM
    Moderator
  • I think you need to programmatically set the width and height for it to work. This was a bug I brought up at the MVP summit.

    Update: Trying a test app now and it doesn't seem to work. Weird thing is I use this in the Android SDK to get the touch events to pan the map. That is still working. Will have to see what I did to get that to work.


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Tuesday, March 22, 2011 4:36 PM
  • I had to tanoshimi's approach since centerOffset seems to have no effect whatsoever.

    Here is the final code:

     

    Microsoft.Maps.Map.prototype.pan = function (x, y) {
      var mapCenter = this.getCenter();
    
      var pos = this.tryPixelToLocation(new Microsoft.Maps.Point(this.getWidth()/2 + x, this.getHeight()/2 - y), Microsoft.Maps.PixelReference.control);
    
      mapCenter.latitude += pos.latitude - mapCenter.latitude;
      mapCenter.longitude += pos.longitude - mapCenter.longitude;
    
      this.setView({ center: mapCenter });
    };

     


    Tuesday, March 22, 2011 5:39 PM
  • Just a bit of cleaning up of your code:

    Microsoft.Maps.Map.prototype.pan = function (x, y) {
    	var pos = this.tryPixelToLocation(new Microsoft.Maps.Point(this.getWidth()/2 + x, this.getHeight()/2 - y), Microsoft.Maps.PixelReference.control);
    	this.setView({ center: pos });
    };
    


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, March 24, 2011 10:16 AM
  • Yes, that's certainly a neater solution if what you want is pixel pans. I've still had no luck with centerOffset though... :(
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Thursday, March 24, 2011 11:36 AM
    Moderator
  • 6 months on and I've just encountered this again - centerOffset seems to have no effect when passed in a ViewOptions object to try to pan the map. Can anyone else confirm whether this works for them?
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Monday, September 26, 2011 9:55 AM
    Moderator