Export Americana style map to SVG

Is there an easy way to take the screen I’m looking at on the Americana map style and export it as an SVG, so that I can tweak and edit it to put as a static image on a web site giving directions to a place?

The main OSM web site has in the “Share” tab an Image export that lets me get an SVG, and that’s what I used for this sort of thing in the past, but I’d like to do it with the Americana style if possible.

If I need to clone the Americana Github repo and spin up my own server, I can probably figure that out, but I didn’t want to start down that path if it wasn’t going to actually help me out.

Thanks.

2 Likes

Thanks for your interest in the OSM Americana project!

First, let me explain how you’d prepare a generic Mapbox or MapLibre style for use in an SVG editor. The Mapbox Maps SDK or MapLibre libraries render directly to a hardware-accelerated WebGL canvas for performance reasons. They have APIs for querying the tiles for raw vector data but don’t come with built-in options for exporting the styled, rendered map to a vector format. That’s what the Mapbox/MapLibre GL Export plugins claim to do, though I haven’t tried them myself. This is a library that you’d need to install on the same webpage that displays the style.

Another option is to add a vector tile layer to QGIS based on an MVT URL format and Mapbox or MapLibre stylesheet URL. QGIS can mostly convert the stylesheet to native layers and symbols, though there are some notable gaps in the implementation. From there, you can create a print layout and export it as an SVG or PDF.

Complicating matters, OSM Americana is technically a full-fledged Web application rather than a bare style. We do publish a raw stylesheet for use on other platforms or in applications that expect a stylesheet in JSON format. However, this stylesheet lacks some dynamic features of OSM Americana, namely highway shields and localized labels. If you want the SVG to closely resemble the Web application, your best bet would be to fork OSM Americana, install MapLibre GL Export probably somewhere around here, run the application, and export from there. Presumably this export would include those dynamic features that you wouldn’t get otherwise. If it works well, consider submitting a pull request to have it added to the main application, so that others don’t have to bother forking.

5 Likes

Thank you for the suggestions. I think I’m going to try QGIS first, since I have played around with that some, and even if it doesn’t get me the full Americana style I may be able to just add on the few route shields I’d be using to my export directly. To make sure I understand what you’re suggesting, I add a new Vector Tiles Service layer, with URL of https://dwuxtsziek7cf.cloudfront.net/planet/{z}/{x}/{y}.mvt and Style URL of https://zelonewolf.github.io/openstreetmap-americana/style.json?

If that’s doesn’t work around I may try the forking and adding that plugin; I’d been meaning to play around with installing an instance of Americana at some point anyway.

Yes, that’s correct.

For posterity: that CloudFront URL may change in the future. To get the correct URL format in the future, get the value of the OPENMAPTILES_URL constant at openstreetmap-americana/src/configs/config.aws.js at main · ZeLonewolf/openstreetmap-americana · GitHub, which is a URL to a JSON file, and get the value of the tiles property in that JSON file.

2 Likes

That cloudfront host should also resolve to vt.ourmap.us. I expect to switch it over at some point.

1 Like

I haven’t had as much of a chance to play with this as I would have liked, but I think I do just want to make my own map with QGIS with just my own style (which I might base some on Americana but really I just want to show the few roads from the main roads to the destination). Is there some reference somewhere to what the “fields” are (if that’s the right term) for making the filters when creating a style in QGIS? The roads seem to be in the “transportation” layer, and I can try to infer some “class” values from looking through that style.json, but it all seems to be organized differently from the OSM tagging that I’m familiar with. Is there a “primer” for using vector tiles somewhere for me to try to get up to speed?

The vector tile schema is based on OpenMapTiles. The schema documentation isn’t always completely up-to-date, but you can get a good idea of what’s in the tiles using this tileset inspector.

The layers that QGIS creates are based on the style layers rather than the tile layers. Unfortunately, we haven’t documented those layers anywhere, and many of them are generated at runtime based on code that won’t be apparent by skimming the codebase. QGIS lacks support for the step expression operator, so you’ll see a lot of colors and sizes that are off at certain zoom levels; you’d need to tweak that manually.

1 Like

Thank you again for all your help! I’ve made my map the way I wanted it all in QGIS now. I really didn’t end up doing anything with the Americana style after all, just making my own style for what I wanted to show, but your tips very much pointed me in the right direction.

1 Like