none
In V7 Push PIns not placed consistently......................................... RRS feed

  • Question

  • In both IE and FIrefix we're noticing that depending on the zoom level you are at when the Push Pin is added the pin is put ina different place.

    Wer have a system where you pass in the parcel number to a DB and get back the latlon of the center of the property.   In our Bing 6.3 and our Bing 7.0 system it gets back the same latlon the DB is the same.

    The problem is that in BIng 6.3 the pin is always placed smack dab on the property and it doesn't move around when you zoom in and out.

    In Bing 7 however the property is placed in varying places as you zoom in and out and it moves around (it's lat lon changes) when you zoom in and out.

    Something is wrong with the way Bing V7 handles push pins.

     

     


    Steve Kahler
    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:07 PM (From:Bing Maps: Map Control and Web services Development)
    Thursday, March 31, 2011 7:34 PM

Answers

  • I've tried the code on a number of browsers and it looks fine. The pushpin is anchored on the point. When you zoom out it appears like the top of the pushpin is moving north but that's because the pin point is anchored to the map. I don't see anything wrong with this. Maybe I'm missing something but all my tests are show it to work fine. Note that the resolution of a single pixel changes as you zoom (e.g. one pixel at zoom level 19 = ~30cm wide, where as at zoom level 18 one pixel is appr0ximately 60cm wide, at zoom level 10 it's 152m wide). As such converting the pixel coordinate to a latitude/longitude coordinate will result in a different value from what your pushpin is set to as there is a greater error margin in the coordinate as you zoom out. Also note that at 6 decimal places a latitude/longitude is accurate to 11cm. Any decimal places after this are meaningless and a change in these values will have no effect on where something is displayed.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Wednesday, April 6, 2011 1:26 PM

All replies

  • Have you set the correct altitude on your pushpins? This wasn't an issue in v6.3 unless you were using birdseye or 3d mode, since the aerial view was purely 2d top-down.

    With the enhanced birdseye view in v7.0 which combines aerial and birdseye views, the altitude of a pushpin affects where it is positioned on the map. See http://alastaira.wordpress.com/2010/12/12/pushpin-altitude-and-the-birdseye-map-style-bing-maps-v7/ for examples.


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Thursday, March 31, 2011 7:59 PM
    Moderator
  • I set the altitude to 0 and the altitude reference to ground and I also tried ellipsoid it still exhibits the same behaviour.   I'm not sure where to go from here.

    Bing V7 seems to keep the push pin on the same place on the screen as you zoom in and out instead of adjusting it depending on your zoom level.   The lat lon of the pin change as you zoom in and out.


    Steve Kahler
    Thursday, March 31, 2011 8:27 PM
  • Can you paste a link to the map that demonstrates the problem? What is the code you're using to place the pushpins? And what is the code you're using to verify that they're changing lat/long as you zoom?
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Thursday, March 31, 2011 10:08 PM
    Moderator
  • The site is password protected so I can't give you a link into the site.

    But basically what I'm doing is catching the map right click evenet and using an alert() box to display to lat lon where the right click occurred.

    Then placing a pushpin on the map with and altitude of 0 and an altitude Reference of ground (I also tried ellipsoid).

    Next using the right click to point to the push pin and get the lat lon of the push pin.

    Lastly zoom out a couple of times using the zoom bar in Bing and then carefully clicking on the same spot of the push pin as I did above and right clicking to get the lat lon.

    The lat lons are different and are different enough to avoid the possibility of no clicking in the right spot both times.

    Also youcan see the push pin move around the map relative to the property lines map layer when you use the BIng Zoom tool to zoom in and out.

    If necesary I'll create s simple mock up to demonstrate the problem and upload the code here.

     

     

     

     


    Steve Kahler
    Friday, April 1, 2011 1:03 PM
  • It's pretty hard to tell from that description where the error is occurring - it could be in your mouse click handler, in the function to retrieve the coordinates, in the positioning of your pushpin icon... a conflict with CSS stylesheets or JS, or a genuine bug in the control

    Seeing as you're hosting on a private network, I suggest you raise a support request with the Bing Maps enterprise support team.


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Friday, April 1, 2011 1:33 PM
    Moderator
  • I'll create a small mockup and upload the web page.

     


    Steve Kahler
    Friday, April 1, 2011 1:36 PM
  • I've created a test app that illustrates the push pin problem.   All you do is load up BING.HTML in your browser and then  right click on the push pin (ignore the credentials error that appears).  Note the latitude that's displayed.   When you right click click on the very tip of the push pin where the hover tool tip just begins to be displayed.    Below when you do this a second time do tha same.

    Next use the the Bing tool to zoom out a couple of layers and then placing the mouse at exactly the same place on the push pin as you did above right click the mouse and note the latutitude ---- it's different.

    The code consists of 2 files BING.HTML and MAPPING.JS.

    BING.HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    
    <head id="Head1">
    
    
    
    <title>Bing Push Pin Test</title>
    
    
    
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mtk=en-us"></script>
    
    
    
    <script type="text/javascript" src="mapping.js"></script>
    
    
    
    </head>
    
    
    
    <body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
    
    
    
    <form id="form1">
    
    
    
     <div id="map" style="position:relative; width:1150px;height:500px; border:solid 1px black; margin-bottom:10px;"></div>
    
    
    
     <script type="text/javascript">
    
    
    
     var map=null;
    
    
    
     window.onload=appSetup;
    
    
    
     var mapkey="";
    
    
    
    
    
    
    
    
    
    
    
    function appSetup() {
    
    
    
    	map = new Microsoft.Maps.Map(document.getElementById("map"),
    
    
    
    			{
    
    
    
    				credentials: mapkey,
    
    
    
    				center: new Microsoft.Maps.Location(34.25562305416042,-80.8507595851587),
    
    
    
        mapTypeId: Microsoft.Maps.MapTypeId.road,
    
    
    
        zoom: 16,
    
    
    
        enableClickableLogo: false,
    
    
    
        enableSearchLogo: false,
    
    
    
        showCopyright: false
    
    
    
       });
    
    
    
      Microsoft.Maps.Events.addHandler(map, "rightclick", onRightClick_Event);
    
    
    
    	 var pin = CreatePushPin(map.getCenter(),"A","A Push Pin");
    
    
    
    }
    
    
    
    </script>
    
    
    
    </form>
    
    
    
    </body>
    
    
    
    </html>
    
    
    
    

    MAPPING.JS

    var mapkey = "AsVof6NVkT2fT3fMfHUfMgabG-D9GzvnFDaL9Itv56UJaSEj8ZxO1grDXV1zoy0c";
    
    
    
    // JScript File
    
    
    
    
    
    
    
     function getMouseLatLong(/* VE Map Event */ mapEvent)
    
    
    
     {
    
    
    
     // Convert the pixel to a set of coordinates.
    
    
    
     return map.tryPixelToLocation(new Microsoft.Maps.Point(mapEvent.getX(), mapEvent.getY()));
    
    
    
     }
    
    
    
     
    
    
    
    
    
    
    
     function onRightClick_Event(mapEvent) {
    
    
    
    
    
    
    
     if (map.getMapTypeId() == Microsoft.Maps.MapTypeId.birdseye)
    
    
    
      return; 
    
    
    
      
    
    
    
     rightClickLatLong = getMouseLatLong(mapEvent);
    
    
    
    	showCoords();
    
    
    
      
    
    
    
     }
    
    
    
    
    
    
    
     function showCoords() {
    
    
    
     alert("current mouse coordinates are \nLatitude: " + rightClickLatLong.latitude + "\n" + "Longitude: " + rightClickLatLong.longitude + "\n" + "Zoom Level: " + map.getZoom());
    
    
    
    
    
    
    
     }
    
    
    
    
    
    
    
    
    
    
    
     function CreatePushPin(location, title, description, icon, addshape, width, height) {
    
    
    
     if (width == undefined || width == 0)
    
    
    
      width = 256;
    
    
    
     if (height == undefined || height == 0)
    
    
    
      height = 160;
    
    
    
     if (icon == undefined)
    
    
    
      icon = "";
    
    
    
     if (addshape == undefined)
    
    
    
      addshape = true;
    
    
    
     location.altitude = 0;
    
    
    
     location.altitudeReference = Microsoft.Maps.AltitudeReference.ground;
    
    
    
     if (icon == "" || (title == "" && description == "")) {
    
    
    
      var pin = new Microsoft.Maps.Pushpin(
    
    
    
      location,
    
    
    
      {
    
    
    
      text: ""
    
    
    
      });
    
    
    
     }
    
    
    
     else {
    
    
    
      var pin = new Microsoft.Maps.Pushpin(
    
    
    
      location,
    
    
    
      {
    
    
    
      text: "",
    
    
    
      icon: icon
    
    
    
      });
    
    
    
     }
    
    
    
     // Create an info box
    
    
    
     var infoboxOptions;
    
    
    
     if (icon != "" && title == "" && description == "") {
    
    
    
      infoboxOptions = {
    
    
    
      htmlContent: icon,
    
    
    
      visible: false,
    
    
    
      showCloseButton: false
    
    
    
      };
    
    
    
     }
    
    
    
     else {
    
    
    
      infoboxOptions = {
    
    
    
      htmlContent: "<div style='width:" + width + "px;height:" + height + "px;background-color: white;border: solid 1px gray;'><b>" + title + "</b><br><br>" + description + "</div>",
    
    
    
      visible: false,
    
    
    
      showCloseButton: false
    
    
    
      };
    
    
    
     }
    
    
    
     var myInfobox = new Microsoft.Maps.Infobox(location, infoboxOptions);
    
    
    
    
    
    
    
     var ppRec = new pushPinRec();
    
    
    
     ppRec.pin = pin;
    
    
    
     ppRec.mouseoverHandler = Microsoft.Maps.Events.addHandler(pin, 'mouseover', function(e) { myInfobox.setOptions({ visible: true }); });
    
    
    
     ppRec.mouseoutHandler = Microsoft.Maps.Events.addHandler(pin, 'mouseout', function(e) { myInfobox.setOptions({ visible: false }); });
    
    
    
     ppRec.infoBox = myInfobox;
    
    
    
    
    
    
    
     // Add the info box to the map
    
    
    
     if (addshape)
    
    
    
      map.entities.push(myInfobox);
    
    
    
    
    
    
    
     // Add this pushpin to the map
    
    
    
     if (addshape)
    
    
    
      map.entities.push(pin);
    
    
    
    
    
    
    
     return ppRec;
    
    
    
     }
    
    
    
    
    
    
    
    
    
    
    
     function pushPinRec() {
    
    
    
     this.pin = null;
    
    
    
     this.mouseoverHandler = null;
    
    
    
     this.mouseoutHandler = null;
    
    
    
     this.infoBox = null;
    
    
    
     }
    
    
    
    
    
    
    
    

    Steve Kahler

    Friday, April 1, 2011 2:56 PM
  • try adding the required meta tag to the head of your page:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Wednesday, April 6, 2011 9:40 AM
  • I added the meta tag and it didn't change anything.   The latitude of the push pin keeps changing as I zoom in and out.

    Here is my new code with the meta tag added:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bing Push Pin Test</title>
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mtk=en-us"></script>
    </head>
    <body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
    <form id="form1">
      <div id="map" style="position:relative; width:1150px;height:500px; border:solid 1px black; margin-bottom:10px;"></div>
      <script type="text/javascript">
      var map=null;
      window.onload=appSetup;
      var mapkey="";
    
    
    function appSetup() {
    	map = new Microsoft.Maps.Map(document.getElementById("map"),
    			{
    				credentials: mapkey,
    				center: new Microsoft.Maps.Location(34.25562305416042,-80.8507595851587),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 16,
                    enableClickableLogo: false,
                    enableSearchLogo: false,
                    showCopyright: false
                });
         Microsoft.Maps.Events.addHandler(map, "rightclick", onRightClick_Event);
    	 var pin = CreatePushPin(map.getCenter(),"A","A Push Pin");
    }
    
    var mapkey = "AsVof6NVkT2fT3fMfHUfMgabG-D9GzvnFDaL9Itv56UJaSEj8ZxO1grDXV1zoy0c";
    // JScript File
    
      function getMouseLatLong(/* VE Map Event */ mapEvent)
      {
        // Convert the pixel to a set of coordinates.
        return map.tryPixelToLocation(new Microsoft.Maps.Point(mapEvent.getX(), mapEvent.getY()));
      }
        
    
      function onRightClick_Event(mapEvent) {
    
        if (map.getMapTypeId() == Microsoft.Maps.MapTypeId.birdseye)
          return;  
          
        rightClickLatLong = getMouseLatLong(mapEvent);
    	showCoords();
          
      }
    
      function showCoords() {
        alert("current mouse coordinates are \nLatitude: " + rightClickLatLong.latitude + "\n" + "Longitude: " + rightClickLatLong.longitude + "\n" + "Zoom Level: " + map.getZoom());
    
      }
    
    
      function CreatePushPin(location, title, description, icon, addshape, width, height) {
        if (width == undefined || width == 0)
          width = 256;
        if (height == undefined || height == 0)
          height = 160;
        if (icon == undefined)
          icon = "";
        if (addshape == undefined)
          addshape = true;
        location.altitude = 0;
        location.altitudeReference = Microsoft.Maps.AltitudeReference.ground;
        if (icon == "" || (title == "" && description == "")) {
          var pin = new Microsoft.Maps.Pushpin(
            location,
          {
            text: ""
          });
        }
        else {
          var pin = new Microsoft.Maps.Pushpin(
            location,
          {
            text: "",
            icon: icon
          });
        }
        // Create an info box
        var infoboxOptions;
        if (icon != "" && title == "" && description == "") {
          infoboxOptions = {
            htmlContent: icon,
            visible: false,
            showCloseButton: false
          };
        }
        else {
          infoboxOptions = {
            htmlContent: "<div style='width:" + width + "px;height:" + height + "px;background-color: white;border: solid 1px gray;'><b>" + title + "</b><br><br>" + description + "</div>",
            visible: false,
            showCloseButton: false
          };
        }
        var myInfobox = new Microsoft.Maps.Infobox(location, infoboxOptions);
    
        var ppRec = new pushPinRec();
        ppRec.pin = pin;
        ppRec.mouseoverHandler = Microsoft.Maps.Events.addHandler(pin, 'mouseover', function(e) { myInfobox.setOptions({ visible: true }); });
        ppRec.mouseoutHandler = Microsoft.Maps.Events.addHandler(pin, 'mouseout', function(e) { myInfobox.setOptions({ visible: false }); });
        ppRec.infoBox = myInfobox;
    
        // Add the info box to the map
        if (addshape)
          map.entities.push(myInfobox);
    
        // Add this pushpin to the map
        if (addshape)
          map.entities.push(pin);
    
        return ppRec;
      }
    
    
      function pushPinRec() {
        this.pin = null;
        this.mouseoverHandler = null;
        this.mouseoutHandler = null;
        this.infoBox = null;
      }
    
    
    </script>
    </form>
    </body>
    </html>

     


    Steve Kahler

    Wednesday, April 6, 2011 12:56 PM
  • Have you tried removing the CSS styling from the div in which the map is created?

    Leave the position and the height/width - it's the margin-bottom:10px I'm wondering about...


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Wednesday, April 6, 2011 1:12 PM
    Moderator
  • I removed the borderand the margin-bottom and it still changes the latitude of the pin when zooming in and out.

    Have you copied and pasted my code to your computer and tried it ?

     


    Steve Kahler
    Wednesday, April 6, 2011 1:16 PM
  • I've tried the code on a number of browsers and it looks fine. The pushpin is anchored on the point. When you zoom out it appears like the top of the pushpin is moving north but that's because the pin point is anchored to the map. I don't see anything wrong with this. Maybe I'm missing something but all my tests are show it to work fine. Note that the resolution of a single pixel changes as you zoom (e.g. one pixel at zoom level 19 = ~30cm wide, where as at zoom level 18 one pixel is appr0ximately 60cm wide, at zoom level 10 it's 152m wide). As such converting the pixel coordinate to a latitude/longitude coordinate will result in a different value from what your pushpin is set to as there is a greater error margin in the coordinate as you zoom out. Also note that at 6 decimal places a latitude/longitude is accurate to 11cm. Any decimal places after this are meaningless and a change in these values will have no effect on where something is displayed.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Wednesday, April 6, 2011 1:26 PM
  • Here's what I get:

    Latitude: 34.26121403534282
    Longitude: -80.84408624912965
    Zoom Level: 11

    Latitude: 34.25838979622273
    Longitude: -80.84205849911439
    Zoom Level: 18

    To be honest, I'm pretty surprised I managed to get my clicks that accurate considering I've got fat fingers on a touchpad, and my screen resolution is 1600 x 1200 - the chances of me hitting the same location twice are virtually nil anyway. And no - I don't get any pins wildly zooming round the screen when I zoom in / out - it stays pretty much stationary in IE9, FF4, or Chrome. Win7 64bit.


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Wednesday, April 6, 2011 1:49 PM
    Moderator
  • One of the guys I work with suggested I change the anchor point of the Push Pin to the center of the pin instead of the default which is the bottom center.

    That worked, now I can zoom in and out and the pin remains in place.

     


    Steve Kahler
    Wednesday, April 6, 2011 3:12 PM