locked
How to print Map using Bing Map V8 API RRS feed

  • Question

  • Hi,

    I want to implement Print feature in map using BING Map V8 control, can you please assist me any best practice available.

    Thank you  in Advance,

    Gowind



    • Edited by Gowind_ Monday, July 18, 2016 2:39 PM typo
    Monday, July 18, 2016 1:42 PM

Answers

  • Wow, that is pretty messy. That approach won't work as V8 uses the HTML5 canvas for rendering and the state of the canvas isn't a part of the HTML DOM. There are a few options;

    • You could create a separate page that only has the map and have it load your data accordingly. This would require loading the map and a decent amount of development.
    • Use CSS print stylesheets to hide everything around the map on your page and simply print from there.

    If you wait a month or two we plan to add a feature in V8 which will allow you to generate an image of the map. This would be much easier to print on it's own or include in documents and reports.


    [Blog] [twitter] [LinkedIn]

    Tuesday, July 19, 2016 5:25 PM
  • This feature has been made low priority and delayed indefinitely as there are too many hurdles to get it to work correctly. The two main ones are; getting it to work in all browsers is not straight forward and likely won't work in all browsers. The other is all images must be hosted on the same domain or have CORs enabled. This alone would be an issue for a number of developers I have talked to.

    [Blog] [twitter] [LinkedIn]

    Thursday, April 6, 2017 11:26 PM
  • V7 tiles = V8 tiles. They come from the same tile server. The only difference is that V8 loads using vector labels by default. If you load V8 in liteMode, it loads the tiles with the labels rendered on them the same as V7. At the end of the day the tiles are the same.

    That said, I have put together a code sample that shows how to generate an image from the map. It has the limitations I mentioned before, but depending on the type of data you are working with, it may good enough. You can try it out here: http://bingmapsv8samples.azurewebsites.net/#Map%20Image%20Generator The source code can be found here: https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Experimental/MapImageGenerator


    [Blog] [twitter] [LinkedIn]

    Sunday, April 9, 2017 7:18 PM

All replies

  • If using the experimental branch simply print page. The map should print fine as part of the page.

    [Blog] [twitter] [LinkedIn]

    Monday, July 18, 2016 2:54 PM
  • we are having requirement like, to print Map alone from the page along with push pins, In Bing Map V7, we are having below code.

      var disp_setting = "toolbar=no,location=no,";
                            disp_setting += "directories=yes,menubar=no,";
                            disp_setting += "scrollbars=yes,width=750, height=600";

    //appending map div Id

                            var content_vlue = document.getElementById('mapDivId').innerHTML;
                            var docprint = window.open("", "", disp_setting);
                            docprint.document.open();
                            docprint.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"');
                            docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
                            //docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');  
                            docprint.document.write('<link href="css/style.css" rel="stylesheet" type="text/css" />');

                            docprint.document.write('<style type="text/css">body{ margin:0px;');
                            docprint.document.write('font-family:verdana,Arial;color:#000;');
                            docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
                            docprint.document.write('a{color:#000;text-decoration:none;} </style>');
                            
                            docprint.document.write('</head><body onload="window.print();"><center>');
                            docprint.document.write(content_vlue);
                            docprint.document.write('</center></body></html>');
                            docprint.document.close();
                            docprint.focus();

    It is working fine with Bing V7 api, but with Bing Map V8 it is not working.

    Tuesday, July 19, 2016 6:59 AM
  • Wow, that is pretty messy. That approach won't work as V8 uses the HTML5 canvas for rendering and the state of the canvas isn't a part of the HTML DOM. There are a few options;

    • You could create a separate page that only has the map and have it load your data accordingly. This would require loading the map and a decent amount of development.
    • Use CSS print stylesheets to hide everything around the map on your page and simply print from there.

    If you wait a month or two we plan to add a feature in V8 which will allow you to generate an image of the map. This would be much easier to print on it's own or include in documents and reports.


    [Blog] [twitter] [LinkedIn]

    Tuesday, July 19, 2016 5:25 PM
  • Hello, 

    Has this been implemented yet? I'm looking to implement some of the newer features in V8 for printing and am finding little to no information on it. 

    Thanks!

    Thursday, April 6, 2017 8:56 PM
  • This feature has been made low priority and delayed indefinitely as there are too many hurdles to get it to work correctly. The two main ones are; getting it to work in all browsers is not straight forward and likely won't work in all browsers. The other is all images must be hosted on the same domain or have CORs enabled. This alone would be an issue for a number of developers I have talked to.

    [Blog] [twitter] [LinkedIn]

    Thursday, April 6, 2017 11:26 PM
  • So will we still be able to hit the bing 7 tiles so we can stitch together and print?  Printing is a pretty important feature.
    Saturday, April 8, 2017 8:44 PM
  • V7 tiles = V8 tiles. They come from the same tile server. The only difference is that V8 loads using vector labels by default. If you load V8 in liteMode, it loads the tiles with the labels rendered on them the same as V7. At the end of the day the tiles are the same.

    That said, I have put together a code sample that shows how to generate an image from the map. It has the limitations I mentioned before, but depending on the type of data you are working with, it may good enough. You can try it out here: http://bingmapsv8samples.azurewebsites.net/#Map%20Image%20Generator The source code can be found here: https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Experimental/MapImageGenerator


    [Blog] [twitter] [LinkedIn]

    Sunday, April 9, 2017 7:18 PM
  • I want to export bing map to pdf .

    with bing map 7 i were able to get image in pdf just use of parent div of map and then .html with this simple jquery

    but with bing map 8 its not working it showing blank image in pdf

    please suggest me. and give me the sample in jquery

    Sunday, June 25, 2017 1:18 PM

  • Hi Ricky,  

    I have been facing the same issue and which is critical for us given the project I am working on is going live. I would like to share the below details about the issues and wanted to see if there is a solution already exist or is there any alternate option which we can utilize. Appreciate your quick turnaround on this. 

    We were using Bing V7 API and that moment we were able to take the image snapshot for the map using the below code.

    html2canvas($('#mapDiv'),

            {
             useCORS: true,
             logging: true,
              onrendered: function (canvas) {
                    img = document.createElement('a');
                    img = canvas.toDataURL("image/jpeg");
                    console.log(img)
                    window.open(img);
              }
            });

    But now, after migrateing to V8 API this piece of code is not working.

    As per your last comment July 19th, 2016, the solution for this issues was expected within a couple of months. Let me know if there is some solution to it. 

    Thanks for looking into it and helping us in advance. 

     


    Thursday, January 4, 2018 9:40 AM
  • Thursday, January 4, 2018 7:14 PM