How to create a mapbox sprite map

origin

The previous article introduced how to publish OSM data locally and use maputnik to customize the map style in mapbox format. When using maputnik to map, if you want to use your own picture as a map symbol, you need to make a sprite map.

There are many tools for making sprite maps, and there are a lot of online websites, but there is a common problem. Maputnik's requirement for sprite maps is to have sprite maps and json configuration files that describe the picture information in the sprite maps. These online website tools , Only sprite images can be generated, no json configuration file.

mapbox sprite tool

mapbox has open sourced a spritezero tool for making sprites , which can generate sprites and corresponding json files. The input file of spritezero is an svg file, and the output file is a sprite image with a specified scale and the corresponding json file.

When I installed the spritezero tool, I always reported an error. Looking at its issues, I found that many people have encountered this problem . The reason is that a class library used is too old. My final solution is to find a different way and find a docker library spritezero-docker . In this docker library, the environment of spritezero has been configured, so just use it directly.

How to use spritezero-docker

The following steps are based on the linux system

Clone library
```
docker pull dolomate/spritezero
```
In the current directory, create ./data/sprites/_svga folder
Svg files in the ./data/sprites/_svgfolder, name of the svg file should not be too casual, the name will be written json configuration file will be used during subsequent use.

Execute the command in the current directory to generate the sprite image:

docker run -it -e FOLDER=_svg -e THEME=sprites -v ${PWD}/data:/data dolomate/spritezero

Generated sprite will be stored in ./data/spritesa folder

Sprite black frame problem

Check the generated sprite image, you may encounter the problem in the image below: only black outline

After a thorough investigation, it was found that the reason for the above problem was: in the svg code, there was a problem with the way of writing style. Style alone cannot be written, it needs to be embedded in the dom element, as shown below:

As a solution, when exporting SVG files with AI (Adobe Illustrator) software, select "Style Attributes" in the CSS property bar, and style will be embedded in the dom element. The following picture is the correct option when exporting, you can refer to this article for more in-depth

Use the generated sprite map in maputnik

Publish the generated sprite map with a web server, I use tomcat. Remember to solve the cross-domain problem of the web server, otherwise an error will be reported when calling.
Configure the path for publishing the wizard map, as shown in the figure below

Select a symbol of the symbol type, and in the drop-down box of the Image option, the name of the picture in the sprite will be displayed directly. This picture name is the name of the SVG file that we asked you not to name too casually.

to sum up:

When using maputnik to configure maps, if you want to customize the map symbols, you have to make your own sprite maps
The wizard map creation tools on the Internet can generally only generate wizard maps without json configuration files, while maputnik requires json configuration files.
mapbox has opened up a spritezero tool for making sprites, and the generated sprites have json configuration files.
spritezero will report an error during installation because a library used is too old
spritezero-docker is spritezero's docker library, which has solved the installation environment problem
Introduced how to use spritezero-docker to generate sprite images
When generating a sprite, if there is a black frame problem, it is mostly because of the style writing problem. style needs to be embedded in the dom element
Introduced how to use the generated sprite map in maputnik