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.

2. Insert your valid MapTiler API key in place of YOUR_MAPTILER_API_KEY_HERE.

3. Insert the Ybug snippet. Copy this code into your webpage, right before the closing </body> tag or view the Ybug installation guide

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.

12. Get the map screenshot using the MapTiler SDK screenshot helper.

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.

    

Learn more

If you want to know the reasons why these feedback tools return a blank image and why this implementation approach was necessary, you can find full technical details in How to fix a missing map from feedback button.

Related examples

Download a map screenshot (screenshot helper)

Example

This example shows how to download a map screenshot as a PNG file using the screenshot helper.

Take screenshot (screenshot helper)

Example

This example shows how to capture the current map view as a blob (PNG image).

Missing map from feedback button

Example

This example shows how to capture the current map view as a blob (PNG image).

Screenshot with Usersnap

Example

This example shows how to capture the current map view with Usersnap.