This project comes from a silly idea: creating a raster map web server, using the browser lib MapLibre GL JS as a rendering engine instead of the low-level MapLibre GL native lib.
Under the hood, it launches a headless Chromium browser with Puppeteer, go to a special page with a Maplibre GL JS map instance, and takes screenshots to serve as images.
Request: http://localhost:3000/map?width=600&height=300&zoom=12¢er=-3.825,57.185&style=qwantmaps
Result:
The mapstyles.json file contains an array of available map styles. Each is defined by 3 properties:
name: the style name, used to specify which style to render for multiple style instancesstyleUrl: the url of the vector map style definition in JSONattribution: the attribution string, to display proper copyright information on each generated image
You should replace the styles in the current file by styles you own or have the rights to use.
Alternatively, to use raster tiles, you can define a rasterTiles object in place of styleUrl.
See the current mapstyles.json file for an example.
$ node index.js
By default, it runs on the port 3000. You can specify another port using an env var.
$ PORT=3666 node index.js
Then go to http://localhost:<port>/map and send queries with those query string parameters:
| Parameter | Description | Default |
|---|---|---|
style |
Name of the map style, as defined in the mapstyles.json file |
First defined style |
center |
Coordinates of the center, as <longitude>,<latitude> |
0,0 |
zoom |
Zoom level | 3 |
width |
Image width in pixels | 400 |
height |
Image height in pixels | 400 |
type |
png or jpeg |
png |
timeout |
Query timeout in milliseconds | 30000 |