title: Bing Map image generator not working as expected
body: <p>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.</p>
  
  <p>Here is what I expect and what is output:</p>
  
  <p><strong>Expected:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/ZyVRf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZyVRf.png" alt="enter image description here"></a></p>
  
  <p><strong>Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/oW4vh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oW4vh.png" alt="enter image description here"></a></p>
  
  <p>here is full example links I've reffered,</p>
  
  <ul>
  <li><p><a href="https://github.com/microsoft/BingMapsV8CodeSamples/tree/master/Samples/Experimental/MapImageGenerator" rel="nofollow noreferrer">https://github.com/microsoft/BingMapsV8CodeSamples/tree/master/Samples/Experimental/MapImageGenerator</a></p></li>
  <li><p><a href="https://bingmapsv8samples.azurewebsites.net/" rel="nofollow noreferrer">https://bingmapsv8samples.azurewebsites.net/</a></p></li>
  </ul>
  
  <p>Below is my sample code I'm trying to generate image:</p>
  
  <pre><code>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);
              });
  }
  </code></pre>
  
  <p>I'm calling <strong>generateImage</strong> function on button click event, and saving downloaded image (base64) to DB.</p>
  
  <p><strong>var img = mapImg.src;</strong> not fetching expected output, I've checked by converting base64 to image.
  I've tried everything and did research on issue but no luck!</p>
  
  <p>Any help would be appreciated, thanks!</p>