Bing Map image generator not working as expected

Question

I have a requirement to Use Bing map with image download functionality with my web application. I've a requirement to draw on bing map and user may able to download the same. It's working fine If I'm drawing something on map, but I can't get expected result while trying to zoom areas. After zoom and draw on bing map, downloaded image doesn't show streets. It only shows drawn part that's it.

Here is what I expect and what is output:

Expected:

Output:

here is full example links I've reffered,

• https://github.com/microsoft/BingMapsV8CodeSamples/tree/master/Samples/Experimental/MapImageGenerator

• https://bingmapsv8samples.azurewebsites.net/

Below is my sample code I'm trying to generate image:

var map, imageGenerator;

function getMapForReport() {

    map = new Microsoft.Maps.Map(document.getElementById('myReportMap'), {
        credentials: '@System.Configuration.ConfigurationManager.AppSettings["BingMapCredentials"].ToString()',
        center: new Microsoft.Maps.Location(38.881397, -94.819130),
        zoom: 4,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        showMapTypeSelector: false,
        showLocateMeButton: false,
        showZoomButtons: false,
        showCopyright: false,
        showScalebar: false,
        disableScrollWheelZoom: true,
        disableZooming: true,
        enableCORS: true
    });

    document.getElementById('zoomIn').onclick = function () {

        var z = map.getZoom() + 1;
        map.setView({ zoom: z });
        zoomLevel = z;
    }

    document.getElementById('zoomOut').onclick = function () {
        var z = map.getZoom() - 1;
        map.setView({ zoom: z });
        zoomLevel = z;
    }

    Microsoft.Maps.registerModule('MapImageGeneratorModule', '/Scripts/MapImageGeneratorModule.js');
}

function generateImage(){

       Microsoft.Maps.loadModule('MapImageGeneratorModule', function () {
            imageGenerator = new MapImageGenerator(map);
       });

            imageGenerator.getImage(function (mapImg) {

                setTimeout(function () {

                    var img = mapImg.src;

                    $.post('@Url.Action("HailSwathPayment", "Payment")', { stripeToken: "", stripeEmail: "", reportId: reportId, amount: amount, mapImg: img }, function (data) {

                        var url = '@Url.Action("Index", "PurchaseList")';

                        window.location.href = url;

                    });

                }, 0);

                }, function (e) {
                      alert(e);
            });
}

I'm calling generateImage function on button click event, and saving downloaded image (base64) to DB.

var img = mapImg.src; not fetching expected output, I've checked by converting base64 to image. I've tried everything and did research on issue but no luck!

Any help would be appreciated, thanks!

Answer 1

One possible issue is that you are loading the map image generation module and creating an instance of the class in the callback, but all the code that uses the instance of that class is outside of the callback. Try moving the imageGenerator.getImage( into the callback function and see if that helps.

Update: Make the generateImage function look like this:

function generateImage(){

       Microsoft.Maps.loadModule('MapImageGeneratorModule', function () {
            imageGenerator = new MapImageGenerator(map);

imageGenerator.getImage(function (mapImg) {

                setTimeout(function () {

                    var img = mapImg.src;

                    $.post('@Url.Action("HailSwathPayment", "Payment")', { stripeToken: "", stripeEmail: "", reportId: reportId, amount: amount, mapImg: img }, function (data) {

                        var url = '@Url.Action("Index", "PurchaseList")';

                        window.location.href = url;

                    });

                }, 0);

                }, function (e) {
                      alert(e);
            });
       });
}