How to take a map screenshot with Usersnap

This tutorial addresses the common issue of blank images (missing maps) appearing in screenshots instead of a beautiful map displays when using Usersnap 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 Usersnap snippet. Copy this code into your webpage, right before the closing </body> tag or view the Usersnap installation guide

4. Replace YOUR-USERSNAP-SPACE-API-KEY with your designated Usersnap Space API Key.

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 Usersnap 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 Usersnap dashboard without the map image (no map image). This is how the screenshot looks in the Usersnap dashboard:

    

11. Make the rendering buffer available. Replace the original .toDataURL() of the map canvas with a custom implementation.

12. Create an issue report using the feedback button.

13. Access the Usersnap dashboard and locate your newly created issue report.

14. 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 Ybug

Example

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