{"id":29133257,"url":"https://github.com/do-me/maplibre-thumbnails","last_synced_at":"2026-02-02T02:32:29.374Z","repository":{"id":300981062,"uuid":"1007763607","full_name":"do-me/maplibre-thumbnails","owner":"do-me","description":"Create png thumbnails with maplibre, pmtiles and geometries!","archived":false,"fork":false,"pushed_at":"2025-06-24T15:18:02.000Z","size":9773,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-24T15:37:22.389Z","etag":null,"topics":["basemap","maplibre","pmtiles","thumbnail"],"latest_commit_sha":null,"homepage":"https://do-me.github.io/maplibre-thumbnails/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/do-me.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-24T13:46:09.000Z","updated_at":"2025-06-24T15:18:06.000Z","dependencies_parsed_at":"2025-06-24T15:49:16.341Z","dependency_job_id":null,"html_url":"https://github.com/do-me/maplibre-thumbnails","commit_stats":null,"previous_names":["do-me/maplibre-thumbnails"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/do-me/maplibre-thumbnails","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fmaplibre-thumbnails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fmaplibre-thumbnails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fmaplibre-thumbnails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fmaplibre-thumbnails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/do-me","download_url":"https://codeload.github.com/do-me/maplibre-thumbnails/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fmaplibre-thumbnails/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29001654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T01:32:03.847Z","status":"online","status_checked_at":"2026-02-02T02:00:07.448Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basemap","maplibre","pmtiles","thumbnail"],"created_at":"2025-06-30T07:02:36.528Z","updated_at":"2026-02-02T02:32:29.358Z","avatar_url":"https://github.com/do-me.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Maplibre Thumbnails\n\n### Demo 1: https://do-me.github.io/maplibre-thumbnails/\n\nCreate png thumbnails with maplibre, pmtiles and geometries of your choice!\n\n![image](https://github.com/user-attachments/assets/18265def-7337-4b01-836c-f77b793f8628)\n\nMaplibre renders the vector tiles on canvas, so you (via JS) or the browser can easily access them and generate a png for you. Try the live app in your browser!\nHere you see 2x each: markers, lines, polygons or empty maps.\n\n## Loading a different style\n\nThe style is currently simplified like this, so that the thumnbails render faster. For my personal use case, the thumbnails were rather decorative, so I did not need any other info:\n\n```javascript\nconst style = {\n    version: 8,\n    sources: { \"protomaps\": { type: \"vector\", url: `pmtiles://${PMTILES_URL}` } },\n    layers: [\n        { \"id\": \"background\", \"type\": \"background\", \"paint\": { \"background-color\": \"#f0f2f5\" } },\n        { \"id\": \"water\", \"source\": \"protomaps\", \"source-layer\": \"water\", \"type\": \"fill\", \"paint\": { \"fill-color\": \"#aadaff\" } },\n        { \"id\": \"roads\", \"source\": \"protomaps\", \"source-layer\": \"roads\", \"type\": \"line\", \"paint\": { \"line-color\": \"#e0e0e0\", \"line-width\": 1 } },\n        { \"id\": \"buildings\", \"source\": \"protomaps\", \"source-layer\": \"buildings\", \"type\": \"fill\", \"paint\": { \"fill-color\": \"#cccccc\" } }\n    ]\n};\n```\n\nYou can however very well change it to the official protomaps style.json: \n\n### Demo 2: https://do-me.github.io/maplibre-thumbnails/load_style_from_file.html\n\n![image](https://github.com/user-attachments/assets/d02cd994-49d4-429a-81ff-428bbf149fc2)\n\n## Limitations \n\nThis method can be used to \"print\" a map, e.g. for PDF reports. However, apparently something changed with protomaps sprites and glyphs recently so some small tweaks are required print everything 100% as displayed on the map. \n\nMeanwhile, you can see this demo for printing a map with geometries \"as is\" using openfreemap with: \n\n`style: 'https://tiles.openfreemap.org/styles/liberty'`\n\n### Demo 3: https://do-me.github.io/maplibre-thumbnails/simple_print.html\n\nThis is the actual output you get when clicking the download button (on a wide screen):\n![image](https://github.com/user-attachments/assets/b1be82f3-bc1a-4789-89b1-2904e17c55f0)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-me%2Fmaplibre-thumbnails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdo-me%2Fmaplibre-thumbnails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-me%2Fmaplibre-thumbnails/lists"}