-
-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Dynamically create image sprites for MapLibre rendering, given a directory with images. ### TODO * [x] Work with @flother to merge these PRs * [x] flother/spreet#59 (must have) * [x] flother/spreet#57 * [x] flother/spreet#56 * [ ] flother/spreet#62 (not required but nice to have, can upgrade later without any code changes) * [x] Add docs to the book * [x] Add CLI param, e.g. `--sprite <dir_path>` * [x] Don't output `.sprites` in auto-genned config when not in use ### API Per [MapLibre sprites API](https://maplibre.org/maplibre-style-spec/sprite/), we need to support the following: * `/sprite/<sprite_id>.json` metadata about the sprite file - all coming from a single directory * `/sprite/<sprite_id>.png` all images combined into a single PNG * `/sprite/<sprite_id>@2x.json` same but for high DPI devices * `/sprite/<sprite_id>@2x.png` Multiple sprite_id values can be combined into one sprite with the same pattern as for tile joining: `/sprite/<sprite_id1>,<sprite_id2>,...,<sprite_idN>[.json|.png|@2x.json|@2x.png]`. No ID renaming is done, so identical names will override one another. ### Configuration [Config file](https://maplibre.org/martin/config-file.html) and possibly CLI should have a simple option to serve sprites. The configuration may look similar to how mbtiles and pmtiles are configured: ```yaml # Publish sprite images sprites: paths: # scan this whole dir, matching all image files, and publishing it as "my_images" sprite source - /path/to/my_images sources: # named source matching source name to a directory my_sprites: /path/to/some_dir ``` Implement #705
- Loading branch information
Showing
59 changed files
with
1,442 additions
and
50 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
# Sprite Sources | ||
|
||
Given a directory with SVG images, Martin can generate a Sprite index an a PNG image, for both low and high resolution displays. The SVG filenames without extension will be used as the sprite image IDs. The images are searched recursively in the given directory, so subdirectory names will be used as prefixes for the image IDs, e.g. `icons/bicycle.svg` will be available as `icons/bicycle` sprite image. | ||
|
||
### API | ||
As described in the [MapLibre sprites API](https://maplibre.org/maplibre-style-spec/sprite/), Sprites must be accessible via support the following endpoints. The sprite image and index are generated on the fly, so if the sprite directory is updated, the changes will be reflected immediately. | ||
|
||
##### Sprite PNG | ||
|
||
![sprite](sources-sprites.png) | ||
|
||
`GET /sprite/<sprite_id>.png` endpoint contains a single PNG sprite image that combines all sources images. Additionally, there is a high DPI version available at `GET /sprite/<sprite_id>@2x.png`. | ||
|
||
##### Sprite index | ||
`/sprite/<sprite_id>.json` metadata index describing the position and size of each image inside the sprite. Just like the PNG, there is a high DPI version available at `/sprite/<sprite_id>@2x.json`. | ||
|
||
```json | ||
{ | ||
"bicycle": { | ||
"height": 15, | ||
"pixelRatio": 1, | ||
"width": 15, | ||
"x": 20, | ||
"y": 16 | ||
}, | ||
... | ||
} | ||
``` | ||
#### Combining Multiple Sprites | ||
Multiple sprite_id values can be combined into one sprite with the same pattern as for tile joining: `/sprite/<sprite_id1>,<sprite_id2>,...,<sprite_idN>`. No ID renaming is done, so identical sprite names will override one another. | ||
|
||
### Configuring from CLI | ||
|
||
A sprite directory can be configured from the CLI with the `--sprite` flag. The flag can be used multiple times to configure multiple sprite directories. The name of the sprite will be the name of the directory -- in the example below, the sprites will be available at `/sprite/sprite_a` and `/sprite/sprite_b`. Use `--save-config` to save the configuration to the config file. | ||
|
||
```shell | ||
martin --sprite /path/to/sprite_a --sprite /path/to/other/sprite_b | ||
``` | ||
|
||
### Configuring with Config File | ||
|
||
A sprite directory can be configured from the config file with the `sprite` key, similar to how [MBTiles and PMTiles](config-file.md) are configured. | ||
|
||
```yaml | ||
# Sprite configuration | ||
sprites: | ||
paths: | ||
# all SVG files in this dir will be published as a "my_images" sprite source | ||
- /path/to/my_images | ||
sources: | ||
# SVG images in this directory will be published as a "my_sprites" sprite source | ||
my_sprites: /path/to/some_dir | ||
``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.