4

I have a vector tile source and a Mapbox GL style sheet and would like to produce vector images (SVG) with them. The renderers I found only render in canvas client-side or PNGs server-side.

Any ideas?

2 Answers 2

5

TLDR; There is no direct way to do this, the best option is to evaluate why you need SVG and why you need Mapbox GL and choose other tools/options.

First, this depends on whether your goal is to render the SVG in a browser or if you want something more usable in vector graphics program like Illustrator.

There are also two problems to deal with 1) the vector tile source and 2) the style language.

Vector tiles are great for the browser, but if your goal is to create a single SVG file, it will get very messy as the features are chopped into tiles. You are better off going back to the original spatial data and converting that to SVG directly. When creating the SVG you also need to choose the projection which then becomes a static part of the SVG. That is why SVG is not a GIS format :) While most people are familiar with Web Mercator maps, it is by no means the best option.

You can use D3.js to render vector tiles in the browser as SVG http://mapzen.github.io/d3-vector-tiles/ I don't know of any examples that use the Mapbox-GL style language. You would need to convert the styles to CSS styles and apply them to SVG graphics, that may not be straight forward. There is an explanation here on why Mapbox moved away from using CSS https://blog.mapbox.com/the-end-of-cartocss-da2d7427cf1

I have an experimental SVG export in MapHubs (a mapbox-gl based application) https://github.com/maphubs/maphubs/blob/master/src/routes/secure/exports.js#L26

I use the PostGIS ST_AsSVG option to extract the data https://postgis.net/docs/ST_AsSVG.html then I pull out the colors from the Mapbox GL style, very basic solution at this point...

0

As of the GeoServer 2.17 release you can do this with GeoServer, or if you wish to make a command line tool the underling GeoTools library.

GeoServer can be configured with your vector data source and mapbox style, and can output SVG in response to a GetMap request.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.