Skip to content
This repository has been archived by the owner on Jul 10, 2023. It is now read-only.

Fix thumbnail generation and update images #395

Merged
merged 3 commits into from
Feb 16, 2023

Conversation

SnailBones
Copy link
Contributor

@SnailBones SnailBones commented Feb 16, 2023

Fixes #378

Generating thumbnail images with npm run create-image is broken, this appears to stem from #253 due to the change to a .ts file and the replacement of puppeteer with playwright. In this PR I revert those two changes, and make some additional improvements to the image generation script:

  • Change the wait condition to rely on map.loaded() instead of network status. This solves cases where the screenshot would take before the map had loaded. An additional 1.5 second delay ensures that post-loading content (e.g. added images) are captured in the screenshot.
  • Fix blurry images by calling "page.setViewport" before "page.setContent" (see blurry canvas if deviceScaleFactor > 1 puppeteer/puppeteer#2755 (comment)).
  • Disable headless mode when generating a single image, this allows for interacting with the map to improve the screenshot (i.e. display the popup on click) and is also helpful for debugging.
  • Add an experimental option to automate generating all images by running npm run create-image . This is currently crashing due to a puppeteer issue, but generates most of the images. Puppeteer remains in headless mode during this process.
  • Refactoring for readability.

Before:

image

After:

image

Copy link
Contributor

@wipfli wipfli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for updating these images. Looks much better!

@wipfli wipfli merged commit eea2502 into maplibre:main Feb 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Disappointing discrepancy between example thumbnail and implementation
2 participants