search

anvaka / city-roads

Visualization of all roads within any city
https://anvaka.github.io/city-roads/
MIT License
6.04k stars 448 forks source link

[Feature request] SVG export #4

Closed aguillien closed 4 years ago

aguillien commented 4 years ago

It would be super nice to have the ability to export the current map as svg instead of png.

Props for the work so far !

ketz commented 4 years ago

+1

grmain commented 4 years ago

I totally agree with this suggestion!

acircleda commented 4 years ago

Yes! If not SVG, vector PDF.

Devetec commented 4 years ago

Yes! This is needed.

spidey000 commented 4 years ago

+1

ktgvv commented 4 years ago

Yeah, agreed. I'd like to do some graphic art with those clean maps.

anvaka commented 4 years ago

Hello Friends!

I've added experimental support for this feature. May I ask you to play with it and tell me how it goes?

To enable the feature just add ?svg=1 to the query string. I.e. click here https://anvaka.github.io/city-roads/?svg=1 - there should be a new item to export as SVG (trying to keep it hidden, so that if there are any issues we don't set wrong expectations)

image

Would this work? Anything else is missing?

patzi commented 4 years ago

Looks good to me, though I first couldn't see anything in inkscape. I had to zoom in or make the lines thicker, but it seems to work. Thanks

grmain commented 4 years ago

Looks good too! Opened it in Inkscape, selected all the objects and applied a 1 px-wide solid color to the lines, exported it to a png and it's sooooo gorgeous. Each step required some time to Inkscape to process it because there are many many many objets to deal with, that seems normal to me. Many thanks anvaka, I really appreciate your work :)

lagerkoller commented 4 years ago

Works fine for me, thanks. However, the colors are ignored (always black and white). And there is no city label.

An additional rather small issue: at the end of each path's d attribute value there is an unnecessary space: ""

acircleda commented 4 years ago

The SVG pulls the view that I select (zoom level, placement), but its just black lines on a white bg.

jeroentvb commented 4 years ago

Downloading as svg doesn't work for me on Safari, macOS 10.15.2. I made sure ?svg=1 was in the url. I tried it in chrome and it worked.

nonoesp commented 4 years ago

@jeroentvb make sure you're appending &svg=1 if there are other arguments in the URL (e.g. https://anvaka.github.io/city-roads/?q=malaga%2C%20spain&areaId=3605275848&svg=1 and not https://anvaka.github.io/city-roads/?q=malaga%2C%20spain&areaId=3605275848?svg=1).

puchok commented 4 years ago

this ist really cool with .svg! Many thanks. Testet with chrom - it works

anvaka commented 4 years ago

Thank you for the feedback! This is done now. Here is side by side rendering of city roads and an exported svg (both rendered by google chrome):

image

Still need to look into Safari export error, but otherwise this change supports colors and labels customization. Hope this works for you too! Please open a new issue if you find anything missing or broken.

Thanks again for the inspiration :).