locked
White lines across map? using AJAX control, v7 RRS feed

  • Question

  • I set up a very simple map, using the basic starter code on MSDN. The problem is that from the very start I have seen white lines across the map. The lines run east-west across the entire map, and are always about 10 pixels high. They appear on all zoom levels. It almost seems like tiles have space between them. The lines appear on all map types, and the initial extent don't seem to matter.

    Has anyone seen these lines? Are they artifacts of the developer key I am using?

    <div id='mapDiv' style="position:absolute; width:600px; height:600px;"></div>
    
    var mapOptions = {
          credentials: "removed",
          mapTypeId: Microsoft.Maps.MapTypeId.road,
          enableClickableLogo: false,
          showCopyright: false,
          showLogo: false
        };
    
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
    

    Any help is very welcome!

    Thanks,
    Erick 

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 10:49 AM (From:Bing Maps: Map Control and Web services Development)
    Thursday, February 3, 2011 3:56 AM

Answers

  • Are you using the HTML5 doctype <!DOCTYPE html> and viewing the page in IE by any chance ?

    If so, that's where the white lines comes from. To solve this, use this doctype instead:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


    Active Bing Maps programming community at StackOverflow:

    http://stackoverflow.com/questions/tagged/bing-maps

    • Proposed as answer by wildpeaks Friday, February 4, 2011 12:20 PM
    • Marked as answer by erick.thompson Saturday, February 12, 2011 12:21 AM
    Friday, February 4, 2011 12:18 PM

All replies

  • Hi Erick,

    This is nothing to do with your developer key.

    It's either to do with a line in your code (or, perhaps a missing line in your code - i.e. a DOCTYPE or CHARSET declaration).

    Or, it's to do with the browser you're using.

    To help us diagnose, please either paste the full code you're using (or, if you copied it exactly from a MSDN example, please link to the example you copied), and tell us what browser/OS you're using.


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Thursday, February 3, 2011 8:03 AM
  • Are you using the HTML5 doctype <!DOCTYPE html> and viewing the page in IE by any chance ?

    If so, that's where the white lines comes from. To solve this, use this doctype instead:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


    Active Bing Maps programming community at StackOverflow:

    http://stackoverflow.com/questions/tagged/bing-maps

    • Proposed as answer by wildpeaks Friday, February 4, 2011 12:20 PM
    • Marked as answer by erick.thompson Saturday, February 12, 2011 12:21 AM
    Friday, February 4, 2011 12:18 PM
  • I am having the exact same problem....  here is the content from my Site.Master file....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>


    No matter what I try those 10 pixel bars will not go away....

    B
    • Edited by Brett D Whittaker Monday, February 7, 2011 2:31 AM bad cut and paste re HTML
    Monday, February 7, 2011 2:29 AM
  • Even i am facing the same problem.

    When i try this on normal page it works fine.

    But in a Sharepoint page it starts showing white lines.

    Any help ? (Is this a problem with doctype or this is a problem in pages with Master Page )

     

    Thanks,

    Jitendra


    Jitendra
    Wednesday, February 9, 2011 1:55 PM
  • Excellent! Thanks for this pointer; I highly doubt I would have stumbled across this.

    For any reading, if you move from strict XHTML to Transitional, it will fix the issue. Why this is, I don't know.

    Thanks,
    Erick

    • Proposed as answer by JitendraGupta Sunday, February 13, 2011 1:27 PM
    Saturday, February 12, 2011 12:21 AM
  • If we use ‘strict’ Doc type instead of ‘Transitional’ then it produces white lines in the map in internet explorer.  (Bing Map Ajax API V7.0)

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     

    If we  replace ‘strict’ attribute with ‘transitional’ then white lines will be removed in internet explorer.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

     

    Main problem lies in <br> tag’s rendering behavior, which creates some space in Strict Doc Type.

    Please Refer: http://stackoverflow.com/questions/1449660/br-html-tag-not-cross-browser-compatible

     

    Basically the following code produces small white space (line) between two images in ‘Strict’ Doc type in IE:

     

    <img src=……../>

    <br />

    <img src=……./>

     

    And this is the rendering behavior of bing map in the page where map is formed of many images and <br /> tag produces white space between lines of image.

     

     So I think this is the bug related to bing or IE .

     

     

    Thanks,

    Jitendra


     


    Jitendra
     
    • Proposed as answer by JitendraGupta Sunday, February 13, 2011 1:26 PM
    Sunday, February 13, 2011 1:26 PM
  • work around until it get fixed by bing:

    add following css: 

    .MicrosoftMap { line-height: 1px; }


    Jitendra
    Wednesday, February 16, 2011 6:04 AM
  • Hi Brett -

    Were you able to figure out what the issue was?  I've tried both and have not had any luck.  We're using a master page as well.  Please let me know.

    Thanks.

    Moua

    Friday, September 9, 2011 8:08 PM