Initial commit

node_modules/maplibre-gl/build/generate-doc-images.ts

@@ -0,0 +1,80 @@
+import path from 'path';
+import fs from 'fs';
+import puppeteer from 'puppeteer';
+import packageJson from '../package.json' with { type: 'json' };
+
+const exampleName = process.argv[2];
+const useLocalhost = (process.argv.length > 3) && (process.argv[3] === 'serve');
+const examplePath = path.resolve('test', 'examples');
+
+const browser = await puppeteer.launch({headless: exampleName === 'all'});
+
+const page = await browser.newPage();
+// set viewport and double deviceScaleFactor to get a closer shot of the map
+await page.setViewport({
+    width: 600,
+    height: 250,
+    deviceScaleFactor: 2
+});
+
+async function createImage(exampleName) {
+    // get the example contents
+    if (useLocalhost) {
+        console.log('Using localhost to serve examples.');
+        await page.goto(`http://localhost:9966/test/examples/${exampleName}.html`);
+    } else {
+        const html = fs.readFileSync(path.resolve(examplePath, `${exampleName}.html`), 'utf-8');
+        await page.setContent(html.replaceAll('../../dist', `https://unpkg.com/maplibre-gl@${packageJson.version}/dist`));
+    }
+
+    // Wait for map to load, then wait two more seconds for images, etc. to load.
+    try {
+        // @ts-ignore
+        await page.evaluate(() => document.querySelector('.maplibregl-ctrl-attrib').style.display = 'none');
+        await page.waitForFunction('map.loaded()', {timeout: 10000});
+        // Wait for 5 seconds on 3d model examples, since this takes longer to load.
+        const waitTime = (exampleName.includes('3d-model') || exampleName.includes('globe')) ? 5000 : 1500;
+        console.log(`waiting for ${waitTime} ms`);
+        await new Promise(resolve => setTimeout(resolve, waitTime));
+    } catch {
+        // map.loaded() does not evaluate to true within 3 seconds, it's probably an animated example.
+        // In this case we take the screenshot immediately.
+        console.log(`Timed out waiting for map load on ${exampleName}.`);
+    }
+
+    await page
+        .screenshot({
+            path: `./docs/assets/examples/${exampleName}.png`,
+            type: 'png',
+            clip: {
+                x: 0,
+                y: 0,
+                width: 600,
+                height: 250
+            }
+        })
+        .then(() => console.log(`Created ./docs/assets/examples/${exampleName}.png`))
+        .catch((err) => {
+            console.log(err);
+        });
+}
+
+if (exampleName === 'all') {
+    const allFiles = fs.readdirSync(examplePath).filter(f => f.endsWith('html'));
+    console.log(`Generating ${allFiles.length} images.`);
+    for (const file of allFiles) {
+        await createImage(file.replace('.html', ''));
+    }
+} else if (exampleName) {
+    await createImage(exampleName);
+} else {
+    throw new Error(`
+  Usage: npm run generate-images <file-name|all> [serve]
+    file-name: the name of the example file in test/examples without the .html extension.
+    all: generate images for all examples.
+    serve: use localhost to serve examples - use 'npm run start' with this option, otherwise it will use the latest published version in npm.
+  Example: npm run generate-images 3d-buildings serve`
+    );
+}
+
+await browser.close();