none
Some strange blur blocks on Bing Map RRS feed

  • Question

  • Hi,

    I'm new on Bing Map.
    And I found there are some strange blur blocks on the map in the following 2 cases sometimes. But if I drag the map, or change the zoom level, those blur blocks may disappear.
    1) After geocoding a location and displaying the result on the map. 
    2) Use mouse to zoom in or zoom out quickly, those blocks may appear. 

    Could anyone help me here?
    Thanks in advance.

    BR
    Celine
    Monday, June 30, 2014 7:27 AM

Answers

  • I suspect what you are seeing is the map tiles loading. These should smooth out and become an updated map image as the tiles load.

    A bit of info on how online maps work. A map at zoom level 1 is 512 pixels by 512 pixels in size, however for every zoom level the dimensions of the map double. At zoom level 19 the size of the map is 134,217,728 pixels x 134,217,728 pixels. Needless to say a single image of these dimensions would be massive and would likely not load in a browser (at least not for a few hours). To make this more manageable maps are broken up into 256 pixel x 256 pixel images known as tiles. These tiles are stitched together  to fill the view of where you are looking withut having the load the rest of the world.

    If you are interested in learning more about the tile system you can find a detailed article here: http://msdn.microsoft.com/en-us/library/bb259689.aspx


    http://rbrundritt.wordpress.com

    Monday, June 30, 2014 9:46 AM
  • Correct. It's likely either a slow connection (or disconnection) which is causing tiles to load slower and other tiles to be scaled to fill the space (thus the blurring) until the required tile is downloaded.

    http://rbrundritt.wordpress.com

    Wednesday, July 2, 2014 9:29 AM
  • This looks like a very different problem. This looks like you haven't specified all the correct information and thus the map is overflowing (assuming since the navigation bar is in the wrong spot). Ensure you have done the following:

    1. Use the correct metadata tag:
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    2. Set the following CSS properties on the map; position, width and height.

    If you still see this issue provide some sample code that reproduces it.


    http://rbrundritt.wordpress.com

    Thursday, July 3, 2014 10:02 AM

All replies

  • I failed to submit an example image, and was prompt that I could not submit any image or link until my account can be verified.

    So how can I submit an image? I think an image may make this question easier to be understood.

    Monday, June 30, 2014 7:32 AM
  • I suspect what you are seeing is the map tiles loading. These should smooth out and become an updated map image as the tiles load.

    A bit of info on how online maps work. A map at zoom level 1 is 512 pixels by 512 pixels in size, however for every zoom level the dimensions of the map double. At zoom level 19 the size of the map is 134,217,728 pixels x 134,217,728 pixels. Needless to say a single image of these dimensions would be massive and would likely not load in a browser (at least not for a few hours). To make this more manageable maps are broken up into 256 pixel x 256 pixel images known as tiles. These tiles are stitched together  to fill the view of where you are looking withut having the load the rest of the world.

    If you are interested in learning more about the tile system you can find a detailed article here: http://msdn.microsoft.com/en-us/library/bb259689.aspx


    http://rbrundritt.wordpress.com

    Monday, June 30, 2014 9:46 AM
  • So if some images of the tiles are still loading or not loaded properly, then there will appear the blur blocks I saw. And it should related to the network.

    Am I correct?

    Wednesday, July 2, 2014 2:06 AM
  • Correct. It's likely either a slow connection (or disconnection) which is causing tiles to load slower and other tiles to be scaled to fill the space (thus the blurring) until the required tile is downloaded.

    http://rbrundritt.wordpress.com

    Wednesday, July 2, 2014 9:29 AM
  • Thanks for explaining the tile loading and how the map view shows up.

    In normal cases, if the network is not very good, there will be blur tiles at the beginning, and it will disappear after the right one loaded. However, in some cases, there are only several tiles not loaded successfully and there are some blur block on left or/and the right side of the map view, and it won't disappear.

    I am sure the network is ok when we test, or not too bad at least, but the blur blocks are still there, which makes our customers consider it is a bug of our application.


    Thursday, July 3, 2014 1:52 AM
  • I have the same problem, screenshot is attached.


    Dessasic

    Thursday, July 3, 2014 1:56 AM
  • This looks like a very different problem. This looks like you haven't specified all the correct information and thus the map is overflowing (assuming since the navigation bar is in the wrong spot). Ensure you have done the following:

    1. Use the correct metadata tag:
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    2. Set the following CSS properties on the map; position, width and height.

    If you still see this issue provide some sample code that reproduces it.


    http://rbrundritt.wordpress.com

    Thursday, July 3, 2014 10:02 AM
  • Same thing happens with my project. Doesn't occur all the time, but is very annoying, forces the user to move the map, or change zoom level. Sometimes don't load tiles in the middle of the map, other times tiles in the sides.

    Bernardo Salazar

    Thursday, July 3, 2014 8:53 PM
  • I have used the metadata tag, set the position, width and height for the map.

    The width of my map is 822 px. Normally, each row will have 4 tiles(256*4=1024 px), map can display correctly.

    In fact, I met both issues, they happen sometimes:

    1) Blur block in the middle of the map

        Inspecting the elements on chrome, each row has 4 tiles, but the <img> element on the blur area misses the src attribute.

        Refresh, drag map and change zoom will help.

    2) Blur blocks on the left and right side, just like the image Huanze uploaded    

        When it happens, each row just have 3 tiles(256*3=768 px), so the total width of the tiles is less than the map width.

       Drag map and change zoom will help. But It seems refresh no help for the same latitude and logitude.

    Here is part of my code:

    the position of .map is relative, I am unable to paste it below, as every time it is removed after submit,

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

    <style type="text/css">
    .map{ width:822px; height:550px; }
    </style>
    var mapOptions = {
        credentials: apiKey,
        center: new Microsoft.Maps.Location(defaultMapCoordinates.lat, defaultMapCoordinates.lon),
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        zoom: 13,
        showScalebar: false,
        enableClickableLogo: false,
        enableSearchLogo: false,
        showCopyright:false
    };       
    map = new Microsoft.Maps.Map($(".map")[0], mapOptions);
    function geocode() {
        var lat = $(".lat").val();
        var lon = $(".lon").val();
        
        // Valid session Id. Use it to call REST service
        map.getCredentials(function(credentials){
            if (credentials == null) {
                alert("get null credentials, the session id is not valid");
            } else {
                var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/"+lat+","+lon+"?output=json&jsonp=geocodeCallback&key="+credentials;
                CallRestService(geocodeRequest);
            }
        });
    }
        
    function CallRestService(request) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src",request);
        document.body.appendChild(script);
    }
        
    function geocodeCallback(resp) {
        if (resp &&
        resp.resourceSets &&
        resp.resourceSets.length > 0 &&
        resp.resourceSets[0].resources &&
        resp.resourceSets[0].resources.length > 0) {
        
        var resource = resp.resourceSets[0].resources[0];
        var bbox = resource.bbox;
        var viewBoundaries = new Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0],bbox[1]),
        new Microsoft.Maps.Location(bbox[2], bbox[3]));
        map.setView({ bounds:viewBoundaries });
        }
        
    }







    Friday, July 4, 2014 2:54 AM