---
title: "How to take a map screenshot with Ybug | JavaScript maps SDK"
description: "Take map screenshot with Ybug integration using helper."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to take a map screenshot with Ybug
This tutorial addresses the common issue of blank images (missing maps) appearing in screenshots instead of a beautiful map displays when using Ybug reporting and feedback tool.
1. Create a simple web page where we will add a map.
```html
Maptiler screenshot
```
2. Insert your valid [MapTiler API key](https://cloud.maptiler.com/account/keys/) in place of `YOUR_MAPTILER_API_KEY_HERE`.
3. Insert the Ybug snippet. Copy this code into your webpage, right before the closing `
` tag or view the [Ybug installation guide](https://ybug.io/docs/installation)
```html
```
4. Replace `YOUR-YBUG-PROJECT-ID` with your designated Ybug project id.
5. Reload the page. Here is what the basic web page looks like:
6. Get user feedback. Click the Feedback button to Report an issue. Thanks to the Feedback widget with screen capture, you can collect not only the feedback of your users but also take screenshots or screen recordings from their browsers.
7. Utilize the integrated feedback tools to annotate the map by drawing relevant markings and complete the detailed issue submission form with pertinent information.
8. Click the Submit button to send your feedback.
9. Review the user feedback. Access the Ybug dashboard interface and select the specific issue report created during the previous step.
10. Open the attached screenshot image. Sadly, you’ll notice the screenshot appears in the Ybug dashboard without the map image (no map image). This is how the screenshot looks in the Ybug dashboard:
11. Make the rendering buffer available. Use the Ybug’s `beforescreenshot` event which allows you to perform any necessary preparations or modifications to the page before the screenshot is taken. Read more about other [Ybug events](https://ybug.io/docs/installation#js-events).
```js
const map = new maptilersdk.Map({
container: document.getElementById("map-container"),
style: maptilersdk.MapStyle.STREETS,
geolocate: true
});
map.on('ready', () => {
Ybug.on('beforescreenshot', () => {
// Do some sync work here...
// If you need to perform some async actions, you can return a Promise
return new Promise(async(resolve) => {
// Do some async work...
resolve();
});
});
```
12. Get the map screenshot using the [MapTiler SDK screenshot helper](https://docs.maptiler.com/sdk-js/api/helpers/#screenshot).
```js
map.on('ready', () => {
Ybug.on('beforescreenshot', () => {
// Do some sync work here...
const mapCanvas = map.getCanvas();
// If you need to perform some async actions, you can return a Promise
return new Promise(async(resolve) => {
// Do some async work...
const mapBlob = await maptilersdk.helpers.takeScreenshot(map);
//Convert Blob to dataURL
const a = new FileReader();
a.onload = function(e) {
mapCanvas.toDataURL = (type, quality) => {
// Return the screenshot directly (e.g., Base64 string)
return e.target.result;
};
resolve();
}
a.readAsDataURL(mapBlob);
});
});
```
13. Create an issue report using the feedback button.
14. Access the Ybug dashboard and locate your newly created issue report.
15. View the attached screenshot image to confirm the successful capture of the map image. Now you have the map image in the report.
### Complete source code
```html
