map._canvas.toDataURL() gives blank white image instead of map's screenshot

[YuvrajHereTL]

Hi, Below is my sample code for reference, You can put this in any vue js App.js

<script setup lang="ts">
import { onMounted, shallowRef } from "vue";
import * as maptilersdk from "@maptiler/sdk";
import "@maptiler/sdk/dist/maptiler-sdk.css";
import {
  MaplibreExportControl,
  Size,
  PageOrientation,
  Format,
  DPI,
} from "@watergis/maplibre-gl-export";
import "@watergis/maplibre-gl-export/dist/maplibre-gl-export.css";

let mapRef = shallowRef<maptilersdk.Map>();

onMounted(() => {
  maptilersdk.config.apiKey = "maptiler-key";

  mapRef.value = new maptilersdk.Map({
    container: "map", // container id
    style: "https://demotiles.maplibre.org/style.json", // style URL
    center: [77.7394412573617, 12.964158575354531],
    zoom: 12,
  });

  mapRef.value.on("load", () => {
    // getCanvasImage();
    const exportControl = new MaplibreExportControl({
      PageSize: Size.A3,
      PageOrientation: PageOrientation.Portrait,
      Format: Format.PNG,
      DPI: DPI[96],
      Crosshair: true,
      PrintableArea: true,
      Local: "en",
    });
    mapRef.value.addControl(exportControl, "top-right");
  });
});

const getCanvasImage = () => {
  const imgUrl = mapRef.value._canvas.toDataURL();
  console.log("imgUrl", imgUrl);
};
</script>

<template>
  <div id="map">
    <button @click="getCanvasImage">get image</button>
  </div>
</template>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
  background-color: red;
  position: relative;
}

button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>

So, Basically, I want to grab a screenshot of the map. I tried directly using canvas.toDataURL() by accessing canvas using both map._canvas and map.getCanvas(). It just gives a blank white image.

I then tried using the @watergis/maplibre-gl-export control, the control is rendered correctly, but when I click generate it just loads for some time and does nothing.

No Errors are thrown in both the cases.

Same happens even when I use maplibre instead of maptiler, Does the map restrict such canvas exports?

Any help or lead would help, Thank you!

[petr-hajek]

Hello @YuvrajHereTL - for taking a screenshot, there's a helper in the SDK: https://docs.maptiler.com/sdk-js/api/helpers/#screenshot
There are 2 examples here: https://docs.maptiler.com/sdk-js/examples/?q=screenshot+helper
Hope it helps!