Live data from Hacker News

I Added SVG Maps to My Travel Posts

cyberb.space

11–17 of 17 posts

Re: I Added SVG Maps to My Travel Posts

#11
post #3

Super neat, the end result looks great and adds a lot to the posts. On the downside, inlining the map causes the HTML to balloon up to ~500kB/~180kB gzipped, compared to 30kB/10kB on this post (which lacks a map). The site is already insanely fast, but you could pull the map SVG into an actual file, so it's cached between pages, and becomes a lower-priority resource (which will ~halve First Contentful Paint). Then yo…

the author is also using many large, multi-megabyte photos in their travel posts, so I'm not sure how significant the size of the SVG content is, in comparison

Big inlined resources impact paint time - a lot! You'll see this by running Lighthouse/PageSpeed Insights on the posts. E.g. no map: https://imgur.com/a/5CJjEUq vs map: https://imgur.com/a/mX1ZDz7

That means users are staring at blank for longer. That can really stink on a poor connection.

Images are requested at a lower priority and so don't cause the same problems for rendering. But it's a great idea to compress them, too, and use something like `srcset` to send an appropriately sized version!

Re: I Added SVG Maps to My Travel Posts

#12
I love this Josh! I recently discovered Protomaps (https://protomaps.com) and have been having a lot of fun doing mapping without paying Google or Mapbox a small fortune for the privilege. I found the the basemaps look much better than the protomaps site makes them appear (they're super zoomed out in the samples where the styles don't come together as well as they do when zoomed in)

Re: I Added SVG Maps to My Travel Posts

#17
Great post!

I had myself this itch to scratch and ended up making an overly over-engineered tool to do just that: https://cartosvg.com/

I think it might interest you as it covers all your use cases (except the responsiveness part maybe), and personally I thin it can lead to quite beautiful results :)

Cheers!

Post reply on HN